How to pass data between screens in Flutter?

Hello Guys How are you all? Hope you all are fine. As a flutter developer Maytime’s you have to pass first screen data to the second screen or you want data on the first screen when users come back to the first screen from the second screen. So here we are going to learn How to pass data between screens in Flutter in this tutorial.

How to pass data between screens in Flutter?

Here we will use Constructor to pass data between two screen. Consider the below image to understand it in a proper way.

Method 1 : Using Constructor

Here we will pass data when we navigate our first screen to second screen something like this.

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SecondScreen(
      userName: mycontroller.text,
    ),
  ),
);

Then we will create variable at SecondScreen in constructor. Like below example.

class SecondScreen extends StatefulWidget {
  String userName;
  SecondScreen({
    this.userName,
  });

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

class _SecondScreenState extends State<SecondScreen> {

}

When you use Navigator.push you can pass data to SecondScreen with key name. Now you can use userName in SecondScreen with just widget.userName. Here I am sharing My full source Code So that you can understand it in a proper way.

My main.dart [ First Screen ]

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart ';
import 'package:fluttercorner_app/SecondScreen.dart';

void main() {
  runApp(new MaterialApp(
    home: MyApp(),
    debugShowCheckedModeBanner: false,
  ));
}

class MyApp extends StatefulWidget {
  @override
  _State createState() => new _State();
}

class _State extends State<MyApp> {
  TextEditingController mycontroller = TextEditingController();

  @override
  List earthquakes = [];
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('First Screen'),
      ),
      body: Container(
        padding: const EdgeInsets.all(20),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              TextField(
                controller: mycontroller,
                decoration: InputDecoration(
                  labelText: 'Enter Name',
                  hintText: 'Enter Your Name',
                ),
              ),
              RaisedButton(
                shape: StadiumBorder(),
                onPressed: () {
                  print(mycontroller.text);
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => SecondScreen(
                        userName: mycontroller.text,
                      ),
                    ),
                  );
                },
                child: Text("Send to secondScreen"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Here is My Second Screen code

import 'package:flutter/material.dart';

class SecondScreen extends StatefulWidget {
  String userName;
  SecondScreen({
    this.userName,
  });

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

class _SecondScreenState extends State<SecondScreen> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Second Screen'),
      ),
      body: Container(
        padding: const EdgeInsets.all(20),
        child: Center(
          child: Text(
            "Welcome ${widget.userName}",
            style: TextStyle(
              fontSize: 25,
            ),
          ),
        ),
      ),
    );
  }
}

Here is my Output

Faq

Summery

So, It’s All About How to pass data between screens in Flutter?. I hope this tutorial helps you to solve your error. Please Comment Below if You stucks anywhere with my code.

Also Check Out Below Tutorials

• How to upload images and file to a server in Flutter?
• unexpected element queries found in manifest
• How to Change StatusBar Color in Flutter?
• How to make a TextField with HintText but no Underline in flutter
• Also Read How to clear Flutter’s Build cache?