Flutter Navigation Tutorial with example - Part 1

SUNDARAVEL SUBSCRIBE

I teach how to build apps using ionic and flutter

In our flutter tutorial series, I'm going to write about flutter navigation tutorial with example.

Navigation (Routing) is used for moving between one page to another.we can also pass data between pages. In flutter, we have multiple ways to navigate between pages such as,

Simple Routing
Named Routes

flutter-simple-routing

Getting Started

Let's create a new project to learn about flutter routing

flutter create navigate
cd navigate

Now, we need to create pages for navigation. I'm going to create three pages/ files called first.dart , second.dart , and third.dart

lib/pages/first.dart

import 'package:flutter/material.dart'; 
class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("First Page")),
      body: Center(
        child: Column(children: [
          Text("First Page"),
          RaisedButton(child: Text("Goto Page 2"), onPressed: () {
              // navigation code here
          })
        ]),
      ),
    );
  }
}

Now, our main.dart looks like this

import 'package:flutter/material.dart'; 
import 'package:navigate/pages/first.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstPage(),
    );
  }
}

Flutter Simple Routing Example:

flutter simple routing doesn't need any type of configuration. We simply need to use the following lines

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

Now, we have to implement with onpress

lib/pages/first.dart

import 'package:flutter/material.dart'; 
import 'package:navigate/pages/second.dart'; 

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text("First Page")), 
      body: Center(
        child: Column(children: <Widget>[
          Text("First Page"), 
          RaisedButton(child: Text("Goto Page 2"), onPressed: () {
            Navigator.push(context, MaterialPageRoute(builder: (context)=> SecondPage())); 
          })
        ]), 
      ), 
    ); 
  }
}

Explanation:

When user press RaisedButton, we're navigating to page 2

Working with Page 2

Lets' create another page called second.dart as like as first.dart

lib/pages/second.dart

import 'package:flutter/material.dart'; 
import 'package:navigate/pages/third.dart'; 

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text("Second Page")), 
      body: Center(
        child: Column(children: <Widget>[
          Text("Second Page"), 
          RaisedButton(child: Text("Goto Page 3"), onPressed: () {
            Navigator.push(context, MaterialPageRoute(builder: (context)=> ThirdPage())); 
          })
        ]), 
      ), 
    ); 
  }
}

Working with Page 3:

/lib/pages/third.dart

import 'package:flutter/material.dart'; 
import 'package:navigate/pages/first.dart'; 

class ThirdPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text("Third Page")), 
      body: Center(
        child: Column(children: <Widget>[
          Text("Third Page"), 
          RaisedButton(child: Text("Goto Page 2"), onPressed: () {
            Navigator.pop(context); 
          })
        ]), 
      ), 
    ); 
  }
}

Explanation:

In our third.dart, we have created a RaisedButton, when the user pressed that, we're using Navigator.pop() for moving backward

flutter-navigation-tutorial

Passing data between pages

we learned how to move between page 1 to page 2 but it doesn't much help without data passing. Let's learn that.

Now, we're going to pass data from first.dart to second.dart.to do that, first we need to work with second.dart.

class SecondPage extends StatelessWidget {
  String _name = ''; 
  String _message = ''; 

  SecondPage(name, message){
    this._message = message; 
    this._name = name; 
  }
  @override
  Widget build(BuildContext context) {
    // some code
  }
}

Explanation:

We Created variables for _name and _message & also created a constructor to assign received data to _name and _message

Inside our first.dart Raised button, we can pass this data

RaisedButton(
  child: Text("Goto Page 2"), 
  onPressed: () {
    Navigator.push(context, 
        MaterialPageRoute(builder: (context) => SecondPage("codesundar.com", "How are you"))); 
  }
)

Explanation:

when the user pressed the button, we're passing data to secondpage

flutter-passing-data-between-pages

Categories: Flutter Flutter Tutorial

Tags:Flutter Flutter Tutorial