To build an interactive app, you need to know every kind of Flutter trick or code. In this example, you will learn how to return data on mobile back button press or flutter widget button press. There is a simple dart coding to return data to the previous screen.
See the example below, read the explanation comments:
main.dart
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:testproject/next_page.dart';
//import next page file
void main()=>runApp(MainApp());
class MainApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Home(),
);
}
}
class Home extends StatefulWidget{
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
var returndata = "empty"; //variable for return data
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title:Text("Return Data back from another page"),
backgroundColor:Colors.redAccent
),
body:Container(
alignment: Alignment.center, //align to center
height:250, //height to 250
child:Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
child: Text("Back Data: $returndata"),
),
Container(
child: RaisedButton(
onPressed: () async { //there is await inside, so add async tag
var result = await Navigator.push(context, MaterialPageRoute(
builder: (context){
return NextPage();
}
)); //Navigate to another page
// this will return data which is assigned on Navigator.pop(context, returndata);
setState(() {
returndata = result; //update the returndata with the return result,
//update UI with setState()
});
},
child:Text("Go to Next Page"),
color: Colors.orangeAccent,
colorBrightness: Brightness.dark, //background color is darker, so set darker brightness
)
)
],)
)
);
}
}
next_page.dart
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class NextPage extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title:Text("Stateless Page"),
backgroundColor: Colors.redAccent,),
body: WillPopScope( //WillPopScope will replace the default
//"Mobile Back Button" and "Appbar Back button" action
onWillPop: (){
//on Back button press, you can use WillPopScope for another purpose also.
Navigator.pop(context, "Backbutton data"); //return data along with pop
return new Future(() => false); //onWillPop is Future<bool> so return false
},
child: Container(
height:300,
child: Center(
child: RaisedButton(
onPressed: (){
Navigator.pop(context, "Raised Button data");
//go back along with data
},
child: Text("Go Back"),
)
)
)
),
);
}
}
In this way, you can return data to the previous page on the “Mobile back button” or “AppBar back icon” from another page screen.
Please Wait...
No any Comments on this Article