Step By Step Tutorial In Learning Flutter: Lesson 6— Creating New Screens Part 2

3 min readMay 17, 2020

In this lesson we will continue where we left off from Lesson 5— Creating New Screens Let us now finish the screens for the remaining menus on our Pokedex.
Let us create the screen for Grass Pokedex

Open the main.dart if not yet opened
Scroll down to line 138, where our FireScreen code block is, highlight the entire code block as shown below

Then, create a new line, after that, paste the code block
Revise the following as illustrated below

The code will be as follows

//This is our Grass Pokemon Screen
class GrassScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Grass Pokemon"),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Go back!'),
          onPressed: () {
            // Navigate back to the first screen by popping the current route
            // off the stack.
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

Next, go to line 81 where it says Text(‘Grass’)

We will add the Navigator.pop and Navigator.push
Revise the code to look like below

The code will be

ListTile(
  title: Text('Grass'),
  onTap: () {
    // Close the drawer
    Navigator.pop(context);
    Navigator.pushNamed(context, '/grass');
  },
),