How to return data on back button press from another Screen

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.

No any Comments on this Article


Please Wait...