How to return data from the screen in flutter

Hello, readers welcome back again to another blog. In the previous blog, we have seen how to pass the data from the first screen to the second screen but sometimes we also need to pass the data from the second screen to the first screen. So today we will see how we can do that in flutter.

Before starting if you had not seen the previous pard I will recommend first reading that.

In the previous article we saw that to push a screen we use Navigator.push() function. But when you will see the return type of the function it returns Futture where T is generic, which means we can put any object in place of T.

Future<T?> push<T extends Object?>(BuildContext context, Route<T> route)

Here T is the type of data that we are expecting to return from the screen.

As this returns a future we now need to put await to stop and wait until the second screen is poped and we get our data.

Now in the second screen, we can pop the screen using the function Navigator.pop(). Similarly in this function also there is a generic type T which tells the type of data we want to return. And this function has an optional field of type T, the data we want to return.

void pop<T extends Object?>(BuildContext context, [T? result])

Let's understand this with an example

We will create a button on the first screen which on pressing the user will go to the second screen.

On the second screen, we will give the user three buttons to press. When the user presses any one of the buttons we will pop the screen and return the String data to the first screen with the message “user clicked the x button”.

And we will also check if the data is null or not on the first screen because the user may not click on any button and press the back button in this case the data returned by the second screen will be null.

First Screen

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          ElevatedButton(
              onPressed: () async {
                String? result = await Navigator.push<String>(context,
                    MaterialPageRoute(builder: (context) {
                  return const SecondScreen();
                }));

                ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                    content: Text(result ?? "User doesn't press anything")));
              },
              child: const Text("Next Screen"))
        ],
      ),
    );
  }
}

Second Screen

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          ElevatedButton(
              onPressed: () {
                Navigator.pop<String>(context, "User pressed Button 1");
              },
              child: const Text("Button 1")),
          ElevatedButton(
              onPressed: () {
                Navigator.pop<String>(context, "User pressed Button 2");
              },
              child: const Text("Button 2")),
          ElevatedButton(
              onPressed: () {
                Navigator.pop<String>(context, "User pressed Button 3");
              },
              child: const Text("Button 3"))
        ],
      )),
    );
  }
}

Blog

How to return data from the screen in flutter

Aakashp

Let's understand this with an example

First Screen

Second Screen

Output

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

Related