Last Updated on 2021-05-30 by Clay
When we designing a mobile application, we are difficult to implement all of functions in just only one page, so we need to divide different functions to different pages.
For example: user is playing the game in the main page, but suddenly, he want to turn off the audio effect, so we can design a button to allow user navigate to the setting page to configure his default settings.
The article is record how to pass and receive the parameters when we navigating the page. Divided into the following three different situations:
- Pass the parameters to
StatelessWidget
- Pass the parameters to
StatefulWidget
- Receive the parameters from page return
Pass the parameters to StatelessWidget
This is a simple sample code, it is consists of a input box and a button. If user press the button, the text of input box will pass to the next page (SecondPage).
Then we will display the text in the second page.
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; void main() => runApp(MyApp()); // MyApp class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: HomePage(), ); } } // HomePage class HomePage extends StatelessWidget { // TextEditingController TextEditingController _dataController = TextEditingController(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Home Page"), ), body: Center( child: Column( children: <Widget>[ TextField( autofocus: true, decoration: InputDecoration( labelText: "data:", hintText: "data will display on the second page", prefixIcon: Icon(Icons.font_download), ), obscureText: false, controller: _dataController, ), ElevatedButton( child: Text("Jump to second page"), onPressed: () { Navigator.push( context, MaterialPageRoute( builder: (context) => SecondPage( data: _dataController.text, ) ) ); }, ), ], ) ), ); } } // SecondPage class SecondPage extends StatelessWidget { SecondPage({Key? key, required this.data}) : super(key: key); final String data; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Second Page"), ), body: Column( children: <Widget>[ Text("the data is: $data"), ], ), ); } }
Output:
Pass the parameters to StatefulWidget
The pass method of StatefulWidget
and StatelessWidget
are different.
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; void main() => runApp(MyApp()); // MyApp class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: HomePage(), ); } } // HomePage class HomePage extends StatelessWidget { // TextEditingController TextEditingController _dataController = TextEditingController(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Home Page"), ), body: Center( child: Column( children: <Widget>[ TextField( autofocus: true, decoration: InputDecoration( labelText: "data:", hintText: "data will display on the second page", prefixIcon: Icon(Icons.font_download), ), obscureText: false, controller: _dataController, ), ElevatedButton( child: Text("Jump to second page"), onPressed: () { Navigator.push( context, MaterialPageRoute( builder: (context) => SecondPage( data: _dataController.text, ) ) ); }, ), ], ) ), ); } } // SecondPage class SecondPage extends StatefulWidget { SecondPage({Key? key, required this.data}) : super(key: key); final String data; @override _SecondPageState createState() => _SecondPageState(); } // _SecondPageState class _SecondPageState extends State<SecondPage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Second Page"), ), body: Column( children: <Widget>[ Text("the data is: ${widget.data}"), ], ), ); } }
Output:
The actual display effect is very similar to the previous case
Receive the parameters from page return
This method is more trouble. We need to build a asynchronous function to wait the second page return, and then we receive the parameter, update the HomePage
status.
In addition, if we want to return parameters, we also need to create a button in the SecondPageState
, and use Navigator.pop(conoetxt, data);
to return the data
parameter we want.
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; void main() => runApp(MyApp()); // MyApp class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: HomePage(), ); } } // HomePage class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); } // HomePage class _HomePageState extends State<HomePage> { // TextEditingController TextEditingController _dataController = TextEditingController(); var returnTextContent = ""; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Home Page"), ), body: Center( child: Column( children: <Widget>[ TextField( autofocus: true, decoration: InputDecoration( labelText: "data:", hintText: "data will display on the second page", prefixIcon: Icon(Icons.font_download), ), obscureText: false, controller: _dataController, ), ElevatedButton( child: Text("Jump to second page"), onPressed: () { _goSecondPage(context).then((value) { setState(() { returnTextContent = value; }); }); }, ), SizedBox( height: 50.0, ), Text( returnTextContent.isNotEmpty ? returnTextContent : "No any return data", ), ], ) ), ); } // Go to the second page and receive the return value Future<String> _goSecondPage(BuildContext context) async { String returnText = await Navigator.push( context, MaterialPageRoute( builder: (context) => SecondPage( data: _dataController.text, ), ), ); print("TEST OUTPUT"); print(returnText); return returnText; } } // SecondPage class SecondPage extends StatelessWidget { SecondPage({Key? key, required this.data}) : super(key: key); final String data; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Second Page"), ), body: Center( child:Column( children: <Widget>[ Text("the data is: $data"), ElevatedButton( child: Text("Jump back the home page"), onPressed: () { Navigator.pop(context, data); }, ), ], ), ), ); } }
Output:
References
- https://flutter.cn/docs/cookbook/navigation/returning-data
- https://stackoverflow.com/questions/55566807/how-to-return-value-on-async-function-in-flutter