How to achieve on activity result in Flutter
To develop the interactive apps a developer must should understand the UI.
In this tutorial we will learn how to achieve on Activity Result in Flutter. How to get data back from Next screen to previous screen in Flutter. In mobile apps we need to pass a lot of data from one screen to next screen, which is very common. And often we need get data back from next screen to previous screen. For example we just want to select an option form next screen and display that option to previous screen or we want to fill a form in next screen and show data in previous screen.
In this example we will explore the process of returning data back from next screen to previous screen in flutter.
Let us consider we have two screens, First and Second Screen. We have to launch Second Screen from First and get data back from Second to First Screen. On the Second Screen there will be a text field and a submit button. We will display the resulted text in first screen which is typed in the text field of Second Screen.
To launch a screen from which we will return data back to first. We will use
Navigator.push(context,
MaterialPageRoute(builder: (context) => SecondScreen()))
.then((value) {
setState(() {
result = value;
});
});
You will be familiar with the code to move to next screen in flutter. To get the result back we will use ‘’then’’ function. Parameter of this function contains the resulted value.
This is the code of first screen. Now let us see how to close the second screen with result data, which will be passed back to previous screen.
1. Navigator.pop(context,’resulted data’);
We will close the second screen with pop method and pass the result in second parameter. Here I have passed a string as parameter that we will get back to first screen in ‘’then’’ function.
Here is the complete source code of First Screen and Second Screen.
main.dart
'package:flutter/material.dart';
import 'package:my_demo/second_screen.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const FirstScreen(),
);
}
}
first_screen.dart
class FirstScreen extends StatefulWidget {
const FirstScreen({Key? key}) : super(key: key);
@override
_FirstScreenState createState() => _FirstScreenState();
}
class _FirstScreenState extends State<FirstScreen> {
var result;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('First Screen'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () async {
Navigator.push(context,
MaterialPageRoute(builder: (context) => SecondScreen()))
.then((value) {
setState(() {
result = value;
});
});
},
child: const Text('Next Screen'),
),
Text(result.toString())
],
),
),
);
}
}
second_screen.daart
'package:flutter/material.dart';
class SecondScreen extends StatefulWidget {
const SecondScreen({Key? key}) : super(key: key)
@override
_SecondScreenState createState() => _SecondScreenState();
}
class _SecondScreenState extends SecondScreen> {
TextEditingController textEditingController = TextEditingController();
@overrid
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Second Screen'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
controller: textEditingController,
),
ElevatedButton(
onPressed: () {
Navigator.pop(context,'resulted data');
},
child: const Text('Done'))
],
),
),
);
}
}