Blog

Learn how to create a flutter app with multipage pages or screens.

Example 1: Simple Multipage App within single File

In the real word, your app will contain multiple pages. Maybe a master page where you list products, a detail page for the products, a checkout page, an about us page etc. Thus you need to learn how to work with multiple screens in flutter. This example will teach you that using only a single main.dart file.

Step 1: Create Project

Create an empty flutter project.

Step 2: Dependencies

We do not need any external plugins for this project.

Step 3: Write Code

Create a main.dart file and import the material.dart package:

import 'package:flutter/material.dart';

The entry point of a flutter app is the main function. In it we will run our app:

void main() {
  runApp(MaterialApp(
    home: MyApp(),
    theme: themeData,
  ));
}

Instantiate a custom ThemeData and set the canvas and accent colors:

final ThemeData themeData = ThemeData(
  canvasColor: Colors.lightGreenAccent,
  accentColor: Colors.redAccent,
);

Create a MyApp class by extending the StatelessWidget:

class MyApp extends StatelessWidget {

Override the build method, and return a Scaffold. Inside the scaffold we will build the body of the app. We place a FlatButton at the center. When that button is clicked we will invoke the onPressed callback function and invoke the Navigator.push() which we use to navigate to another page in flutter:

  @override
  Widget build(BuildContext ctx) {
    return Scaffold(
      body: Center(
        child: FlatButton(
          onPressed: (){
            Navigator.push(ctx, PageTwo());
          },
          child: Text("Go to Page Two"),
        ),
      ),
    );
  }
}

You then create a page 2 of the app. This page will also have a button at the center. When that button is pressed we will open the Page 3:

class PageTwo extends MaterialPageRoute<Null> {
  PageTwo() : super(builder: (BuildContext ctx) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(ctx).canvasColor,
        elevation: 1.0,
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.push(
              ctx,
              PageThree()
            );
          },
          child: Text("Go to Page Three"),
        ),
      ),
    );
  });
}

Here is the Page3of the application. It will have an IconButton that when pressed we close the current page and navigate to the previous one:

class PageThree extends MaterialPageRoute<Null> {
  PageThree() : super(builder: (BuildContext ctx) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Last Page!"),
        backgroundColor: Theme.of(ctx).accentColor,
        elevation: 2.0,
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.close),
            onPressed: (){
              Navigator.pop(ctx);
            },
          )
        ],
      ),
      body: Center(
        child: MaterialButton(
          onPressed: (){
            Navigator.popUntil(ctx, ModalRoute.withName(Navigator.defaultRouteName));
          },
          child: Text("Go Home!"),
        ),
      ),
    );
  });
Here is the full code:
**main.dart**
```dart
import 'package:flutter/material.dart';
void main() {
  runApp(MaterialApp(
    home: MyApp(),
    theme: themeData,
  ));
}
final ThemeData themeData = ThemeData(
  canvasColor: Colors.lightGreenAccent,
  accentColor: Colors.redAccent,
);
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext ctx) {
    return Scaffold(
      body: Center(
        child: FlatButton(
          onPressed: (){
            Navigator.push(ctx, PageTwo());
          },
          child: Text("Go to Page Two"),
        ),
      ),
    );
  }
}
class PageTwo extends MaterialPageRoute {
  PageTwo() : super(builder: (BuildContext ctx) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(ctx).canvasColor,
        elevation: 1.0,
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.push(
              ctx,
              PageThree()
            );
          },
          child: Text("Go to Page Three"),
        ),
      ),
    );
  });
}
class PageThree extends MaterialPageRoute {
  PageThree() : super(builder: (BuildContext ctx) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Last Page!"),
        backgroundColor: Theme.of(ctx).accentColor,
        elevation: 2.0,
        actions: [
          IconButton(
            icon: Icon(Icons.close),
            onPressed: (){
              Navigator.pop(ctx);
            },
          )
        ],
      ),
      body: Center(
        child: MaterialButton(
          onPressed: (){
            Navigator.popUntil(ctx, ModalRoute.withName(Navigator.defaultRouteName));
          },
          child: Text("Go Home!"),
        ),
      ),
    );
  });
}

Run

Copy the code into your project or download the code in the reference links below.

Reference

Find the reference links below:

Number	Link
1.	Download code
2.	Follow code author