Posted in Dart Flutter

Flutter – How to return data on back button press from another screen

Flutter – How to return data on back button press from another screen Posted on June 15, 2020Leave a comment
I'm Hari Prasad Chaudhary from Nepal, developer of the finest educational website/app "MeroSpark" and the finest eCommerce system "PasalaY". Here I share the code snippet which I learn during development.

To build a interactive app, you need to know every kinds of Flutter tricks or codes. 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 previous screen.

flutter return data

See this also: Flutter – How to pass Data between Page Screens

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"),
              ) 
            )
         )
       ),
     );
  }
}

flutter 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.

I'm Hari Prasad Chaudhary from Nepal, developer of the finest educational website/app "MeroSpark" and the finest eCommerce system "PasalaY". Here I share the code snippet which I learn during development.

Leave a Reply

Your email address will not be published. Required fields are marked *