Flutter - Return Data from Screen
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: <Widget>[
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: <Widget>[
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 snackbar by 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<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:
Similar Reads
Retrieve Data From TextFields in Flutter In this article, we'll learn how to retrieve data from TextFields. TextField() widget is the most common widget used in flutter apps to take user input. We'll talk about two major methods used to extract text from TextField.Using VariablesThe TextField widget has various callback properties through
4 min read
Flutter - Send Data to Screen Interaction with the UI is an integral part of any application. But more often than not, the information needs to be sent from one screen to another. For instance, say you need to pass data regarding a selected or tapped component of the UI to another route(i.e., page). In this article, we will expl
4 min read
Flutter - Navigate From One Screen to Another Flutter apps may have multiple screens or pages. Pages are groups of functionalities. The user navigates between different pages to use different functionalities. Concepts like pages are called routes in Flutter. We can use Navigator.push() to navigate to a new route and Navigator.pop() to navigate
3 min read
Flutter - Fetch Data From REST APIs In this article, we know about how we can fetch the data from the API and show it on our screen dynamically. Dynamically means all the data came from the API using the internet or you can say that you need internet access to fetch the data. For this process, we have to follow some steps to make it s
5 min read
Flutter - Fetching Data From the Internet In today's world, most applications heavily rely on fetching information from the servers through the internet. In Flutter, such services are provided by the http package. In this article, we will explore this concept.Steps to Implement Data Fetching from the InternetStep 1 : Create a new flutter ap
4 min read