Unlock the Power of Multi-Page Apps in Flutter

What is a Page in Flutter?

In Flutter, a page refers to a single screen visible at a particular point in time. This screen can comprise numerous widgets organized together to create the desired UI. These pages or screens are known as Routes, and we use the Navigator widget to navigate between them.

Navigating Pages with Ease

The Navigator widget, bundled with MaterialApp, manages a stack of Route objects. Think of a route object as a representation of a single page or screen. The route at the top of this stack is visible to the user, and when the user presses the back button, the uppermost route pops out, revealing the route below it, much like a stack of cards.

Let’s Get Started!

To create a multi-page app, we’ll begin by configuring the top-level Navigator along with other basic settings for our app using the MaterialApp widget. We’ll create two pages, FirstPage and SecondPage, to demonstrate navigation.

FirstPage: The Beginning

Our FirstPage widget consists of a Scaffold with an AppBar displaying the page title and a body displaying a button to navigate to the SecondPage.

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Navigate to Second Page'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondPage()),
            );
          },
        ),
      ),
    );
  }
}

Navigate to SecondPage

To navigate to SecondPage, we’ll use the Navigator.push() method, which adds a Route to the stack of routes managed by the Navigator.

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondPage()),
);

SecondPage

We’ll create the SecondPage, almost identical to the FirstPage, with the text changed to “Go Back.”

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go Back'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

Going Back to FirstPage

To navigate back to the FirstPage, we’ll use the Navigator.pop() method, which removes the current Route from the Navigator’s stack of routes.

Navigator.pop(context);

Returning Data from SecondPage to FirstPage

Sometimes, you may want to return data from the route being popped from the Navigator’s stack. We’ll update the onPressed() callback in SecondPage to return a message saying “Returned from SecondPage” when navigating back to FirstPage.

onPressed: () {
  Navigator.pop(context, 'Returned from SecondPage');
}

The Result of Our Hard Work

Run the app and press the “Go Back” button on the SecondPage. Check the console to see the message returned.

Next Steps

In this article, you’ve learned how to use the Navigator widget to create multi-page apps in Flutter and return data when a route pops out. This is just the beginning of your Flutter journey. I recommend exploring the official docs to learn more about navigation and other essential concepts. Happy Fluttering!