Flutter Tutorial – Navigation and Passing params between Screens (Android and iOS)

Hello devs…

This is a simple tutorial in which we will see how to navigate between two screens in flutter and pass params from one screen to another screen.

Below is the video of the sample app we are going to make…

You can watch the complete video tutorial below…

Watch Tutorial

You can see the video tutorial here…

Screen 1

We have two screens, the first screen is named “screen1.dart” which would look like this.

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

class ScreenOne extends StatefulWidget {
  ScreenOne() : super();

  final String title = "Screen One";

  @override
  _ScreenOneState createState() => _ScreenOneState();
}

class _ScreenOneState extends State<ScreenOne> {
  void goToNextPage(BuildContext context) {
    Navigator.push(
        context,
        new MaterialPageRoute(
            builder: (BuildContext context) => new ScreenTwo("Screen Two")));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              "Screen One",
            ),
            RaisedButton(
              child: Text("Go to Next Page"),
              onPressed: () {
                goToNextPage(context);
              },
            )
          ],
        ),
      ),
    );
  }
}

We have one button in this screen. The press of the button will navigate you to next screen.

To Navigate, we use the inbuilt navigator.
Below is the code that does the trick.

  Navigator.push(
        context,
        new MaterialPageRoute(
            builder: (BuildContext context) => new ScreenTwo("Screen Two")));

Screen 2

Now the next screen, that has a button that closes the screen and it will accept a parameter named”title” in the form of a String.

Our screen2.dart will look like this.

import 'package:flutter/material.dart';

class ScreenTwo extends StatefulWidget {
  ScreenTwo(this.title) : super();

  final String title;

  @override
  _ScreenTwoState createState() => _ScreenTwoState();
}

class _ScreenTwoState extends State<ScreenTwo> {
  void goBack(BuildContext context) {
    Navigator.pop(context);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              widget.title,
            ),
            RaisedButton(
              child: Text("Go Back"),
              onPressed: () {
                goBack(context);
              },
            )
          ],
        ),
      ),
    );
  }
}

It’s that simple.