Flutter - How can send and receive data between screens.

In Flutter, the user interface is displayed through widgets. The widget is used to represent the data to the user and allows user interaction.

In a mobile application, we can have multiple widgets(Screen) and that can interact with each other. During widget interaction, we might be required to pass data from one widget to other.

Example: If you are developing an application for news feed reader, you may require having at least two screens. While the first screen displaying the list of news feeds and other displaying the feed details. Sometimes we need to send data to another screen and after some calculation, we need it back.

How can send data to another screen?
To send data, we have to use Navigator to push a new MaterialPageRoute onto the stack with our data.

Send data


String userName = "www.developerlibs.com";
Navigator.push(
    context,
    new MaterialPageRoute(
        builder: (BuildContext context) =>
        new Screen5(userName)));       

How can get back data?  
We can send data back to the previous screen with the help of the pop method.

Get back data.


Navigator.pop(context, "www.developerlibs.com"

 

In this post, we going to create a Flutter application. Where we'll send some data to another screen and we'll receive updated data. To create this app, we have to use navigator and route that we have explained in our post: Screen push and pop with Navigator.


Creating a new Project
1. Create a new project from File ⇒ New Flutter Project with your development IDE.
2. Open main.dart file and edit it. As we have set our theme and change debug banner property of Application.

main.dart


import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_route_navigation/dashboard.dart';
import 'package:flutter_route_navigation/settingscreen.dart';

void main() {
  runApp(new MaterialApp(
    debugShowCheckedModeBanner: false,
    theme: new ThemeData(
      primaryColor: const Color(0xFF02BB9F),
      primaryColorDark: const Color(0xFF167F67),
      accentColor: const Color(0xFFFFFFFF),
    ),
    home: new DashboardScreen(),
    routes: <String, WidgetBuilder>{
      '/dashboardscreen': (BuildContext context) => new DashboardScreen(),
      '/settingscreen': (BuildContext context) => new SettingScreen(),
    },
  ));
}

in the above code snippet, we have declared route of the app that we need for exchange data.

3. After that create the first screen of the app that is dashboardscreen.dart.

dashboardscreen.dart


import 'package:flutter/material.dart';
import 'package:flutter_route_navigation/profilescreen.dart';

class DashboardScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.grey,
      appBar: new AppBar(
        leading: new Icon(Icons.home,color: Colors.white,),
        title: new Text("Dashboard",

          style: new TextStyle(color: Colors.white),
        ),
        actions: <Widget>[

          new IconButton(
            icon: new Icon(Icons.account_box,color: Colors.white,),
            onPressed: () {
              String userName = "Developer";//sending it to another screen
              Navigator.push(
                  context,
                  new MaterialPageRoute(
                      builder: (BuildContext context) =>
                      new ProfilesScreen(userName)));
            },
          )
        ],
      ),
      body: new Center(
        child: new Text(
          "Dashboard Screen",
          style: new TextStyle(color: Colors.white),
        ),
      ),
    );
  }
}

in the dashboard screen toolbar, we using a profile icon. From the dashboard screen, we sending a name (Developer) to the profile screen. In order to navigate to a profile screen, we use the Navigator.push() method. The push method requires a Route. So here, we created our own Route and using the MaterialPageRoute. It'll perform platform-specific transitions animation.

4. To retrieve the values in another screen. We need to add a parameterized constructor. So, we have created it in the profilescreen.dart file and put it in the field variable.

profilescreen.dart


import 'dart:async';
import 'package:flutter/material.dart';
class ProfilesScreen extends StatefulWidget {
  final String userName;
  ProfilesScreen(this.userName);
  @override
  _FormState createState() => _FormState(userName);
}

class _FormState extends State<ProfilesScreen> {
  String userName;
  _FormState(this.userName);
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.blueGrey,
      appBar: new AppBar(
        leading: new IconButton(
          icon: new Icon(
            Icons.arrow_back,
            color: Colors.white,
          ),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
        title: new Text(
          "Profile",
          style: new TextStyle(color: Colors.white),
        ),
        actions: <Widget>[
          new IconButton(
            icon: new Icon(
              Icons.settings,
              color: Colors.white,
            ),
            onPressed: () {
              final result = Navigator.of(context).pushNamed('/settingscreen');
              result.then((result) {
                setState(() {
                  userName = result as String;
                  if(userName==null||userName.isEmpty){
                    userName="developer";
                  }
                });
              });
            },
          ),
        ],
      ),
      body: new Center(
        child: new Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            new Text(
              "Hi " + userName,
              style: new TextStyle(color: Colors.white),
            ),
          ],
        ),
      ),
    );
  }
}

as you can see above, on the profile screen. We displaying name that's sent from the dashboard screen. In profile screen toolbar, we have created a setting icon. When you press on it, you will move on setting screen.


5. In the setting screen, we use a text field widget. The value of text field widget sends to profile screen back.

settingscreen.dart



import 'package:flutter/material.dart';
class SettingScreen extends StatelessWidget {
  TextEditingController _nameFieldController = new TextEditingController();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.grey,
      appBar: new AppBar(
        leading: new IconButton(
          icon: new Icon(
            Icons.arrow_back,
            color: Colors.white,
          ),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
        title: new Text(
          "Setting Screen",
          style: new TextStyle(color: Colors.white),
        ),
        actions: <Widget>[
          new IconButton(
            icon: new Icon(
              Icons.home,
              color: Colors.white,
            ),
            onPressed: () {
              Navigator.popUntil(
                  context, ModalRoute.withName('/dashboardscreen'));
            },
          ),
        ],
      ),
      body: new Center(
        // 3
        child: new Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            new Padding(
              padding: EdgeInsets.only(left: 50.0, right: 50.0),
              child: new TextFormField(
                maxLength: 32,
                controller: _nameFieldController,
              ),
            ),
            new RaisedButton(
              onPressed: () async {
                Navigator.pop(context, _nameFieldController.text);
              },
              child: new Text("Send back"),
            )
          ],
        ),
      ),
    );
  }
}

,)
When a route is used to return a value, the route’s type parameter should match the type of pop’s result. Here we need a String data back so we’ve used MaterialPageRoute<String>. As you can see, in the profilescreen.dart file. We parsing the result to display data.

Now merge all code and run the app. You'll see the final app look like below and app able to exchange data.   

              

                                              

I hope you got the basic idea of data exchange between the Flutter screen. If you facing any issue to achieve it, please feel free to ask it in the comment section below and you can ask it on SLACK.