Flutter Return Data from Screen (original) (raw)

Last Updated : 07 Mar, 2025

Interaction with UI is an essential part of any application. During the same, there might be 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.

Steps to implement Return Data from the Screen

Step 1: 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,
                foregroundColor: Colors.white,
         ),
                body: const Center(child: SelectionButton()),
    );
 }

}

`

Step 2: Adding the launch Button and Selection Screen

To create a launch button to 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: ElevatedButton.styleFrom( backgroundColor: Colors.green, foregroundColor: Colors.white), onPressed: () { _navigateAndDisplaySelection(context); }, child: const Text('Launch Option Screen'), ); }

_navigateAndDisplaySelection(BuildContext context) async { final result = await Navigator.push( context, MaterialPageRoute(builder: (context) => const SelectionScreen()), ); ScaffoldMessenger.of(context) ..removeCurrentSnackBar() ..showSnackBar(SnackBar(content: Text("$result"))); } } }

`

Step 3: 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, foregroundColor: Colors.white, ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Padding( padding: const EdgeInsets.all(8.0), child: ElevatedButton( style: ElevatedButton.styleFrom( backgroundColor: Colors.green, foregroundColor: Colors.white), onPressed: () { Navigator.pop(context, ' You selected the Option 1'); }, child: const Text('Option 1'), ), ), Padding( padding: const EdgeInsets.all(8.0), child: ElevatedButton( style: ElevatedButton.styleFrom( backgroundColor: Colors.green, foregroundColor: Colors.white), onPressed: () { Navigator.pop(context, 'You selected the Option 2'); }, child: const Text('Option 2.'), ), ) ], ), ), ); } }

`

Step 4: 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 `

Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Padding( padding: const EdgeInsets.all(8.0), child: ElevatedButton( style: ElevatedButton.styleFrom( backgroundColor: Colors.green, foregroundColor: Colors.white), onPressed: () { Navigator.pop(context, ' You selected the Option 1'); }, child: const Text('Option 1'), ), ), Padding( padding: const EdgeInsets.all(8.0), child: ElevatedButton( style: ElevatedButton.styleFrom( backgroundColor: Colors.green, foregroundColor: Colors.white), onPressed: () { Navigator.pop(context, 'You selected the Option 2'); }, child: const Text('Option 2.'), ), ) ], ),

`

Step 5: Displaying the Selection

We will use **snackbarby using the **_navigateAndDisplaySelection() method in **SelectionButton:

Dart `

_navigateAndDisplaySelection(BuildContext context) async { final result = await Navigator.push( context, MaterialPageRoute(builder: (context) => const SelectionScreen()), ); ScaffoldMessenger.of(context) ..removeCurrentSnackBar() ..showSnackBar(SnackBar(content: Text("$result"))); }

`

**Complete Source Code

**main.dart:

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(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: [ Padding( padding: const EdgeInsets.all(8.0), child: ElevatedButton( style: ButtonStyle( backgroundColor: MaterialStateProperty.all(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(Colors.green), ), onPressed: () { Navigator.pop(context, 'You selected the Option 2'); }, child: const Text('Option 2.'), ), ) ], ), ), ); } }

`

**Output: