Skip to content
Readerstacks logo Readerstacks
  • Home
  • Softwares
  • Angular
  • Php
  • Laravel
  • Flutter
Readerstacks logo
Readerstacks
Navigating between pages in flutter

How to navigate between one page to another in flutter ?

Aman Jain, January 4, 2022January 15, 2022

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.

Share this:

  • Facebook
  • X

Related

Dart Flutter

Post navigation

Previous post
Next post

Related Posts

Dart How to Remove Debug Text Banner in Flutter Application

How to Remove Debug Text Banner in Flutter Application?

September 11, 2022September 12, 2022

In this tutorial we will learn to remove debug text banner in flutter application. When we first time setup the project and install it in device it shows debug text banner at right top side of application so if we want to remove it we simply need to add debugShowCheckedModeBanner…

Share this:

  • Facebook
  • X
Read More
Dart Create rounded corner using border radius in flutter

Create rounded corner using border radius in flutter ?

September 15, 2022March 28, 2023

Rounded corner gives a decent look to any widget and rounded corner can be create using the border radius property of container. we can add border radius or shape to any container, image, button, text, input and etc. so in this article we will learn to create rounded corner using…

Share this:

  • Facebook
  • X
Read More
Dart How to Subscribe for Flutter NavigatorRouter Events

How to Subscribe for Flutter Navigator/Router Events ?

April 29, 2022September 11, 2022

Navigator is used to navigate between the pages and sometimes we want to subscribe for flutter Navigator/Router Events to update the widget state or to perform the specific task during the push and pop of page. Flutter provider RouteObserver mixin to subscribe the events of navigator by which we can…

Share this:

  • Facebook
  • X
Read More

Leave a ReplyCancel reply

Aman Jain
Aman Jain

With years of hands-on experience in the realm of web and mobile development, they have honed their skills in various technologies, including Laravel, PHP CodeIgniter, mobile app development, web app development, Flutter, React, JavaScript, Angular, Devops and so much more. Their proficiency extends to building robust REST APIs, AWS Code scaling, and optimization, ensuring that your applications run seamlessly on the cloud.

Categories

  • Angular
  • CSS
  • Dart
  • Devops
  • Flutter
  • HTML
  • Javascript
  • jQuery
  • Laravel
  • Laravel 10
  • Laravel 9
  • Mysql
  • Php
  • Softwares
  • Ubuntu
  • Uncategorized

Archives

  • December 2023
  • November 2023
  • October 2023
  • July 2023
  • March 2023
  • November 2022
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021

Recent Posts

  • How to Call Controller Method from Another Controller in Laravel ?
  • How to Get Domain Name in Laravel ?
  • How to Append Query String to Route in Laravel ?
  • How to Append URL Query Params to Pagination Laravel ?
  • How to Get Today Records in Laravel ?
©2023 Readerstacks | Design and Developed by Readerstacks
Go to mobile version