How to navigate to other screen from navigation drawer in flutter

Question

i have tried in the following way but it is not working please tell me the solutions

import 'package:book_recommendation_app/about.dart';
import 'package:book_recommendation_app/home.dart';
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';

Future<void> main() async {

  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);



  void onTap(menuItem) {
    switch (menuItem) {
      case 'item1':
        print('item1 clicked');
        break;
      case 'item2':
        print('item2 clicked');
        break;
      case 'item3':
        print('item3 clicked');
        break;
    }
  }



  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    var menuItems = <String>['item1', 'item2', 'item3'];
    return MaterialApp(
      title: 'Book Reccomendation Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Home'),
          actions: <Widget>[
            PopupMenuButton<String>(
                onSelected: onTap,
                itemBuilder: (BuildContext context) {
                  return menuItems.map((String choice) {
                    return PopupMenuItem<String>(
                      child: Text(choice),
                      value: choice,
                    );
                  }).toList();
                })
          ],
        ),
        body: searchBar(),
        drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: [
              const DrawerHeader(
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
                child: Text('Drawer Header'),
              ),
              ListTile(
                title: const Text('Item 1'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
              ListTile(
                title: const Text('About us'),
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => AboutUs()),
                  );
                  Navigator.pop(context);

                },
              ),
            ],
          ),
        ),
      ),
      // home: const MyHomePage(title: 'Book Reccomendation Demo Home Page'),
    );
  }
}

// This widget is the root of your application. @override Widget build(BuildContext context) { var menuItems = <String>['item1', 'item2', 'item3']; return MaterialApp( title: 'Book Reccomendation Demo', home: Scaffold( appBar: AppBar( title: Text('Home'), actions: <Widget>[ PopupMenuButton<String>( onSelected: onTap, itemBuilder: (BuildContext context) { return menuItems.map((String choice) { return PopupMenuItem<String>( child: Text(choice), value: choice, ); }).toList(); }) ], ), body: searchBar(), drawer: Drawer( child: ListView( padding: EdgeInsets.zero, children: [ const DrawerHeader( decoration: BoxDecoration( color: Colors.blue, ), child: Text('Drawer Header'), ), ListTile( title: const Text('Item 1'), onTap: () { Navigator.pop(context); }, ), ListTile( title: const Text('About us'), onTap: () { Navigator.push( context, MaterialPageRoute(builder: (context) => AboutUs()), ); Navigator.pop(context);

            },
          ),
        ],
      ),
    ),
  ),
  // home: const MyHomePage(title: 'Book Reccomendation Demo Home Page'),
);

} }

score 1 · Answer 1 · answered Mar 23 '22 at 01:01

1

Do not call Navigator.pop(context) immediately afther calling Navigator.push. Because for me it looks like your currently pushing to the next screen, but immediately popping again so that it will never be reached.

answered Mar 23 '22 at 01:01

TheUltimateOptimist

1,089
4
19

score 1 · Answer 2 · answered Mar 23 '22 at 01:45

In this ListTile

ListTile(
            title: const Text('About us'),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => AboutUs()),
              );
              Navigator.pop(context);

            },
          ),

You use Navigator.Push(context,MaterialPageRout(builder: (context) => AboutUs())); then you use Navegator.pop(context); that means you push a new screen then you closed it and here is the problem

you need just to remove this line Navigator.pop(context);

score 1 · Answer 3 · answered Mar 23 '22 at 07:06

1

Pop the drawer before pushing to new screen, Like

Navigator.pop(context);
Navigator.push(context,
   MaterialPageRoute(builder: (context) => AboutUs(),
  ),
);

answered Mar 23 '22 at 07:06

Abhishek Thakur

99
6

score 0 · Answer 4 · answered Mar 23 '22 at 04:37

You can use GetX too for navigate your pages in easier way if you don't want to go with MaterialPageRoute.

ListTile(
        title: const Text('About us'),
        onTap: () {
          Get.to(AboutUs());
          Navigator.pop(context);
        },
      ),

How to navigate to other screen from navigation drawer in flutter

4 Answers4