Flutter: navigating only part of screen

So I have a Row and two containers; first for selection of page and second for navigating to that selected page. I pass a string value to the 2nd container for identification which page should I navigate towards.

enter image description here

2 answers

  • answered 2022-05-04 12:13 Mohamed Amin

    use NavigationRail

    example:

    import 'package:flutter/material.dart';
    
    void main() => runApp(const MyApp());
    
    class MyApp extends StatelessWidget {
      const MyApp({Key? key}) : super(key: key);
    
      static const String _title = 'Flutter Code Sample';
    
      @override
      Widget build(BuildContext context) {
        return const MaterialApp(
          title: _title,
          home: MyStatefulWidget(),
        );
      }
    }
    
    class MyStatefulWidget extends StatefulWidget {
      const MyStatefulWidget({Key? key}) : super(key: key);
    
      @override
      State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
    }
    
    class _MyStatefulWidgetState extends State<MyStatefulWidget> {
      int _selectedIndex = 0;
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Row(
            children: <Widget>[
              NavigationRail(
                selectedIndex: _selectedIndex,
                onDestinationSelected: (int index) {
                  setState(() {
                    _selectedIndex = index;
                  });
                },
                labelType: NavigationRailLabelType.selected,
                destinations: const <NavigationRailDestination>[
                  NavigationRailDestination(
                    icon: Icon(Icons.favorite_border),
                    selectedIcon: Icon(Icons.favorite),
                    label: Text('First'),
                  ),
                  NavigationRailDestination(
                    icon: Icon(Icons.bookmark_border),
                    selectedIcon: Icon(Icons.book),
                    label: Text('Second'),
                  ),
                  NavigationRailDestination(
                    icon: Icon(Icons.star_border),
                    selectedIcon: Icon(Icons.star),
                    label: Text('Third'),
                  ),
                ],
              ),
              const VerticalDivider(thickness: 1, width: 1),
              // This is the main content.
              Expanded(
                child: Center(
                  child: Text('selectedIndex: $_selectedIndex'),
                ),
              )
            ],
          ),
        );
      }
    }
    

  • answered 2022-05-05 01:47 B. Mercan

    here is the simple solution, you can add page or widget to list then add setstate and index of widget to button onPressed function. when you pressed to button its gonna show the page

    class MyHomePage extends StatefulWidget {
      const MyHomePage({Key? key}) : super(key: key);
    
      @override
      State<MyHomePage> createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      int _selectedIndex = 0;
      final screen = [
        const Center(child: Text('Home')),
        const Center(child: Text('Search')),
      ];
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Row(
            children: [
              Container(
                width: 200,
                color: Colors.red,
                child: Column(
                  children: [
                    IconButton(
                        onPressed: () {
                          setState(() {
                            _selectedIndex = 0;
                          });
                        },
                        icon: Icon(Icons.home)),
                    IconButton(
                        onPressed: () {
                          setState(() {
                            _selectedIndex = 1;
                          });
                        },
                        icon: Icon(Icons.search)),
                  ],
                ),
              ),
              screen[_selectedIndex]
            ],
          ),
        );
      }
    }
    

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum