Syncing drawer items and bottom navigation bar items

Question

I have created a bottom navigation bar and a drawer in my flutter app. I managed to show the same screen when user clicks on a bottom navigation bar item or a drawer item which both have the same purpose or target screen. But I notice that when user clicks on an item in the drawer, the bottom navigation bar item targeting the same screen is not getting active. Hope somebody understands what I'm talking about. Now I wanna know what would be the way, even the code to achieve that behavior in flutter

Here are the codes which i want to enhance


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;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> screens = <Widget>[
    Screen1(),
    Screen2(),
    Screen3()
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
      ),
      body: screens.elementAt(_selectedIndex),

      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
      drawer: Drawer(
        child: ListView(
          // Important: Remove any padding from the ListView.
          padding: EdgeInsets.zero,
          children: [
            const DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Text('Drawer Header'),
            ),
            ListTile(
              title: const Text('Item 1'),
              onTap: () {
                Navigator.push(
            context,
            new MaterialPageRoute(
                builder: (context) => Screen1());
              },
            ),
            ListTile(
              title: const Text('Item 2'),
              onTap: () {
                Navigator.push(
            context,
            new MaterialPageRoute(
                builder: (context) => Screen2());
              },
            ),
            ListTile(
              title: const Text('Item 3'),
              onTap: () {
                Navigator.push(
            context,
            new MaterialPageRoute(
                builder: (context) => Screen3());
              },
            ),
          ],
        ),
      ),
    );
  }
}```

Please can you add your code? – Sami Kanafani Jul 28 '21 at 17:18 — Sami Kanafani, Jul 28 '21 at 17:18
ok @SamiKanafani I've added now the code – shellking4 Jul 28 '21 at 18:46 — shellking4, Jul 28 '21 at 18:46

score 0 · Answer 1 · answered Jul 28 '21 at 19:13

So if I got your question right, you have drawer and a bottom navigation bar that do the same thing, i.e clicking on the first item in the drawer item shows Screen1(), and clicking on the first item in the bottom navigation bar should also show Screen1(). In your implementation, selecting an item in the bottom navigator bar will change the _selectedIndex variable in the state thus it updates the selected item in the bottom navigator bar, and it shows the screen inside your MyStatefulWidget. However the drawer is pushing a new screen, meaning that it is not updating the _selectedIndex thus no changes are occurring in your MyStatefulWidget, just a new screen is pushed

 Navigator.push(
            context,
            new MaterialPageRoute(
                builder: (context) => Screen1());
              },

So if you want to have the same behavior between the drawer and the bottom navigation you can update your onTap method

ListTile(
              title: const Text('Item 1'),
              onTap: () {

                  Navigator.of(context).pop();//this will close the drawer
                  _onItemTapped(0);//this will set the selected screen in the widget, and will update the bottom navigation
                  
              },
            ),

Seems very obvious :)) thank you very much for the hint. I would've upvote if i had more badges — shellking4, Jul 28 '21 at 22:06

Syncing drawer items and bottom navigation bar items

1 Answers1