Navigating between pages in flutter

How to navigate between one page to another in flutter ?

Aman Jain,

Flutter provides its inbuilt navigator to navigate between pages. In our application it must have multiple screens and we wanted to navigate on all screens so in flutter we use Navigator class to navigate between pages.

In android we use Activity and in iOS we use ViewController to navigate between pages.

In this article i will show you to navigate to another page and also passing parameters to pages. I will take an example of two screens where we will navigate and than come back to the same page.

Step 1 : Create flutter project

Very first step is to create the fluter application using command line tool or in Android studio.

flutter create example_app

This will create a new project with name my_app then go in to the folder.

Step 2 : Create two widgets for navigation

Now, Create two widgets to navigate between the pages. Let’s create one widget name as FirstPageWidget and Second as SecondPageWidget

File : lib/FirstPageWidget.dart

import 'package:flutter/material.dart';
class FirstPageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
        appBar: AppBar(
          // The title text which will be shown on the action bar
          title: const Text("Readerstacks.com Demo"),
        ),
        body: Center(
        child: Column(children: [
      Text(
        'Hello, ReaderStack  World! My First page',
        style: Theme.of(context).textTheme.headline4,
      ),
      ElevatedButton(
          child: const Text("Navigate to Second"),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const SecondPageWidget('this is params')),
            );
          })
      ]))
    );
  }
}

Here we used Navigator.push to navigate to another page which is SecondPageWidget and also used Scaffold for material mobile design.

lib/SecondPageWidget.dart

import 'package:flutter/material.dart';
class SecondPageWidget extends StatelessWidget {
  
  final String title;
  
  const SecondPageWidget(this.title,{Key? key}) : super(key: key);

  
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
        appBar: AppBar(
          // The title text which will be shown on the action bar
          title: Text(title),
        ),
        body: Center(
        child: Column(children: [
      Text(
        'Hello, ReaderStack  World! My Second page',
        style: Theme.of(context).textTheme.headline4,
      ),
      ElevatedButton(
           child: const Text("Navigate Back"),
          onPressed: () {
            Navigator.pop(context);
          })
      ]))
    );
  }
}

We used here Navigator.pop to go back to the last page.

Step 3 : Add Page to main file

Add you new pages to main.dart and start navigating.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Application name
      title: 'Flutter Hello World',
      // Application theme data, you can set the colors for the application as
      // you want
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // A widget which will be started on application startup
      home:  FirstPageWidget(),
    );
  }
}

Step 4: Run the project

Simply run the project using command line or in android studio to check the implementation.

flutter run lib/main.dart

How to pass the data between pages using navigator.push?

In the above example we navigate page to another page but not passed any data to other page so to pass the data between one or two page we need to pass extra param to Navigator as below

Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondPageWidget("this is param")),
            );

Here we passed a parameter to SecondPageWidget(“this is param”) and in SecondPageWidget change as below

  final String title;
  const SecondPageWidget(this.title,{Key? key}) : super(key: key);

Run the implementation in dartpad.

Dart Flutter

Related Posts