Passing data between screens in Flutter

Question

As I'm learning Flutter I've come to navigation. I want to pass data between screens similarly to passing data between Activities in Android and passing data between View Controllers in iOS. How do I do it in Flutter?

Related questions:

• The best way to passing data between widgets in Flutter
• Flutter pass data between widgets?
• Flutter/ How to pass and get data between Statefulwidget

Answer 1

This answer will cover both passing data forward and passing data back. Unlike Android Activities and iOS ViewControllers, different screens in Flutter are just widgets. Navigating between them involves creating something called a route and using the Navigator to push and pop the routes on and off the stack.

Passing data forward to the next screen

To send data to the next screen you do the following things:

1. Make the SecondScreen constructor take a parameter for the type of data that you want to send to it. In this particular example, the data is defined to be a String value and is set here with this.text.

   class SecondScreen extends StatelessWidget {
     final String text;
     SecondScreen({Key key, @required this.text}) : super(key: key);
   
     ...
   

2. Then use the Navigator in the FirstScreen widget to push a route to the SecondScreen widget. You put the data that you want to send as a parameter in its constructor.

   Navigator.push(
       context,
       MaterialPageRoute(
         builder: (context) => SecondScreen(text: 'Hello',),
       ));
   

The full code for main.dart is here:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Flutter',
    home: FirstScreen(),
  ));
}

class FirstScreen extends StatefulWidget {
  @override
  _FirstScreenState createState() {
    return _FirstScreenState();
  }
}

class _FirstScreenState extends State<FirstScreen> {

  // this allows us to access the TextField text
  TextEditingController textFieldController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First screen')),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [

          Padding(
            padding: const EdgeInsets.all(32.0),
            child: TextField(
              controller: textFieldController,
              style: TextStyle(
                fontSize: 24,
                color: Colors.black,
              ),
            ),
          ),

          RaisedButton(
            child: Text(
              'Go to second screen',
              style: TextStyle(fontSize: 24),
            ),
            onPressed: () {
              _sendDataToSecondScreen(context);
            },
          )

        ],
      ),
    );
  }

  // get the text in the TextField and start the Second Screen
  void _sendDataToSecondScreen(BuildContext context) {
    String textToSend = textFieldController.text;
    Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => SecondScreen(text: textToSend,),
        ));
  }
}

class SecondScreen extends StatelessWidget {
  final String text;

  // receive data from the FirstScreen as a parameter
  SecondScreen({Key key, @required this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second screen')),
      body: Center(
        child: Text(
          text,
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

Passing data back to the previous screen

When passing data back you need to do the following things:

1. In the FirstScreen, use the Navigator to push (start) the SecondScreen in an async method and wait for the result that it will return when it finishes.

   final result = await Navigator.push(
       context,
       MaterialPageRoute(
         builder: (context) => SecondScreen(),
       ));
   

2. In the SecondScreen, include the data that you want to pass back as a parameter when you pop the Navigator.

   Navigator.pop(context, 'Hello');
   

3. Then in the FirstScreen the await will finish and you can use the result.

   setState(() {
     text = result;
   });
   

Here is the complete code for main.dart for your reference.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Flutter',
    home: FirstScreen(),
  ));
}

class FirstScreen extends StatefulWidget {
  @override
  _FirstScreenState createState() {
    return _FirstScreenState();
  }
}

class _FirstScreenState extends State<FirstScreen> {

  String text = 'Text';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First screen')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [

            Padding(
              padding: const EdgeInsets.all(32.0),
              child: Text(
                text,
                style: TextStyle(fontSize: 24),
              ),
            ),

            RaisedButton(
              child: Text(
                'Go to second screen',
                style: TextStyle(fontSize: 24),
              ),
              onPressed: () {
                _awaitReturnValueFromSecondScreen(context);
              },
            )

          ],
        ),
      ),
    );
  }

  void _awaitReturnValueFromSecondScreen(BuildContext context) async {

    // start the SecondScreen and wait for it to finish with a result
    final result = await Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => SecondScreen(),
        ));

    // after the SecondScreen result comes back update the Text widget with it
    setState(() {
      text = result;
    });
  }
}

class SecondScreen extends StatefulWidget {
  @override
  _SecondScreenState createState() {
    return _SecondScreenState();
  }
}

class _SecondScreenState extends State<SecondScreen> {
  // this allows us to access the TextField text
  TextEditingController textFieldController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second screen')),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [

          Padding(
            padding: const EdgeInsets.all(32.0),
            child: TextField(
              controller: textFieldController,
              style: TextStyle(
                fontSize: 24,
                color: Colors.black,
              ),
            ),
          ),

          RaisedButton(
            child: Text(
              'Send text back',
              style: TextStyle(fontSize: 24),
            ),
            onPressed: () {
              _sendDataBack(context);
            },
          )

        ],
      ),
    );
  }

  // get the text in the TextField and send it back to the FirstScreen
  void _sendDataBack(BuildContext context) {
    String textToSendBack = textFieldController.text;
    Navigator.pop(context, textToSendBack);
  }
}

Answer 2

This solution is very easy by passing variables in constructor:

first page:

Navigator.of(context).push(MaterialPageRoute(builder:(context)=>SecondPage('something')));

second page:

class SecondPage extends StatefulWidget {
  String something;
  SecondPage(this.something);
  @override
  State<StatefulWidget> createState() {
    return SecondPageState(this.something);
  }
}
class SecondPageState extends State<SecondPage> {
  String something;
  SecondPageState(this.something);
  @override
  Widget build(BuildContext context) {
   return Scaffold(
    appBar: AppBar(
    //now you have passing variable
    title: Text(something),
   ),
   ...
  }

Answer 3

Get Perfect Solution :

1. From 1st Screen navigate to others as:

   Navigator.pushNamed(context, "second",arguments: {"name" : 
     "Bijendra", "rollNo": 65210});
   },
   

2. On Second Screen in build method get as :

   @override
   Widget build(BuildContext context) {
       final  Map<String, Object>rcvdData = ModalRoute.of(context).settings.arguments;
       print("rcvd fdata ${rcvdData['name']}");
       print("rcvd fdata ${rcvdData}");
   
       return Scaffold(appBar: AppBar(title: Text("Second")),
         body: Container(child: Column(children: <Widget>[
         Text("Second"),
       ],),),);
   
   }
   

Answer 4

Easiest way

FirstPage.dart

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

//usernameController is String value,If you want to pass multiple values add all

SecondPage.dart

class PasswordRoute extends StatefulWidget {
  final String usernameController;//if you have multiple values add here
PasswordRoute(this.usernameController, {Key key}): super(key: key);//add also..example this.abc,this...

  @override
  State<StatefulWidget> createState() => _PasswordPageState();
}

class _PasswordPageState extends State<PasswordRoute> {
 @override
  Widget build(BuildContext context) {
...child: Text(widget.usernameController);
}
}

Answer 5

Answers above are useful for a small app, but if you want to remove the headache of continuously worrying about a widgets state, Google presented the Provider package. https://pub.dev/packages/provider

Have a look into that one, or watch these videos from Andrea Bizzotto: https://www.youtube.com/watch?v=MkFjtCov62g // Provider: The Essential Guide https://www.youtube.com/watch?v=O71rYKcxUgA&t=258s // Provider: Introduction

Learn how to use the Provider package, and you are set for life :)

Answer 6

First Screen : //send data to second screen

 Navigator.push(context, MaterialPageRoute(builder: (context) {
                          return WelcomeUser(usernameController.text);

                          }));

Second Screen : //fetch data from first screen

 final String username;
  WelcomeUser(this.username);

//use data to display

body: Container(
    child: Center(
      child: Text("Welcome "+widget.username,
      textAlign: TextAlign.center,
      ),
    ),
  ),

Answer 7

Navigators in Flutter are similar to the Intent in Android. There are two classes we are dealing with FirstScreen and SecondScreen.

In order to pass the data between the first screen to second do the following: First of all add parameter in the SecondScreen class constructor

Now in the FirstScreen class provide the parameter

Navigator.push(context, MaterialPageRoute(builder: (context)=>SecondScreen(key_name:"Desired Data"));

So in the above line the "key_name" is the name of the parameter given in the SecondScreen class. The "Desired Data" is data should be passed through the key to the SecondScreen class.

That's it you are done!!!

Answer 8

Passing Data to back screen flutter

1. Home Page

   import 'package:flutter/material.dart';
   import 'package:flutter/src/widgets/container.dart';
   import 'package:flutter/src/widgets/framework.dart';
   import 'package:sqflite_offline/View/Add_data.dart';
   
    class HomeScreen extends StatefulWidget {
    const HomeScreen({super.key});
   
     @override
      State<HomeScreen> createState() => _HomeScreenState();
      }
   
      class _HomeScreenState extends State<HomeScreen> {
       List<Method> items = []; // => List of items that come form next page.
      @override
     Widget build(BuildContext context) {
   return Scaffold(
   appBar: AppBar(
     title: Text("Hello"),
   ),
   floatingActionButton: FloatingActionButton(
     onPressed: () {
       Navigator.of(context)
           .push<Method>(MaterialPageRoute(builder: (_) => AddData()))
           // fetching data form next page.
           .then((value) => setState(() {
                 if (value?.title_Ctr != "" && value?.desc_Ctr != "") {
                   items.add(Method(
                       title_Ctr: value!.title_Ctr,
                       desc_Ctr: value.desc_Ctr));
                 }
               }));
     },
     child: Icon(Icons.add),
   ),
   body: items.isNotEmpty
       ? Column(children: [
           Expanded(
               child: ListView.builder(
                   itemCount: items.length,
                   itemBuilder: ((context, index) {
                     return Container(
                       margin:
                           EdgeInsets.only(top: 10, left: 10, right: 10),
                       padding: EdgeInsets.only(left: 10, right: 10),
                       height: 80,
                       decoration: BoxDecoration(
                           color: Colors.pinkAccent,
                           borderRadius: BorderRadius.circular(10)),
                       child: Center(
                         child: ListTile(
                           title: Text(items[index].title_Ctr),
                           subtitle: Text(items[index].desc_Ctr),
                           leading: Icon(Icons.emoji_people),
                         ),
                       ),
                     );
                   })))
         ])
       : Center(
           child: Text("No Record Found"),
           ));
        }
       } 
   

2. Add List Page

    import 'package:flutter/material.dart';
    import 'package:flutter/src/widgets/container.dart';
    import 'package:flutter/src/widgets/framework.dart';
   
        class AddData extends StatefulWidget {
        const AddData({super.key});
   
           @override
           State<AddData> createState() => _AddDataState();
     }
   
    // Creating a Class and constructor.
    class Method {
    late String title_Ctr;
     late String desc_Ctr;
     Method({required this.title_Ctr, required this.desc_Ctr});
              }
   
       class _AddDataState extends State<AddData> {
      // Creating a TextEditingController for two Fiends,
       //one is for title TextField and second is for Description TextField.
       TextEditingController titleCtr = TextEditingController();
       TextEditingController descCtr = TextEditingController();
   
      // Creating a Method for Passing a data to back page.
      OnPressed(BuildContext context) {
        var data = Method(title_Ctr: titleCtr.text, desc_Ctr: descCtr.text);
        Navigator.pop(context, data);
          }
   
          @override
             Widget build(BuildContext context) {
               return Scaffold(
             appBar: AppBar(title: Text("Add Data")),
                body: Form(child: Builder(builder: (context) {
                 return Column(children: [
                   TextFormField(
                     controller: titleCtr,
         decoration: InputDecoration(hintText: "title"),
         validator: (value) {
           var newValue = value ?? "";
           if (newValue.isEmpty) {
             return 'title is Required';
           }
           return null;
         },
       ),
       TextFormField(
         controller: descCtr,
         decoration: InputDecoration(hintText: "Description"),
         validator: (value) {
           var newValue = value ?? "";
           if (newValue.isEmpty) {
             return 'Discription is Required';
           }
           return null;
         },
       ),
       MaterialButton(
         color: Colors.red,
         onPressed: () {
           if (Form.of(context)?.validate() ?? false) {
             OnPressed(context);
           }
         },
         child: Text("Save"),
       )
     ]);
   })));
      }
      }
   

3. screenshot

Answer 9

1) From where you want to push :

onPressed: () async {
                        await Navigator.pushNamed(context, '/edit',
                            arguments: userData);
                        setState(() {
                          userData = userData;
                        });}

2) From Where you want to pop :

    void updateData() async{
    WorldTime instance = locations;
    await instance.getData();
    Navigator.pop(context, userData);
  }

Answer 10

If you use get package then try this . passing data with get package

check get package package link

Answer 11

Here's another approach.

Nothing wrong with the other answers. I've tried all of the methods mentioned using global wide widgets like provider, third-party solutions, Navigator arguments, etc. This approach differs by allowing one to chain calls and pass precise data of any type required to the widget using it. We can also gain access to a completion handler event and can use this technique without being constrained to Navigator objects.

Here's the tldr:

tldr; We have to turn our thinking on its head a bit. Data can be passed to the called widget when you navigate to it by using final arguments with default values in the destination widget. Using an optional function you can get data back from the 'child' (destination) widget.

The complete explanation can be found using this SO answer., (Gist)

Answer 12

I just want to be here to help that 1% who might go through what I did Lol

Don't forget to put an "await" infront of "Navigator.push" in the first page, otherwise no data will be returned to the first page when you pop from the second page...

Answer 13

Passing Data to back screen flutter

First Screen

final result = await Navigator.of(context).push(MaterialPageRoute(builder: (context)=>const PaymentScreen()));
                          

Second Screen

String selected = "Credit/Debit";
Navigator.pop(context,selected);