In this blog we will learn about Widgets States in Flutter
Before going to know about widget states in Flutter let first know something about widget in flutter.
In flutter we use widget to make ui. To build any app in flutter we start it with widget.
It is the building block of flutter application.
We can compare widget with view in android, but the widget is more powerful then view.
Widgets are arranged in parent child tree like structure. The entire widget tree structure forms a layout or screen of app.
Flutter has a rich set off in-built widgets. Apart from this we can also create
own widgets according to need.
Partner with us for custom Flutter app development services.
Types Of Widgets
We can divide flutter widgets in two type.
1. Stateless Widgets
2. Stateful Widgets
What is state?
The State is information that can read synchronously when the widget is build and might change during their lifetime of the widget.
A information of properties of a widget can be determine from a state.
Stateless Widget:
We are all aware from immutable property means that remains unchanged.
Stateless widgets have immutable property.
They don’t change their state throughout the entire lifetime of widgets or Stateless widgets can’t change their state when app is running.
We can also say that widgets can’t be redraw while app is running.
For example- Icon and a text.
If widget doesn’t changes then it is stateless widgets.
For example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import 'package:flutter/material.dart'; void main() => runApp(StatelessWidgetExample()); class StatelessWidgetExample extends StatelessWidget { @override Widget build(BuildContext context) {return MaterialApp( home: Scaffold( backgroundColor: Colors.white, appBar: AppBar(backgroundColor: Colors.redAccent, title: Text("Stateless Widget Example"), ), body: Container(child: Center(child: Text("Stateless Widget "), ), ), ), ); }} |
Result:
Stateful Widgets
If a widget changes their behaviour througout their lifetime then it is stateful widgets.
Stateful widgets are dynamic widgets means that they are keep changes their state.
Staetful widgets can re-render or redraw when their state changes.
They can be updated during runtime ow while app is running based on user action or data change.
A stateful widget is implemented by two classes: a subclass of StatefulWidget and a subclass of State.
For Example: Checkbox, Radio Button
Let’s take below example in which button color gets changes and count value gets increased by one on every time button clicked.
|
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 |
import 'dart:html'; import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { int counter = 0; Color buttonColor = Colors.green; void changeColor() { counter++; if (buttonColor == Colors.green) { buttonColor = Colors.red; } else { buttonColor = Colors.green; } } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Statefull Widget Example'), backgroundColor: Colors.blueGrey[900], ), backgroundColor: Colors.white, body: SafeArea( child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ FlatButton( child: Icon( Icons.favorite, color: buttonColor, size: 80.0, ), onPressed: () { setState(() { changeColor(); print(counter); }); }, ), Text('Cliked Count: $counter'), Text('Click on favourite floating button') ], ), ), ), ), ); } } |
Result :
Want to know more about states of widgets in flutter click here.
Conclusion :
In this blog, we learn about states of widgets in flutter.
Hope ! this will help you in finding what you are looking for.
Thanks For Reading