Flutter Navigation Tutorial

flutter-simple-routing-example
flutter-simple-routing-example

In our flutter tutorial series, I’m going to write about a flutter navigation tutorial with an 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

Getting Started

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

flutter create navigate
<span class="hljs-built_in">cd</span> 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


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

Now, our main.dart looks like this


<span class="hljs-keyword">import</span> <span class="hljs-symbol">'package</span>:flutter/material.dart'; 
<span class="hljs-keyword">import</span> <span class="hljs-symbol">'package</span>:navigate/pages/first.dart';

void main() => runApp(<span class="hljs-type">MyApp</span>());

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyApp</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">StatelessWidget</span> </span>{
  <span class="hljs-meta">@override</span>
  <span class="hljs-type">Widget</span> build(<span class="hljs-type">BuildContext</span> context) {
    <span class="hljs-keyword">return</span> <span class="hljs-type">MaterialApp</span>(
      home: <span class="hljs-type">FirstPage</span>(),
    );
  }
}

Flutter Simple Routing Example:

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

Navigator.push(<span class="hljs-built_in">context</span>, MaterialPageRoute(<span class="hljs-keyword">builder: </span>(<span class="hljs-built_in">context</span>)=> PageName()))<span class="hljs-comment">; </span>

Now, we have to implement with onpress

lib/pages/first.dart

<span class="hljs-keyword">import</span> <span class="hljs-symbol">'package</span>:flutter/material.dart'; 
<span class="hljs-keyword">import</span> <span class="hljs-symbol">'package</span>:navigate/pages/second.dart'; 

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

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

<span class="hljs-keyword">import</span> <span class="hljs-symbol">'package</span>:flutter/material.dart'; 
<span class="hljs-keyword">import</span> <span class="hljs-symbol">'package</span>:navigate/pages/third.dart'; 

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

Working with Page 3:

/lib/pages/third.dart

<span class="hljs-keyword">import</span> <span class="hljs-symbol">'package</span>:flutter/material.dart'; 
<span class="hljs-keyword">import</span> <span class="hljs-symbol">'package</span>:navigate/pages/first.dart'; 

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ThirdPage</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">StatelessWidget</span> </span>{
  <span class="hljs-meta">@override</span>
  <span class="hljs-type">Widget</span> build(<span class="hljs-type">BuildContext</span> context) {
    <span class="hljs-comment">// <span class="hljs-doctag">TODO:</span> implement build</span>
    <span class="hljs-keyword">return</span> <span class="hljs-type">Scaffold</span>(
      appBar: <span class="hljs-type">AppBar</span>(title: <span class="hljs-type">Text</span>(<span class="hljs-string">"Third Page"</span>)), 
      body: <span class="hljs-type">Center</span>(
        child: <span class="hljs-type">Column</span>(children: <<span class="hljs-type">Widget</span>>[
          <span class="hljs-type">Text</span>(<span class="hljs-string">"Third Page"</span>), 
          <span class="hljs-type">RaisedButton</span>(child: <span class="hljs-type">Text</span>(<span class="hljs-string">"Goto Page 2"</span>), onPressed: () {
            <span class="hljs-type">Navigator</span>.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-simple-routing
flutter-simple-routing

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.

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">SecondPage</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">StatelessWidget</span> </span>{
  <span class="hljs-type">String</span> _name = ''; 
  <span class="hljs-type">String</span> _message = ''; 

  <span class="hljs-type">SecondPage</span>(name, message){
    <span class="hljs-keyword">this</span>._message = message; 
    <span class="hljs-keyword">this</span>._name = name; 
  }
  <span class="hljs-meta">@override</span>
  <span class="hljs-type">Widget</span> build(<span class="hljs-type">BuildContext</span> context) {
    <span class="hljs-comment">// some code</span>
  }
}

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(
  <span class="hljs-name">child</span>: Text(<span class="hljs-string">"Goto Page 2"</span>), 
  onPressed: () {
    Navigator.push(<span class="hljs-name">context</span>, 
        MaterialPageRoute(<span class="hljs-name">builder</span>: (<span class="hljs-name">context</span>) => SecondPage(<span class="hljs-string">"codesundar.com"</span>, <span class="hljs-string">"How are you"</span>)))<span class="hljs-comment">; </span>
  }
)

Explanation:

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