How to properly navigate with Drawer class to multiple pages

Question

I'm a beginner trying to practice coding with Flutter so it would be helpful if the explanation or suggestion is easy to understand. :) Thanks in advance!

[Goal]

I've created a two folders and one of them is for parts that can be used in multiple places without having to create them every time. And the other one includes files with different pages (I like to keep them separate).

[Question]

I'm currently trying to navigate by using the side drawer and want to go to other pages, however it's not working and I'm getting blanks in black :( Please help...

In this case, should I use the "routes:" argument or should I use the MaterialPageRoute() or is there something else that can be suggested?

I apologize for posting the entire code, but I thought it would be best to understand the whole context. If there's anything that seems odd or have a better idea. Please do let me know!

[Code of Drawer]

class AppDrawer extends StatefulWidget {
  @override
  _AppDrawerState createState() => _AppDrawerState();
}

class _AppDrawerState extends State<AppDrawer> {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: <Widget>[
          UserAccountsDrawerHeader(
              accountName: Text('John T.'),
              accountEmail: Text('*********@gmail.com'),
              currentAccountPicture: GestureDetector(
                  child: CircleAvatar(
                      backgroundColor: Colors.grey,
                      child: Icon(Icons.person, color: Colors.white))),
              decoration: BoxDecoration(color: Colors.red)),
          ListTile(
            leading: Icon(Icons.home, color: Colors.redAccent),
            title: Text('Home'),
            trailing: null,
            onTap: () {
              Navigator.of(context).pop();
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (BuildContext context) {
                    Home();
                  },
                ),
              );
            },
          ),
          ListTile(
            leading: Icon(Icons.person, color: Colors.redAccent),
            title: Text('My Acount'),
            trailing: null,
            onTap: () {
              Navigator.of(context).pop();
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (BuildContext context) {
                    MyAccount();
                  },
                ),
              );
            },
          ),
          ListTile(
            leading: Icon(Icons.fitness_center, color: Colors.redAccent),
            title: Text('My Workout'),
            trailing: null,
            onTap: () {},
          ),
          ListTile(
            leading: Icon(Icons.cancel, color: Colors.redAccent),
            title: Text('My Nutrition'),
            trailing: null,
            onTap: () {},
          ),
          Divider(color: Colors.red, indent: 20.0),
          ListTile(
            leading: Icon(Icons.settings, color: Colors.blue),
            title: Text('Settings'),
            trailing: null,
            onTap: () {},
          ),
          ListTile(
            leading: Icon(Icons.help, color: Colors.green),
            title: Text('About'),
            trailing: null,
            onTap: () {},
          ),
        ],
      ),
    );
  }
}

[Code of Home Page]

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 5.0,
        title: Text('Home'),
        backgroundColor: Colors.red,
        centerTitle: true,
      ),
      endDrawer: AppDrawer(),
      body: Container(
        color: Colors.white,
        child: Center(
          child: ListView(
            children: <Widget>[],
          ),
        ),
      ),
    );
  }
}

[My Account Page]

class MyAccount extends StatefulWidget {
  final String value;

  MyAccount({Key key, this.value}) : super (key: key);

  @override
  _MyAccountState createState() => _MyAccountState();
}

class _MyAccountState extends State<MyAccount> {
  final TextEditingController _ageFieldController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Account'),
        centerTitle: true,
        backgroundColor: Colors.blue,
      ),
      endDrawer: AppDrawer(),
      body: Container(
        color: Colors.white,
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                child: Column(
                  children: <Widget>[
                    TextField(
                      controller: _ageFieldController,
                      decoration: InputDecoration(
                        hintText: 'Example: 27',
                      ),
                      autocorrect: true,
                      keyboardType: TextInputType.number,
                    ),
                    Text('${widget.value}')
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

[Code of Main.dart]

void main(List<String> args) {
  runApp(Bmi());
}

class Bmi extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'BMI',
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
      ),
      home: Home(),
    );
  }
}

Answer 1

The Material Design guidelines suggest a Drawer for navigation between sites of equal importance, so Navigator.push() should not be used, because the animation it does looks like it's a linear navigation(like going to the next page, not one of equal importance.)

Here's a link regarding this topic: material.io site for Navigation Drawer Component

I always update my body according to the currently selected item in the drawer, similar as you would do it with a BottomNavigationBar.

An implementation of that would look similar to this:

return Scaffold(
  drawer: Drawer(),
  body: Stack(
    children: <Widget>[
      Offstage(
        offstage: index != 0,
        child: _buildAccountPage(),
      ),
      Offstage(
        offstage: index != 0,
        child: _buildHomePage(),
      ),
    ],
  ),
);

Answer 2

You need to return New Page to the Builder Function of Navigator.

Correct Code:

 ListTile(
        leading: Icon(Icons.person, color: Colors.redAccent),
        title: Text('My Acount'),
        onTap: () {
          Navigator.push(context,
              MaterialPageRoute(builder: (context) => MyAccount()));
        },
      ),