Posted in Dart Flutter

Flutter – How to pass Data between Page Screens.

Flutter – How to pass Data between Page Screens. Posted on June 10, 2020Leave a comment
I'm Hari Prasad Chaudhary from Nepal, developer of the finest educational website/app "MeroSpark" and the finest eCommerce system "PasalaY". Here I share the code snippet which I learn during development.

When building Flutter apps, you often need to pass data to 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.

data pass screen

See this also: Flutter – How to return data on back button press from another screen

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 weel like var1: "Kathmandu";
                     //if {} not used, you have 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
          )
       ),
    );
  }
}

In this way, you can transfer date between screen.

I'm Hari Prasad Chaudhary from Nepal, developer of the finest educational website/app "MeroSpark" and the finest eCommerce system "PasalaY". Here I share the code snippet which I learn during development.

Leave a Reply

Your email address will not be published. Required fields are marked *