How to pass Data between Page Screens of Flutter Apps

When building Flutter apps, you often need to pass data to the next page screen. In this example, I’m going to show how to pass data or variable value to another screen route. See the example below, try to read explanation comments in the code.

Our File Structure:

lib/
—– main.dart
—– stateless_page.dart
—– statefull_page.dart

main.dart code:

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

//import files for page class
import 'statefull_page.dart';
import 'stateless_page.dart';

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

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

class Home extends StatelessWidget{

  String countryname = "Nepal";
  //variable to pass in another page, you can have any other datas as well

  @override
  Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title:Text("Transfer Data to Another Page"),
         backgroundColor:Colors.redAccent
       ),
       body:Container( 
         alignment: Alignment.center, //align to center
         height:250, //height to 250
         child:Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: <Widget>[

              Container( 
                child: RaisedButton(
                  onPressed: (){ //onpress action for button
                     Navigator.push(context, MaterialPageRoute(
                       builder: (context){
                          return StateLessPage(
                            var1:"Kathmandu", var2: countryname, int1:12
                          );
                       }
                     )); //Navigate to another page (Stateless Page) using Navigator.push()
                     //when you use {} in constructor, then have to mention
                     //parameter name as well like var1: "Kathmandu";
                     //if {} not used, you have to use (Kathmandu, countryname, 12); like this

                  },
                  child:Text("Go to Stateless Page"),
                  color: Colors.redAccent,
                  colorBrightness: Brightness.dark, //background color is darker, so set darker brightness
                )
              ),

              Container( 
                child: RaisedButton(
                  onPressed: (){
                     Navigator.push(context, MaterialPageRoute(
                       builder: (context){
                          return StatefulPage(
                            var1:"Kathmandu", var2: countryname, int1:12
                            );
                       }
                     )); //Navigate to another page (Stateful page)
                  },
                  child:Text("Go to Statefull Page"),
                  color: Colors.orangeAccent,
                  colorBrightness: Brightness.dark, //background color is darker, so set darker brightness
                )
              )
         ],)
       )
     );
  }
}

stateless_page.dart code:

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

class StateLessPage extends StatelessWidget{
  
  String var1, var2, var3; //variables for constructor
  int int1;
  
  StateLessPage({this.var1, this.var2, this.int1, var3 = "hello"});
  //Constructor for this class, if you use {} then you have mention
  //parameter when you call this class like StateLessPage(var1:"hello", var2:"abc", int1:12);
  //var3 is optional parameter, by default its value is "Hello";
  //if you don't use {} braces then call class like StateLessPage("hello", "abc", 12);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
       appBar: AppBar(title:Text("Stateless Page"),
       backgroundColor: Colors.redAccent,),
       body: Container( 
          height:300,
          child: Center( 
             child: Text("Var1 = $var1 , Var2 = $var2 , int1 = $int1")
             //you can use variables directly defined in class.
          )
       ),
    );
  }
}

statefull_page.dart code:

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

class StatefulPage extends StatefulWidget{

  String var1, var2, var3;
  int int1;

  StatefulPage({this.var1, this.var2, this.int1, var3 = "hello"});
  //Constructor for this class, if you use {} then you have mention
  //parameter when you call this class like StateLessPage(var1:"hello", var2:"abc", int1:12);
  //var3 is optional parameter, by default its value is "Hello";
  //if you don't use {} braces then call class like StateLessPage("hello", "abc", 12);

  @override
  State<StatefulWidget> createState() {
    return StatefulPagestate();
  }
}

class StatefulPagestate extends State<StatefulPage>{
  @override
  Widget build(BuildContext context) {

    String var1 = widget.var1;
    //use widget.var1 to get values from main class
    
    return Scaffold(
       appBar: AppBar(title:Text("Statefull Page")),
       body: Container( 
         height:300,
          child: Center( 
             child: Text("Var1 = $var1 , Var2 = " + widget.var2),
             //set the values in Text() widget
          )
       ),
    );
  }
}