Stateful and Stateless Widgets in Flutter-Dart Android App Developnment
Stateful and Stateless widgets
Stateful and Stateless widgets can be better explained by a Static HTML website and a Dynamic HTML website
Stateless Widget:
Stateless widget is a Flutter widget which is used for the Static Functionality of the Mobile Applications...
Its just like as an Static HTML website, Where the Page does not change in any Manner Dynamically
Stateless Widget Comes with some basic widgets such as Text, Raised Button, Icons, FlatButtons, ImageAssest etc
In a Stateless widget as the name says there will be no change in the State of the App as the Time passes which is often ment as no change in State or Statless.
If you Started creating your First HelloWorld Application with Flutter then it's probably built with a Stateless widget.
Code for Stateless widget:
import 'package:flutter/material.dart';
void main(){
runApp(
new MaterialApp(
title: 'Stateless widget',
home: new Interface(),
)
);
class Interface extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new Center(
child:new Text("Hello World"),
);
}
}
Alright, I hope you got an Idea of what Stateless widget actually mean by in Flutter, Lets talk about StateFul widget in Flutter.
StateFul Widget:
Unlike Stateless widget a StateFul widget Generally Changes with Time or Changes based on the Actions from the User. Such as Clicking on a Button etc.
As Shown in the Figure above from the UI action the StateChanges and the State goona Update and Rebuilds the Widget and Updates UI to reflect the changes .
To understand in detail check this Example of the Calculator Application build with StateFul widget from Flutter.
Copy Paste this Code in main.dart ...and Build the Application.
In this Application based on the Inputs in the Text Fields and Raised Button Actions the State Changes. and Performs Sum, Subraction, Multiplication, Division.
import 'package:flutter/material.dart';
void main(){
runApp(
new MaterialApp(
title: "Calculator",
home: new Interface(),
)
);
}
class Interface extends StatefulWidget{
@override
State<StatefulWidget> createState() {
return new interfaceState();
}
}
class interfaceState extends State<Interface>{
final Cont1 = TextEditingController();
final Cont2 = TextEditingController();
double val = 0;
void sum(){
setState(() {
val = double.parse(Cont1.text) + double.parse(Cont2.text);
Cont1.text = "";
Cont2.text = "";
});
}
void sub(){
setState(() {
val = double.parse(Cont1.text) - double.parse(Cont2.text);
Cont1.text = "";
Cont2.text = "";
});
}
void mul(){
setState(() {
val = double.parse(Cont1.text) * double.parse(Cont2.text);
Cont1.text = "";
Cont2.text = "";
});
}
void div(){
setState(() {
val = double.parse(Cont1.text) / double.parse(Cont2.text);
Cont1.text = "";
Cont2.text = "";
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Colors.white,
appBar: new AppBar(
title: new Text("Calculator"),
),
body: new Container(
padding: const EdgeInsets.all(10.0),
child: new Column(
children: <Widget>[
new TextField(
decoration: new InputDecoration(labelText: "Enter your number"),
keyboardType: TextInputType.number,
controller: Cont1,
),
new TextField(
decoration: new InputDecoration(labelText: "Enter your number"),
keyboardType: TextInputType.number,
controller: Cont2,
),
new Row(
children: <Widget>[
new RaisedButton(onPressed: ()=>sum(),
color: Theme.of(context).accentColor,
elevation: 4.0,
splashColor: Colors.blueGrey,
child:new Text("+",style: new TextStyle(color: Colors.white),),
),
new RaisedButton(onPressed: ()=>sub(),
color: Theme.of(context).accentColor,
elevation: 4.0,
splashColor: Colors.blueGrey,
child:new Text("-",style: new TextStyle(color: Colors.white),),
),
new RaisedButton(onPressed: ()=>mul(),
color: Theme.of(context).accentColor,
elevation: 4.0,
splashColor: Colors.blueGrey,
child:new Text("x",style: new TextStyle(color: Colors.white),),
),
new RaisedButton(onPressed: ()=>div(),
color: Theme.of(context).accentColor,
elevation: 4.0,
splashColor: Colors.blueGrey,
child:new Text("/",style: new TextStyle(color: Colors.white),),
),
],
),
new Expanded(
child: new Text(
"Value : $val",
style: new TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
),
),
),
],
)),
);
}
}
Comments
Post a Comment