Stateful Vs Stateless Widget

I. In Brief:

Stateless: Parent widget help to set Children State (Raised Button, Text and Icon)
Stateful: Not regulated by parent, regulated itself by watching for any changes and updating the state (setState()).

II. Stateless:

Both are stateless. Stateful is associated with a state and is immutable (stateless).

Parent's Widget Relationship with Child's Widget
The parent widget is stateless because it does not care about its child's state. The stateful child itself (or technically Flutter) will take care of its own state.

III. Type of Widget:

Stateless: Raised Button, Text and Icon
Stateful: User interaction; form, slider & widget that changes over time, data feed causes the UI to update; Checkbox, Radio, Slider, InkWell, Form, and TextField

IV. Re-render:

Stateless: Depend on external data
Stateful: depend on internal state and re-render when input data or Widget's state changes.

V. Lifecycle

Stateful: 

Recycle Widget but not State (Why? More economical)(Why separate? State does not have getters and other methods)
*createState(): Mandatory, this expression is usually suffice.

mounted == true: BuildContext is the place in the widget tree, assigned to state after create state.  bool this.mounted = true. else setState will cause error.

*initState(): initState() {super.initState()}, first called (once and only) when method is c8
  • Initialize data that relies on the specific BuildContext for the created instance of the widget.
  • Initialize properties that rely on this widgets 'parent' in the tree.
  • Subscribe to Streams, ChangeNotifiers, or any other object that could change the data on this widget.

didChangeDependencies(): called after initState() when Widget is built/when object with data this widget depends on. Rarely needed as build is called after

build(): called often. Return widget
didUpdateWidget(): parent Widget changes
setState(): inform data change. Not async
deactivate() :State remove from Tree (but can be reinserted)
dispose(): State object is removed
mounted == false

Normally widgets have more constructor arguments, each of which corresponds to a property. 

3rd Element: Inherited Widget

Comments

Post a Comment

Popular posts from this blog

Setting up Terminal in Android Studio for Flutter and Bash Profile (For Mac)

Does your Commands in Android Studio not worked? Fret not, all you need to do is the following from Command Prompt: 1. Do you have a Bash Profile?] Go into your  user folder in finder . The .bash_profile file should be findable there. ->  HD/Users/[USERNAME] To reveal hidden file, press: Command + Shift + . nano .bashprofile or nano .bash_profile 2. Paste the correct directory export PATH=~/ Users/rigmiklos/Documents/ flutter/bin:$PATH Red Text: Directory contain flutter folder Hint for Mac User: Double tap on the Flutter.exe in Flutter>Bin>Flutter, and press"Get Info" to get Directory. 3. Ctrl + X to exit (No, this is not for default paste function) 4. Press Y to save changes. 5. To reload source .bashprofile Advance Reading for Bash Profile Official Doc for Setting up To navigate around Mac Command prompt: ls: show folders cd "folder name": to change directory Solution: Run Flutter Doctor manually or by Terminal / Users/...
Read more

Flutter Widget 101 Part 1 (Basic of Flutters, Layouts, Rows and Columns)

Image
1. What every programme starts with void main() => runApp( new MyApp()); "=>" is an operator and it  denotes   { return  expr ; } . () denotes method runApp will run MyApp() which is a widget. Besides running MyApp(), you can also play with runApp() function by doing the following: new Text(). Do remember to include the TextDirection. Text will appear on the top left hand corner of the screen. void main() { runApp( new Text( 'Hello World' ,textDirection: TextDirection. ltr ,)); } Make it centralised in the center through the following. void main() => runApp( new Center( child: new Text( 'Hello World' ,textDirection: TextDirection. ltr ,) ) ); 2.Declaring App/Widget to be run in runApp() void main() => runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context) { // TODO: implement build return null ; } } extends is the inheriting of...
Read more

Flutter Widget 101 Part 4 (Navigation and Drawers)

1. Drawer Official Doc Material Design has 2 mode of navigation, Tabs or/and Drawer. Drawer slide in horizontally Use ListView (Scrollable) or Column as Child ListTitle for each single row Details of User can be displayed with DrawerHeader , UserAccountsDrawerHeader onTap Behaviour can be set Wrapper: Material App > Scaffold > Drawer > ListView Drawer: When tapped on row, will change Text in Main Page void main(){ runApp( new MaterialApp(home: new DrawerTemp()),); } class DrawerTemp extends StatefulWidget { @override _DrawerTempState createState() => _DrawerTempState(); } class _DrawerTempState extends State<DrawerTemp> { String TextValue = "Original" ; @override Widget build(BuildContext context) { return Scaffold( appBar: new AppBar( title: new Text( "Drawer Test" ), backgroundColor: Colors. lightBlueAccent , ), drawer: new Drawer( child: new ListView( ...
Read more