We start off with Page 1. Page 1 has two containers with blue. We go to Page 2 in order to change these colors via radio buttons. When we come back to Page 1, the colors have changed. This is how state is shared between two pages.
main.dart
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import 'package:flutter/material.dart'; import 'page1.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData.dark(), home: Scaffold( appBar: AppBar( title: Text('Page 1'), ), body: PageOne(), ), ); } } |
Now, in Page 1, we have two properties. firstSquareColor and secondSquareColor. They are both set to false.
page1.dart
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import 'package:flutter/material.dart'; import 'page2.dart'; class PageOne extends StatefulWidget { @override _PageOneState createState() => _PageOneState(); } class _PageOneState extends State<PageOne> { bool firstSquareColor = false; bool secondSquareColor = false; ... ... ... |
We have Containers that display blue or pink depending on this bool. For false, we display blue for both booleans. We look to Page2’s radio edits in order to know how to color our Containers.
|
1 2 3 4 5 |
Container( height: 150, width: 150, color: firstSquareColor == false ? Colors.blue : Colors.pink ), |
At the very bottom of page 1, we have a button that goes to page2 in order to change radio btns:
|
1 2 3 4 5 6 |
RaisedButton( ... onPressed: () { _navigateNextPageAndretriveValue(context); } ), |
It calls _navigateNextPageAndretriveValue in order to use Navigator to navigate to page 2.
Now look at this function _navigateNextPageAndretriveValue:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
_navigateNextPageAndretriveValue(BuildContext context) async { print('_navigateNextPageAndretriveValue'); print('...awaiting Navigator.push ....'); final List nextPageValues = await Navigator.push( context, MaterialPageRoute(builder: (_) => PageTwo()), ); // waits right here for nextPageValues to be populated by Page2 // other code } |
Basically its an async function because we wait for the results that returns from when the next page (page2) pops.
So let’s see what happens when at page2.
We have two properties to maintain the bools.
page2.dart
|
1 2 3 4 5 6 7 8 9 10 11 12 |
class PageTwo extends StatefulWidget { @override _PageTwoState createState() => _PageTwoState(); } class _PageTwoState extends State<PageTwo> { bool firstValue = false; bool secondValue = false; ... .. ... } |
So we have a switch that takes this value. When the user clicks on the radio button to switch bool, firstValue and secondValue will be updated due to setState.
page2.dart
|
1 2 3 4 5 6 7 8 9 10 |
CupertinoSwitch( value: firstValue, onChanged: (bool value) { setState( () { firstValue = value; }, ); }, ), |
Now, when you’re ready, you push the save button. Remember in Page1 where we have the _navigateNextPageAndretriveValue function?
That function is currently awaiting Navigator.push(…). Our page2 is the result of that. And once we Navigator.pop here, with our list of firstValue and secondValue, this list will be returned to _navigateNextPageAndretriveValue.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
RaisedButton( elevation: 15, color: Colors.grey[700], child: Text( '<- Save temporarily and go to previous Page', textAlign: TextAlign.center, style: TextStyle(color: Colors.black, fontSize: 15), ), onPressed: () { Navigator.pop(context, [ firstValue, secondValue ]); //multiple values are passed using a list }), |
Now these two bools will be in nextPageValues.
|
1 2 3 4 5 |
final List nextPageValues = await Navigator.push( //list to store multiple popped values context, MaterialPageRoute(builder: (_) => PageTwo()), ); |
Then in Page 1, we simply set its properties to the values presented in nextPageValues array.
|
1 2 3 4 5 6 |
setState(() { firstSquareColor = nextPageValues[ 0]; //zero index for 1st popped value of first container secondSquareColor = nextPageValues[ 1]; //first index for 2nd popped value of second container }); |
Source
main.dart
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import 'package:flutter/material.dart'; import 'page1.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData.dark(), home: Scaffold( appBar: AppBar( title: Text('Page 1'), ), body: PageOne(), ), ); } } |
page1.dart
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
import 'package:flutter/material.dart'; import 'page2.dart'; class PageOne extends StatefulWidget { @override _PageOneState createState() => _PageOneState(); } class _PageOneState extends State<PageOne> { bool firstSquareColor = false; bool secondSquareColor = false; _navigateNextPageAndretriveValue(BuildContext context) async { print('_navigateNextPageAndretriveValue'); //this takes the values popped from page2 screen, using async and await print('...awaiting Navigator.push ....'); final List nextPageValues = await Navigator.push( //list to store multiple popped values context, MaterialPageRoute(builder: (_) => PageTwo()), ); print(nextPageValues); print('Now that we have nextPageValues, we setState for the color values'); setState(() { firstSquareColor = nextPageValues[ 0]; //zero index for 1st popped value of first container secondSquareColor = nextPageValues[ 1]; //first index for 2nd popped value of second container }); } @override Widget build(BuildContext context) { return Center( child: Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ Container( height: 150, width: 150, color: firstSquareColor == false ? Colors.blue : Colors.pink), Container( height: 150, width: 150, color: secondSquareColor == false ? Colors.blue : Colors.pink), Container( height: 50, width: 150, child: RaisedButton( elevation: 15, color: Colors.grey[700], child: Text( 'Next Page ->', style: TextStyle(color: Colors.black, fontSize: 17), ), onPressed: () { _navigateNextPageAndretriveValue(context); }), ), SizedBox( height: 120, ), ], ), ); } } |
page2.dart
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
import 'package:flutter/material.dart'; import 'package:flutter/cupertino.dart'; class PageTwo extends StatefulWidget { @override _PageTwoState createState() => _PageTwoState(); } class _PageTwoState extends State<PageTwo> { bool firstValue = false; bool secondValue = false; //NOTE: values will default back unless stored in device storage using shared preferences @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Page 2'), automaticallyImplyLeading: false, //to disable going back when swiped since that will not setState ), body: Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 'Flip to change first square color ', textAlign: TextAlign.center, ), Container( child: CupertinoSwitch( value: firstValue, onChanged: (bool value) { setState( () { firstValue = value; }, ); }, ), ), ], ), Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 'Flip to change second square color ', textAlign: TextAlign.center, ), Container( child: CupertinoSwitch( value: secondValue, onChanged: (bool value) { setState( () { secondValue = value; }, ); }, ), ), ], ), Container( height: 60, width: 170, child: RaisedButton( elevation: 15, color: Colors.grey[700], child: Text( '<- Save temporarily and go to previous Page', textAlign: TextAlign.center, style: TextStyle(color: Colors.black, fontSize: 15), ), onPressed: () { Navigator.pop(context, [ firstValue, secondValue ]); //multiple values are passed using a list }), ), SizedBox( height: 120, ), ], ), ); } } |