Navigate to a new screen and back in Flutter

Looking to get into development? As a full-stack developer I guide you on this journey and give you bite sized tips every single day 👊

Setting up named routes in Flutter

Let's start by setting up the main structure.

Flutter always starts with the main function, so let's set that up first.

void main() async { runApp( MaterialApp(debugShowCheckedModeBanner: false, initialRoute: '/', routes: { '/': (context) => RouteOne(), '/detail': (context) => RouteTwo(), }), ); }

In this example, we define named routes, which is very similar to other hybrid app frameworks. With this, we get the option to define the initial route, which in our case is the named route: /.

Then we add a routes object, including all our routes. We define two routes:

/ which will render a widget called: RouteOne

/detail, which renders a widget called: RouterTwo

Now we need to create these routes (widgets).

class RouteOne extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Screen one ☝️'), ), body: Center( child: ElevatedButton( // Within the `FirstScreen` widget onPressed: () { // Navigate to the second screen using a named route. Navigator.pushNamed(context, '/detail'); }, child: Text('Open detail'), ), ), ); } }

Here we see the widget for route one. On this screen is a button that shows the text 'Open detail'. Once we click this button, we call the Navigator class and push a named route called /detail.

As you can see, this Navigator class makes this work and keeps track of all the logic behind it.

We make a similar-looking page for the second screen, but with a button that states 'Go back'.

class RouteTwo extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Screen two ✌️'), ), body: Center( child: ElevatedButton( // Within the `FirstScreen` widget onPressed: () { // Navigate to the second screen using a named route. Navigator.pop(context); }, child: Text('Go back'), ), ), ); } }

And here, we use the navigator again, but we'll call the pop function, which will remove the last pushed route from the stack.

Resulting in an application that can navigate between two routes.

You can also find the complete code on this GitHub link.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Navigate to a new screen and back in Flutter

Comments

More from this blog

I wrote 1000 articles, what’s next?

Vendure community and more

Deploying Vendure

Vendure - Overwriting email templates

Customizing vendure

Setting up named routes in Flutter

Thank you for reading, and let's connect!

Command Palette

Comments

More from this blog

Setting up named routes in Flutter

Thank you for reading, and let's connect!