Flutter navigation using Flutter's Navigator.pushNamed

Flutter navigation using Flutter's Navigator.pushNamed

Hello guys, trying to pen down my first flutter post has been all over my mind and I hope it tuns out to be a good read. This post about learning how to navigate through your flutter app using the Navigator.pushNamed(). The flutter app contains two pages; the HomPage and the AboutPage.

It should be noted navigation through a flutter app is not limited to flutter's Navigator.pushNamed(), the Navigator.push() is also used for same purpose. Navigator.pushNamed() is pretty useful and easier to use when your flutter app has a lot of page to navigate to. Now going straight to the code.

HomePage Code

import 'package:flutter/material.dart';
import 'about_page.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(),
      home: MyHomePage(),
      routes: {
        AboutPage.namedRoute: (context)=>AboutPage()
      },
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Center(child: Text('Home Page')),),
      body: Container(
          child: Center(
              child: ElevatedButton(
        child: Text('Click to next page'),
        onPressed: () {
          Navigator.pushNamed(context, AboutPage.namedRoute);
        },
      ))),
    );
  }
}

homepage.PNG

AboutPage Code

import 'package:flutter/material.dart';

class AboutPage extends StatelessWidget {
  const AboutPage({Key? key}) : super(key: key);
  static const namedRoute = '/about';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          leading: IconButton(
            icon: Icon(Icons.arrow_back_ios),
            onPressed: () {
              Navigator.pop(context);
            },
          ),
          title: Center(child: Text('About Page')),
        ),
        body: Container(
          child: Center(child: Text('The About Page.', style: TextStyle(fontSize: 24),),),
        ));
  }
}

about.PNG

To use the Navigator.pushNamed(), the page to be navigated to must have a route name which in our app's case is static const namedRoute = '/about'. In the HomePage MaterialApp widget, the routes parameter which receives a Map datatype containing the page routes name as its key and the page class as its value. In this case the key value is AboutPage.namedRoute and value is AboutPage().

A button is also needed for the navigation process. In the HomePage, a button is present which when clicked takes you to the AboutPage. This button contains to required arguments, the child argument which in our app is the Text() widget and an onPressed which contains the navigation function. The Navigator.pushNamed() is placed in the onPressed and contains to argument, the context and the route name of the page to be navigated to.

In order to return back from the AboutPage to the HomePage, a button is needed which contains a Navigator.pop(context) in the AboutPage. In our app it is present in the IconButton.

This is the end of the post, I hope it makes sense to some. Big thanks to the Code Clan Nigeria Community www.codeclannigeria.dev that pushed me to writing my first ever post on flutter.