flutter app drawer navigation to new page

Question

looking for a better way to do it on how can I navigate from app drawer to next page, I have made a stateful widget in other file and imported in main.dart, instead of

Navigate.pop(context);

what do I use?

i have tried

Navigator.of(context).push(
    MaterialPageRoute<Null>(builder: (BuildContext context) {
        return new HomePage();

it loads page over the previous page and makes things laggy.

below is the code.

  return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: Center(child: Text('some text')),
      drawer: Drawer(
        // Add a ListView to the drawer. This ensures the user can scroll
        // through the options in the drawer if there isn't enough vertical
        // space to fit everything.
        child: ListView(
          // Important: Remove any padding from the ListView.
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              child: Text('Drawer Header'),
              decoration: BoxDecoration(
                color: Colors.blue,
                image: DecorationImage(image: AssetImage("assets/gold.jpg"),fit: BoxFit.cover)
              ),
            ),
            ListTile(
              title: Text('Item 1'),
              onTap: () {
                // Update the state of the app
                // ...
                // Then close the drawer
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text('Item 2'),
              onTap: () {
                // Update the state of the app
                // ...
                // Then close the drawer // how do i close the drawer after click?
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );

I expect when I click on app drawer link it takes me to a new page and close app drawer itself

Answer 1

If you are looking for a way to edit your current pages e.g. tabs and then switching between the views without actually to start a new page route.

What I normally do, is:

enum Section
{
    GUEST,
    HOME,
    PAGE_1,
    PAGE_2
}

Your main build function:

@override
Widget build(BuildContext context)
{
    Widget body;

    /// You can easily control the section for example inside the initState where you check
    /// if the user logged in, or other related logic
    switch (section)
    {
        /// This is for example a login page since the user not logged in
        case Section.GUEST:
            break;

        /// Display the home section, simply by
        case Section.HOME:
            body = HomeSection();
            break;

        case Section.PAGE_1:
            body = Page1Section();
            break;

        case Section.PAGE_2:
            body = Page2Section();
            break;
    }

    return Scaffold(
        body: Container(
            child: body,
        ),
        /// Display the drawer for logged in users only
        drawer: section != Section.GUEST ? Drawer(
            // Your drawer
        ) : null,
    );
}

This is will even save the state across those sections, and you move around fast between them.

Regrading the drawer, you are doing it right. You just do that pop with the navigator on the context. Just make sure you have the right context. (and not an propagated one)

And of course, changing section is simple as:

setState(() => section = Section.HOME);