Flutter – Return Data from Screen

Interaction with UI is an essential part of any application. During the same, there might raise a need to return data from the screen. This kind of interaction can range from selecting an option to navigating to different routes through the various buttons in the UI. In this article, we will explore the process of returning data from a screen in a Flutter application. 

In Flutter, it can be done using the Navigator.pop() method. We will try this by implementing a simple application. To do so follow the below steps:

• Add a home screen
• Add a button to launch the selection screen
• Display the options
• Transition to the home screen after option selection
• Display the selection on the home screen

Let’s build a simple app now:

Create a home screen:

We will need a home screen with a button. The button when tapped should load to an options screen. It can be done like shown below:

Dart

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GeeksForGeeks'),
        backgroundColor: Colors.green,
      ),
      body: const Center(child: SelectionButton()),
    );
  }

Adding the launch button and selection screen:

To create a launch button to the launch the selection screen and add the selection screen use the following:

Dart

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

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.all<Color>(Colors.green),
      ),
      onPressed: () {
        _navigateAndDisplaySelection(context);
      },
      child: const Text('Launch Option Screen'),
    );
  }

  _navigateAndDisplaySelection(BuildContext context) async {
    final result = await Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const SelectionScreen()),
    );

// Do not use BuildContexts across async gaps.
// 'removeCurrentSnackBar' is deprecated and shouldn't be used. Use ScaffoldMessenger.removeCurrentSnackBar.
// 'showSnackBar' is deprecated and shouldn't be used. Use ScaffoldMessenger.showSnackBar.

    // ignore: use_build_context_synchronously
    ScaffoldMessenger.of(context)
      ..removeCurrentSnackBar()
      ..showSnackBar(SnackBar(content: Text("$result")));

    // Scaffold.of(context)
    //   ..removeCurrentSnackBar()
    //   ..showSnackBar(SnackBar(content: Text("$result")));
  }
}

Displaying the options:

We will have 2 options for the sake of simplicity and have data associate with both of them which when tapped can be returned to the home screen.

Dart

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Select Option'),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: ElevatedButton(
                style: ButtonStyle(
                  backgroundColor:
                      MaterialStateProperty.all<Color>(Colors.green),
                ),
                onPressed: () {
                  Navigator.pop(context, ' You selected the Option 1');
                },
                child: const Text('Option 1'),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: ElevatedButton(
                style: ButtonStyle(
                  backgroundColor:
                      MaterialStateProperty.all<Color>(Colors.green),
                ),
                onPressed: () {
                  Navigator.pop(context, 'You selected the Option 2');
                },
                child: const Text('Option 2.'),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Adding data to the options:

We will attach a onPressed() callback to both option 1 and option 2 which returns the data associated with each of them as shown below:

Dart

child: ElevatedButton(
                style: ButtonStyle(
                  backgroundColor:
                      MaterialStateProperty.all<Color>(Colors.green),
                ),
                onPressed: () {
                  Navigator.pop(context, ' You selected the Option 1');
                },
                child: const Text('Option 1'),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: ElevatedButton(
                style: ButtonStyle(
                  backgroundColor:
                      MaterialStateProperty.all<Color>(Colors.green),
                ),
                onPressed: () {
                  Navigator.pop(context, 'You selected the Option 2');
                },
                child: const Text('Option 2.'),
              ),

Displaying the selection:

We will use snackbar by using the _navigateAndDisplaySelection() method in SelectionButton:

Dart

  _navigateAndDisplaySelection(BuildContext context) async {
    final result = await Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const SelectionScreen()),
    );

// Do not use BuildContexts across async gaps.
// 'removeCurrentSnackBar' is deprecated and shouldn't be used. Use ScaffoldMessenger.removeCurrentSnackBar.
// 'showSnackBar' is deprecated and shouldn't be used. Use ScaffoldMessenger.showSnackBar.

    // ignore: use_build_context_synchronously
    ScaffoldMessenger.of(context)
      ..removeCurrentSnackBar()
      ..showSnackBar(SnackBar(content: Text("$result")));

    // Scaffold.of(context)
    //   ..removeCurrentSnackBar()
    //   ..showSnackBar(SnackBar(content: Text("$result")));
  }
}

Complete Source Code:

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    title: 'Returning Data',
    home: HomeScreen(),
  ));
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GeeksForGeeks'),
        backgroundColor: Colors.green,
      ),
      body: const Center(child: SelectionButton()),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.all<Color>(Colors.green),
      ),
      onPressed: () {
        _navigateAndDisplaySelection(context);
      },
      child: const Text('Launch Option Screen'),
    );
  }

  _navigateAndDisplaySelection(BuildContext context) async {
    final result = await Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const SelectionScreen()),
    );

// Do not use BuildContexts across async gaps.
// 'removeCurrentSnackBar' is deprecated and shouldn't be used. Use ScaffoldMessenger.removeCurrentSnackBar.
// 'showSnackBar' is deprecated and shouldn't be used. Use ScaffoldMessenger.showSnackBar.

    // ignore: use_build_context_synchronously
    ScaffoldMessenger.of(context)
      ..removeCurrentSnackBar()
      ..showSnackBar(SnackBar(content: Text("$result")));

    // Scaffold.of(context)
    //   ..removeCurrentSnackBar()
    //   ..showSnackBar(SnackBar(content: Text("$result")));
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Select Option'),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: ElevatedButton(
                style: ButtonStyle(
                  backgroundColor:
                      MaterialStateProperty.all<Color>(Colors.green),
                ),
                onPressed: () {
                  Navigator.pop(context, ' You selected the Option 1');
                },
                child: const Text('Option 1'),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: ElevatedButton(
                style: ButtonStyle(
                  backgroundColor:
                      MaterialStateProperty.all<Color>(Colors.green),
                ),
                onPressed: () {
                  Navigator.pop(context, 'You selected the Option 2');
                },
                child: const Text('Option 2.'),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Output: