How to Activate Top Fan Badge on Page
Comfy Ways to Extend to and Receive Data with Flutter Stateful and Stateless Widgets or Pages
2021 Novitiate App Developers Guide
This is the simplest and complete 2022 guide for novice flutter developers who are having trouble with passing/fetching data 'tween their flutter app pages. With the help of this, I'll as wel explain a teentsy more or less penning cleanser code at the oddment. I in person commemorate having trouble with this concept as a beginnner and bony a lot of time interpretation something i would ne'er comprehend, so im here writing this to make it simpler for others to memorise! Note: I wont be covering labyrinthian state management libraries like BLoC, Redux etc.
Stateful VS Stateless
Fair-minded for revisal's sake,
Stateful widgets are mutable and they update their information every time a setState((){data;}) is called.
Stateless widgets but then are changeless, i.e they contain information that shouldn't change during runtime.
Module 1: Passing Data to some other Stateful Widget Classify.
You can find my raw files for this as a github gist here → https://git.Io/JLdca
Here, we have ii files (excluding principal.fleet): page1.dart and page2.dart . The goal is to pass Color and String datatype values from page 1 to page 2 and display a container and schoolbook having the color and the color diagnose that we chose happening page1.
And then let's start, shall we?
- page1.dart
Here on the first paginate, in the onPressed callbacks of the two RaisedButtons, we telephone call the Navigator.push (to navigate to the back screen), passing the various values of the variables, like a shot to the constructor of the second page. Musical note that the BuildContext (present context) is the unchanged.
import 'page2.dart';
class PageOne extends StatefulWidget {
@overturn
_PageOneState createState() => _PageOneState();}
class _PageOneState extends DoS<PageOne> { @reverse
Widget progress(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Textbook('Choose color to be passed to next Page'),
RaisedButton( //button 1
colouring material: Colors.knock,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
detergent builder: (_) => PageTwo(
passedColor: Colours.pink,
passedColorName: 'Pinkish',
),),);},
child: Text('Pink')),
RaisedButton( //button 2
color: Colors.blueGrey,
onPressed: () {
Navigator.thrust(
context,
MaterialPageRoute(
constructor: (_) => PageTwo(
passedColor: Colors.blueGrey,
passedColorName: 'Naughty',
),),);},
nestling: Text('Blue'),
),],),);}}
In the highlighted code supra, we can observe that, depending on what button is pressed, different values (Colours.pink and 'Pinkish' or Colors.blueGrey and 'Blue') are minded to the variables passedColor (Color datatype) and passedColorName (String datatype),
Aft these values are passed to page2.dart, the following goal is to consume these values happening the second page, for which we will be victimization key: key, and and then either use gismo.passedColor / widget.passedColorName (where we will use the tender passed values without modification), or put in them in other variables (in that case we can modify the passed values). I'll excuse everything in a little.
- page2.dart
To use these values for food coloring the container on our second pageboy, we employment keys! As Emily from the Google team quoted,
Keys preserve body politic when widgets turn in your doohickey tree. In practice, this means they can glucinium useful to preserve the user's scroll location or keep state when modifying a assemblage.
Scratching your head twin? Don't interest hahaaha; IT'll all come to you with practice and time, for now, all you have to dress is canvass and remember the phrase structure that I deliver highlighted in the encrypt and if you want to go in the details, which I strongly recommend you do, read Emily's clause on medium or watch her youtube: https://youtu.be/kn0EOS-ZiIc
note: below, i am talking about the two approaches that a begginer would comprehend, without going into a little complex material like initState.
So, On that point are deuce approaches when it comes to overwhelming the values,
- Like a shot using the passed measure
In this grammatical case, we just usage the passed value from page 1 to page 2 (ne'er change/modify it).
We declare a final property with individual datatypes and add them to the constructor as a parameter. Today the data IT's accessible in the build occasion!
class PageTwo extends StatefulWidget { closing Color passedColor;
final String passedColorName;
const PageTwo(
{Key Florida key, this.passedColor, this.passedColorName})
: super(key: discover); // crack is wont to yell the builder of the base class which is the StatefulWidget here @override
_PageTwoState createState() => _PageTwoState();
}
class _PageTwoState extends State<PageTwo> {
@overrule
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Varlet 2'),
automaticallyImplyLeading: simulated, //nonmandatory: removes the default back arrow
),
body: Column(
children: [
Container(
tiptop: 400,
width: double.infinity,
color: widget.passedColor,
),
Textual matter('${widget.passedColorName} color was passed'), //${} sign Here prints the prize of variable inside it. RaisedButton(
color: Colors.achromatic,
onPressed: () {
Navigator.pop(context);
},
child: Text edition('<- Go back'))
],),);},}
Sol, having access to the information in the shape, we can just set the container's color to widget.passedColor and it should countersink the value to the value we chose on page1! YIPPEE, it kit and caboodle!
But… what if we wanted to qualify the color along the second page? For this, we employment the moment approach
2. Storing the passed value in a different variable before victimisation it
class PageTwo extends StatefulWidget {
final Color passedColor;
final String passedColorName;
const PageTwo({Key key, this.passedColor, this.passedColorName})
: super(identify: key); @override
_PageTwoState createState() => _PageTwoState(
passedColor: this.passedColor, passedColorName: this.passedColorName);
}class _PageTwoState extends State<PageTwo> {
Color passedColor;
Chain passedColorName;
_PageTwoState({this.passedColor, this.passedColorName}); @reverse
Doohickey build(BuildContext context) {
give Scaffold(
appBar: AppBar(
title: Text('Page 2'),
automaticallyImplyLeading: false, //to disable loss back
),
body: Editorial(
children: [
Container(
height: 400,
width: treble.infinity,
color: passedColor,
),
Text('$passedColorName color was passed'),
//$ and ${} is the same thing, {} is good used if its not one word RaisedButton(
color: Colors.grey,
onPressed: () {
Sailing master.pop(linguistic context);
},
tike: Text('<- Recover'))
],),);}}
The additional steps this approach has from attack 1, are the ones highlighted to a higher place,
i.e We have to add parameters in _PageTwoState() which passes the values, which then we set to a different assess (passedColor and passedColorName in this caseful), which will now behave arsenic though they were initialized with those passed values
Congratulations on completing the first module! Such a quick learner! Now put connected those programmer dark glasses and navigate with me to the next module. Got the punning? HA ha! Ha Hour angle! Ahem, excuse me.
Mental faculty 2: Fetching Information from another Stateful Whatchamacallum Form.
You tin find my raw files for this arsenic a github gist here → https://git.io/JLdue
What if we needed to pass data rearwards to paginate one, for e.g we were making a settings/theme paginate for a half-size app. I will point you just that.
line: since flutter aside default on doesnt persist app information on reload, you will suffer to utilize plugins like shared preferences to wrap elliptic data into platform-specific persistent storage (NSUserDefaults on iOS, SharedPreferences on Android, etc.). For larger databases utilisation sqflite and path/path provider, but thats not important now.
Here we also have cardinal files(excluding main.dart): page1.scud and page2.dart
The goal here is to navigate to page 2, check what boolean valuate has the drug user set the Cupertino switches to, and if the value is true, then change the color of the several container displayed on page 1 to pink.
I used Cupertino toggles instead of buttons (which would have been mode easier), just to render the possibilites and also to teach a bit about switches, because why not? More the knowledge the merrier it is, right?!
- page1.flash
Here we will first enclose the Navigator.push within an async function and await for its result. Then on the secondment screen, we will pass the boolean value of the switch to the Navigator.pop indorse to the first riddle.
Basically async and await here wait for the function to first finish (do all the business on page2) before returning anything as a value.
import 'package:flutter/fabric.dart
separate PageOne extends StatefulWidget {
@nullification
_PageOneState createState() => _PageOneState();
}
class _PageOneState extends State<PageOne> {
bool firstSquareColor = assumed; //since dispiriting by default
bool secondSquareColor = false; //since blue by default option _navigateNextPageAndRetriveValue(BuildContext context) async {
final List nextPageValues = await Sailing master.push(
context,
MaterialPageRoute(builder: (_) => PageTwo()),
);
setState(() {
firstSquareColor = nextPageValues[0]; //first element is stored at the 0th index for a list
secondSquareColor = nextPageValues[1];
});} //code continues below
This above piece of code, using async and await function, takes the values popped from the page2 screen.
Now to store these values (firstSquareColor and secondSquareColor), we use a list (hither called nextPageValues), which stores values as its elements.
@override
Widget build(BuildContext context) {
return Center(
nestling: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
stature: 150, width: 150,
coloring material: firstSquareColor == false ? Colors.uncheerful : Colors.pink),
Container(
height: 150, breadth: 150,
color: secondSquareColor == false ? Colors.blue : Colors.pink),
//code continues below The code supra is for the ii colored containers which check if the values firstSquareColor and secondSquareColor (which we set atomic number 3 the values we bequeath get from page two later) are true or false, using something called as a ternary operator in hoo-ha,. Ternary operators have the syntax → condition ? trueStatement : falseStatement . Hence they function American Samoa a shorter variety of an if else statement.
If the value is true, that means the swop on next page has returned true (its toggled happening), thus we now set the color to pink.
Container(
height: 50, breadth: 150,
child: RaisedButton(
elevation: 15,
color: Colours.Zane Grey[700],
child: Text(
'Next Page ->',
style: TextStyle(color: Colors.black, fontSize:
17),), onPressed: () {
_navigateNextPageAndRetriveValue(context);
}, ),),
],),);}}
This above grey container is the navigator for the next page. We have already successful a purpose _navigateNextPageAndRetrieveValue, which we will now call and pass the aforesaid context to IT.
- page2.dart
Now that we have statute the code in page1.dart to accept values using async-wait and change container coloring material according to the values accepted,
Our next goal is to read the measure that the user has given to the Cupertino toggle on page2, which we testament store in new boolean variables (called firstValue and secondValue), then Navigator.popping these values American Samoa a list to page1.
class PageTwo extends StatefulWidget {
@override
_PageTwoState createState() => _PageTwoState();
}
class _PageTwoState extends State<PageTwo> {
bool firstValue = fictive;
bool secondValue = false;
//inscribe continues downstairs NOTE: Unless stored in device persistent storage victimization plugins like divided up preferences, these deuce values above (firstValue and secondValue) will always default option rearmost to 'false' along app resume / re-navigation to the page.
@override
Thingamajig build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Pageboy 2'),
automaticallyImplyLeading: pretended, //to disable going to page1 when used swipe right ios gesticulate happening the test, because we want to pop the values, when we navigate back, which we are only doing it here with a RaisedButton
),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.marrow,
children: [
Text(
'Summersault to change first square color ',
textAlign: TextAlign.center,),
Container(
child: CupertinoSwitch( //first switch
value: firstValue,
onChanged: (bool apprais) {
setState(
() {
firstValue = value;
},);},),
),],),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Toss to change second square color ',
textAlign: TextAlign.center,
),
Container(
child: CupertinoSwitch( //second switch
value: secondValue,
onChanged: (bool value) {
setState(
() {
secondValue = value;
},);},
),),],),
//codification continues beneath 
The value is set to true in the first off case, so the boolean variable firstValue is also set to real, in the second case the value is defaulted to false, since it seems to be untouched past the user, so secondValue clay set to false.
Container(
altitude: 60,
width: 170,
child: RaisedButton(
elevation: 15,
color: Colors.Lady Jane Grey[700],
child: Text(
'<- Relieve temporarily and go to previous Page',
textAlign: TextAlign.inwardness,
mode: TextStyle(semblance: Colors.black,
fontSize: 15),
),
onPressed: () {
Sailing master.pop music(context, [firstValue, secondValue]
); //multiple values are passed using a list
},
),),
],),);}} Finally!, we put under these values in Navigator.pop(context, [valueOne, valueTwo]) As shown in a higher place, which should number inside an onPressed of a RaisedButton.
Drumhead TIME!
In page1.flutter, we had a function titled _navigateNextPageAndRetriveValue (called by an onPressed of a RaisedButton later in the code with passed context), which created a new list called nextPageValues.
This new list anticipated for the Sailing master.push to pop the result passed as a list in page2.dart. On receiving the list of boolean values, it stored them as its elements, which later are then precondition to a different boolean variables (firstSquareColor and secondSquareColor) using firstSquareColor = nextPageValues[0]; and secondSquareColor = nextPageValues[1];
Then we used tierce operaters so know the value of these variables and set the color severally!
Congrats! you completed yet another mental faculty, what a fable.
Now that we have complete the harder part, we come to a part that shows how easy information technology is to pass information between stateless widgets since there is not much call for here as the Thingamajig being Stateless, itself wouldn't refresh during runtime. I testament also cover how to write clean code and cost a better developer in the next and last module.
Module 3: Passing data 'tween Unsettled Widgets and making custom widgets to write dry cleaner encrypt
You can find my raw files for this as a github gist hither → https://git.io/JLdHK
The end here is to make a custom widget that displays a container and the semblance passed to it, this non only helps us write less code but also makes IT easier to debug and understand afterward.
void chief() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build up(BuildContext context) {
return MaterialApp(
theme: ThemeData.incomprehensible(),
rest home: Scaffold(
appBar: AppBar(
title: Text('Stateless/Clean Code'),
),
consistency: StatelessOne(),),);}
}
sort out StatelessOne extends StatelessWidget {
@override
Widget body-build(BuildContext context) {
return Center(
nestling: Newspaper column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
'Gubbins color nates glucinium tailored without \nhaving to retype the entire code'), StatelessTwo(myColor: Colors.green),
StatelessTwo(myColor: Colours.ping),
StatelessTwo(myColor: Colors.blue),
StatelessTwo(myColor: Colors.orange), //calling the custom widget which we will make infra ],),);}
}
Atomic number 3 we can see from the preceding app screenshot, we need to make four similar containers which simply differ in color. Therefore, instead of authorship the whole container computer code and giving each of them the same properties like height and width time and time again, we come with a cleansing agent solution.
We make a usage widget! and using my intense creative skills name it StatelessTwo.
As you can see below, this new customised thingumabob has a final class property of type Color called myColor. Then we have a constructor that will construct the object. Now inside the build, we will put the part that was supposed to make up repetitive, container in that case, and allot the myColor variable to the values that are meant to be metamorphic afterwards. Naturally, the container color in this case.
You're all set! , now hardly call this widget as a child inside your StatelessOne by typing StatelessTwo(myColor: Colors.yourchoice); Also now this custom widget should work just care a container that has fixed height and width but variable color.
grade StatelessTwo extends StatelessWidget {
final Coloration myColor;
StatelessTwo({this.myColor});
@override
Widget anatomy(BuildContext context) {
return Container(
meridian: 120,
width: 250,
colouring: myColor,
small fry: Center on(child: Text('Your Repetitive Widget')),
);}
} Bonus Knowledge! : Point arguments vs Named Arguments for the constructor:
Positional Arguments: These simply take values in the duplicate order as they are passed in. Syntax:
1)StatelessTwo(this.myColor, this.someOtherValue); → Constructor. 2)StatelessTwo(yourColor, yourSomeOtherValue); → Calling.
Since we have only indefinite value (myColor) that is passed, we can use Point Arguments, but i have used named, since i personally experience its a good praxis.
Onymous Arguments: Sometimes we have too many arguments and it becomes hard to call up the order, hence in such cases we use named arguments. Hither the order in which we pass them doesnt matter. Syntax:
1)StatelessTwo({this.myColor, this.someOtherValue}); → Constructor. 2)StatelessTwo(someOtherValue: yourSomeOtherValue, myColor: yourColor); → Calling. (see we can switch like this and it wouldnt matter)
To conclude,
With the help of this clause, I hope you interpreted :
- About the simple ways in which we could pass and fetch values from widgets, may it be a Stateful Beaver State a Stateless unitary.
- How to write cleansing agent encrypt and divide your app into custom widgets.
Thank you for reading! If u have any doubts/suggestions Oregon found something I wrote incorrectly in this article, you can feel free to assign information technology in the comments or email ME: yaashwardhan@gmail.com. I have linked the respective GitHub gist in every module. Just remember,
"Knowledge is Power. Noesis Shared is World power Multipled"
How to Activate Top Fan Badge on Page
Source: https://medium.com/swlh/the-simplest-way-to-pass-and-fetch-data-between-stateful-and-stateless-widgets-pages-full-2021-c5dbce8db1db
