My Navigation Drawer just doesn't works. I have created the screens and gone through a lot of examples

Issue

My drawer is not navigating to other screens. I don’t know why, I have gone through a lot of StackOverflow solutions.
I have created routes also but it is still not working.

Here is my code for the drawer.

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

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: [
          const DrawerHeader(
            decoration: BoxDecoration(
              color: Colors.greenAccent,
            ),
            child: Text('Welcome!'),
          ),
          ListTile(
            title: const Text('Home'),
            onTap: () => Navigator.pushReplacementNamed(context, Routes.home)
          ),
          ListTile(
            title: const Text('Settings'),
            onTap: () => Navigator.pushReplacementNamed(context, Routes.settings)
          ),
          ListTile(
            title: const Text('LogOut'),
            onTap: () => Navigator.pushReplacementNamed(context, Routes.logout)
          ),
        ],
      ),
    );
  }
  
}

Here is the routes class.

import 'package:adaptive_layout/widgets/candidate_form.dart';
import 'package:adaptive_layout/widgets/logout.dart';
import 'package:adaptive_layout/widgets/settings.dart';

class Routes {
  static const String home = CandidateForm.routeName;
  static const String settings = Settings.routeName;
  static const String logout = LogOut.routeName;
}

All the classes just have a text displayer in the centre.
But neither the drawer closes on its own after onTap nor does it take to that page.

This is my MaterialAppWidget i.e. the main.dart.

import 'package:adaptive_layout/pages/desktop_page.dart';
import 'package:adaptive_layout/pages/mobile_page.dart';
import 'package:adaptive_layout/pages/tablet_page.dart';
import 'package:flutter/material.dart';


void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Views',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SafeArea(
        child: LayoutBuilder(
          builder: (context, constraints) {
            if(constraints.maxWidth < 600){
              return const MobilePage();
            }
            else if(constraints.maxWidth < 768){
              return const TabletPage();
            }
            else{
              return const DesktopPage();
            } 
          }
        ),
      ),
    );
  }
}

Please help. being trying it for 2 days now.

Solution

This is happening because you’re not defining your routes in the MaterialApp widget. This is not necessary if you’re using annonymous routes, but it is a must if you’re using named routes.

You’ll need to get rid of you’re home: property on the MaterialApp and move your LayoutBuilder elsewhere.

Like this:

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Views',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: {
        // Here you define the names and the Widgets (Preferably ones with a Scaffold) that are your pages
        '/': (context) => const HomePage(),
        '/second': (context) => const SecondScreen(),
       },
    );
  }
}

Then to navigate to them using named Routes:

() => Navigator.pushReplacementNamed(context, '/second')

If you want more info, there’s a cookbock on the Flutter website that show you how to use it.

Answered By – pedro pimont

Answer Checked By – Marilyn (FlutterFixes Volunteer)