Click here to Skip to main content
13,662,169 members
Click here to Skip to main content
Add your own
alternative version

Stats

2.1K views
32 downloads
3 bookmarked
Posted 9 Jul 2018
Licenced CPOL

Flutter Getting Started: Tutorial 2 - StateFulWidget

, 9 Jul 2018
Rate this:
Please Sign up or sign in to vote.
Let explore the world of StateFulWidget with respect to Flutter

Introduction

In this article I would be discussing very important concept in flutter, which is StateFulWidget, If you have read my first article, I created all widget there, which are Stateless whose definition according to Flutter website is that widget is immutable, meaning that their properties couldn’t be change – all values are final, once displayed.

So why we use of such language/ framework, when we can’t change anything on the Mobile screen? Answer lies in Flutter developer excellent architectural approach which is StateFulWidget, which maintain state that might change during the lifetime of the widget.

Background

Implementing a stateful widget requires at least two classes which are :-

  1. A StatefulWidget class that creates an instance of a State class
  2. The StatefulWidget class is, itself, immutable, but the State class persists over the lifetime of the widget

We discuss about it more during this tutorial

Aim of Tutorial

I am going to create small mobile application which will contain following things :-

  1. AppBar displaying the application name
  2. TextField to accept user input
  3. ButtonBar with two buttons
    1. Clear button : to clear text in TextBox
    2. Add City button: to add user input in the  list view 
  4. ListView to persist what ever user input is

Overall, basic idea it to create list of city visited in app, this will show how StateFulWidget refresh screen, when there is change in any value of the widget/class

Using the code

So lets dive in the application directly, here the steps to follow, if you like to make your hand dirty

  1. Open Android Studio and create a new flutter project by name flutter2_sfw (short form for StateFulWidget). if using Visual Studio Code, use command flutter create flutter2_sfw in terminal window. Please make sure Flutter bin path should be in your environment path variable.
  2. Once the project is created, following would be basic  structure of the solution
  3. Now in main.dart file under lib folder, delete everything and write following code
    import 'package:flutter/material.dart';
    import 'package:flutter2_sfw/widgets/mainpage.dart';
    
    void main() => runApp(new MyApp());
    
    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return new MaterialApp(
          title: 'Flutter Demo',
          theme: new ThemeData(
            primarySwatch: Colors.amber,
          ),
          home: new MainPage(title: 'Flutter 2 - Add City'),
        );
      }
    }

    Explaination of code 

    • Here we creating our main widget, which would be starting point of our mobile app
    • MyApp is StatelessWidget which will host our StateFulWidget as first page, that's why we passing MainPage (to be created) as object
  4. Now right click on lib folder and click on new and add package to folder by name widgets
  5. Add new dart file by name mainpage.dart, which will have code of our Stateful widget
  6. Difference between StateFul and Stateless widget, for creation of StateFulWidget, you requires atleast two classes, one the actual page and other class holding state of page
    class MainPage extends StatefulWidget {
      MainPage({Key key, this.title}) : super(key: key);
      final String title;
      @override
      _MainPageState createState() => new _MainPageState();
    }
    
    class _MainPageState extends State<MainPage> {
    
    @override
    Widget build(BuildContext context) {
      return new Scaffold(
          appBar: new AppBar(
            title: new Text(widget.title),
          ));
    }

    Explaination of code 

    • Here we create MainPage class which is inheriting from StateFulWidget
    • we override createState() function and provide it with linked state class
    • _MainPageState class which is extending generic state of MainPage, would contain the code for building up the UI
    • if run our project at this point, this would be view in Emulator
  7. Now its time to add TextField and the buttons on the body of scaffold from above step, the build function would look like this 
    Widget build(BuildContext context) {
      return new Scaffold(
          appBar: new AppBar(
            title: new Text(widget.title),
          ),
          body: new ListView(
              padding: const EdgeInsets.symmetric(horizontal: 5.0),
              children: <Widget>[
                new TextField(
                  decoration: InputDecoration(
                    filled: true,
                    labelText: 'City Name',
                  ),
                  controller: _cityNameController,
                ),
                new ButtonBar(
                  children: <Widget>[
                    new RaisedButton(
                      onPressed: () {
                        _cityNameController.clear();
                      },
                      child: new Text('Clear'),
                    ),
                    new RaisedButton(
                      child: new Text('Add City'),
                      onPressed: _onAddCityBtnPressed,
                      color: Colors.amber,
                    )
                  ],
                ),
              ]
          )
          );
    }

    New class members (_MainPageState)

    final TextEditingController _cityNameController = TextEditingController();
    final List<Widget> _lstText = new List<Widget>();

    _onAddCityBtnPressed() function 

    This function will called when we press Add City button in the application.
    _onAddCityBtnPressed() {
      setState(() {
        _lstText
            .add(
            new Text("${_lstText.length + 1} ${_cityNameController.text}",
              textAlign: TextAlign.justify,
              style: new TextStyle(fontWeight:FontWeight.bold),));
        _cityNameController.clear();
      });

    Explaination of code 

    • Here we have created a ListView control, its a scrolling control, allow you to put multiple widgets which could be scrolled vertically. Don't worry if you don't understand it now, I would be writing separate article for ListView, discussing all prominent properties and methods provided by it.
    • Since it could take multiple children, first children we would be adding would be of TextField, we have two properties of TexField Here
      • controller - This will act as object for setting and getting values from the screen. Here we are passing class member _cityNameController.
      • decoration - This property would define UI of textfield, I provided labelText which is 'Add City' and filled as true
    • Second child is ButtonBar, which provide template for adding multiple buttons, I have created two RaisedButton, first one would clear content of the TextField and other button would add whatever text present in TextField into local list by name _lstText
      • Clear Button : OnPressed will call _cityNameController.clear();, which will clear textField control.
      • Add City Button : OnPressed will call _onAddCityBtnPressed() method, whose working I will tell in next step
    • _onAddCityBtnPressed() - would add what ever present in the TextField into the _lstText and clear the textField._lstText is of type List, you can read more about it from my other article here.
    • If you havn't notice, when we updating the _lstText, is wrapped inside the setState() function, its is there to indicate to framework, some object are updated and you need to refresh state.
  8. Now time to add magic, till completion of point 7, we are able to take user input and store it in class variable, however nothing is displayed on the screen,even after we setting state and making framework aware that we are updated something. Now its time to add our ListView which will update itself whenever the _lstText is updated. I have created two function two handle this scenario, add  getListViewBuilder() function in the build function of _MainPageState and I have added these two function for creating ListView 
    // Provide ListView from ListView.builder
    ListView getListViewBuilder() {
      return new ListView.builder(
        shrinkWrap: true,
        itemCount: _lstText.length,
        padding: const EdgeInsets.symmetric(horizontal: 5.0, vertical: 5.0),
        itemBuilder: getListItems,
      );
    }
    
    // Call back function, will called for each item in the
    Widget getListItems(BuildContext context, int index) {
      return _lstText[index];
    }

    Explaination of code 

    • Here we created ListView with help of ListView.builder by passing itemCount and callback function for itemBuilder property
    • getListItems() function would return the widget based on index passed by callback function to it. 
  9. Final Run

 

Here we reached end of this article, Please let me know you comment in message board. Thanks

Points of Interest

Please go through these articles. It might give a headway, where the wind is actually flowing:

  1. Flutter — 5 reasons why you may love it
  2. What’s Revolutionary about Flutter
  3. Why Flutter Uses Dart
  4. Github: https://github.com/thatsalok/FlutterExample/tree/master/flutter2_sfw

Flutter Tutorial

  1. Flutter Getting Started: Tutorial #1

Dart Tutorial

  1. DART2 Prima Plus - Tutorial 1
  2. DART2 Prima Plus - Tutorial 2 - LIST

History

  • 09-July-2018: First version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

ThatsAlok
Software Developer (Senior)
India India
He used to have biography here Smile | :) , but now he will hire someone (for free offcourse Big Grin | :-D ), Who writes his biography on his behalf Smile | :)

He is Great Fan of Mr. Johan Rosengren (his idol),Lim Bio Liong, Nishant S and DavidCrow and Believes that, he will EXCEL in his life by following there steps!!!

He started with Visual C++ then moved to C# then he become language agnostic, you give him task,tell him the language or platform, he we start immediately, if he knows the language otherwise he quickly learn it and start contributing productively

Last but not the least, For good 8 years he was Visual CPP MSMVP!

You may also be interested in...

Pro
Pro

Comments and Discussions

 
SuggestionNice Tutorial Pin
Meshack Musundi14-Jul-18 4:05
professionalMeshack Musundi14-Jul-18 4:05 
PraiseRe: Nice Tutorial Pin
ThatsAlok26-Jul-18 6:27
memberThatsAlok26-Jul-18 6:27 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web05-2016 | 2.8.180810.1 | Last Updated 9 Jul 2018
Article Copyright 2018 by ThatsAlok
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid