How to pass data across the screen in a flutter app.

Hello readers, welcome again to another blog. So recently I was creating a flutter app and I need to pass the data from one screen to another screen. And if you are also a beginner in flutter development then you may also need to know how to pass data from one screen to other. When I searched, I got two ways of passing data from one screen to the other in flutter. Let's see both of them one by one.

Before that, we need to create a situation in which we send data from one screen to another. let's say we have a textbox on one screen which takes the name of the user and the user press on login. After which the user will be directed to the next screen in which the “Welcome username” message will be displayed.

In this, we will first take the name of the user on the first screen and then pass the name on the second screen to show the welcome message.

Two ways I know of passing data are :

Passing in the constructor of the new class
Passing in route settings

Passing in constructor

Let's see how we can use the constructor of the second screen to pass the name of the user from the first screen.

class FirstScreen extends StatelessWidget {
  const FirstScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: SizedBox(
        width: 300,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const TextField(
                decoration: InputDecoration(
              hintText: "Enter your Name",
              labelText: "Name",
              border: OutlineInputBorder(),
            )),
            const SizedBox(
              height: 20,
            ),
            ElevatedButton(onPressed: () {}, child: const Text("Login"))
          ],
        ),
      ),
    );
  }
}

This is the code for the FirstScreen class. There is just a Column widget that has a TextField to take the input from the user and an ElevatedButton to go to the next screen.

Now let's see the code of the second screen class. Below in the constructor, we have a String field called name which we will use to pass the value from the first screen to the second screen on button press.

class SecondScreen extends StatelessWidget {
   const SecondScreen(this.name, {Key? key}) : super(key: key);
  final String name;
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Now let's create a text editing controller to read the value of the text field and also set the onPressed function of the login button. And also display a text widget on the second screen. And at last, the whole code will look like this.

class FirstScreen extends StatelessWidget {
  FirstScreen({Key? key}) : super(key: key);
final TextEditingController controller = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Center(
      child: SizedBox(
        width: 300,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            TextField(
                controller: controller,
                decoration: const InputDecoration(
                  hintText: "Enter your Name",
                  labelText: "Name",
                  border: OutlineInputBorder(),
                )),
            const SizedBox(
              height: 20,
            ),
            ElevatedButton(
                onPressed: () {
                  String name = controller.text;
         Navigator.push(context, MaterialPageRoute(
         builder: (context) => SecondScreen(name)));
                },
                child: const Text("Login"))
          ],
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  const SecondScreen(this.name, {Key? key}) : super(key: key);
final String name;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("Welcome $name"),
      ),
    );
  }
}

If you want you can also make the name field in the second screen optional argument by putting it inside the square bracket and showing some default value if the name is NULL.

Output:

Passing in Route settings

Now that you have seen how to pass data with the help of a constructor it is similar to passing the data from route but the only difference is we can pass any type of data from route settings. Let's see this with an example.

When we push a screen with Navigator.push we give it a page route. And inside that route, we can also pass data.

Navigator.push(context, MaterialPageRoute(
                        builder: (context) => SecondScreen(name),
                        settings: RouteSettings(arguments: name)));

here we have passed the name inside the arguments of RouteSettings.

And to get the data on the second screen we use modelroute. You will get the data as the Object? so you need to cast it to what data type you have sent from the first screen.

String name = ModalRoute.of(context)!.settings.arguments as String;

At last the overall code with route setting will look like this

class FirstScreen extends StatelessWidget {
  FirstScreen({Key? key}) : super(key: key);
final TextEditingController controller = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Center(
      child: SizedBox(
        width: 300,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            TextField(
                controller: controller,
                decoration: const InputDecoration(
                  hintText: "Enter your Name",
                  labelText: "Name",
                  border: OutlineInputBorder(),
                )),
            const SizedBox(
              height: 20,
            ),
            ElevatedButton(
                onPressed: () {
                  String name = controller.text;
                      Navigator.push(context,
                      MaterialPageRoute(
                      builder: (context) => const SecondScreen(),
                      settings: RouteSettings(arguments: name)));
                },
                child: const Text("Login"))
          ],
        ),
      ),
    );
  }
}
class SecondScreen extends StatelessWidget {
  const SecondScreen({Key? key}) : super(key: key);
@override
  Widget build(BuildContext context) {
    String name = ModalRoute.of(context)!.settings.arguments as String;
    return Scaffold(
      body: Center(
        child: Text("Welcone $name"),
      ),
    );
  }
}

Reference: https://docs.flutter.dev/cookbook/navigation/passing-data

Blog

How to pass data across the screen in a flutter app.

Aakashp

Passing in constructor

Output:

Passing in Route settings

Join Our Newsletter. No Spam, Only the good stuff.

Related