Flutter - Introduction with Flutter widgets.

Flutter is a mobile framework that is built by Google. Which helps in creating modern mobile apps for iOS and Android using a single(almost) code base. It’s a new entrant in the cross-platform mobile application development and unlike other frameworks like React Native. Flutter is a really interesting piece of technology that can prove very useful in many situations both for indie developers as well as software companies. 

If you have not installed and setup Flutter. I recommend do it from Flutter - Installation, and Introduction,  that's we need to implement some examples.


Flutter Widgets
In Flutter, every UI component is a Widget. You can compose your whole application UI with Widgets that contain other Widgets.

These widgets arranged in a hierarchical order to be displayed onto the screen. The widgets which can hold widgets inside it are called Container Widget. Most of the layout widgets are container widgets except for the widgets which does a minimal job like Text Widget. You can imagine a hierarchy of widget with bellow diagram.  

Widget's in Flutter either be a StatelessWidget or a StatefulWidget: 

Flutter StatelessWidget
A stateless widget can only be drawn only once when the Widget is loaded, which means we can’t redraw the Widget based on any events or user actions. A Stateless widget has no internal state to manage. Stateless widgets are immutable, meaning that their properties can’t change. Icon, IconButton, and Text are examples of stateless widgets.

We can see stateless behavior by having a Checkbox Widget. Which has handler functions for Checkbox click, However, to display the checkbox with the click, we need to redraw the Widget which is only possible with hot reload or by reloading the widget itself.
As you can see, how the stateless widget with a checkbox shall look like:

StatelessWidget

class MyApp extends StatelessWidget {
  MyApp({this.TextInput});
  final Widget TextInput;
  bool checkBoxValue = false;
  @override
  Widget build(BuildContext ctxt) {
    return new MaterialApp(
      title: "MySampleApplication",
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("Hello Flutter App"),
        ),
        body: new Center(
          child: new Column(
            children: <Widget>[
              TextInput,
              new Checkbox(
                  value: checkBoxValue,
                  onChanged: (bool newValue){
                    checkBoxValue = newValue;
                  }
              )
            ],
          ),
        )
      ),
    );
  }
}

As you can see while running this code that nothing happens when we click the checkbox unless we reload the widgets.

Flutter StatefullWidget
A stateful widget is dynamic. The user can interact with a stateful widget by typing into a form, moving a slider. Checkbox, Radio,  and TextField are examples of stateful widgets, which subclass StatefulWidget.

Stateful Widget

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Column(
          
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text(
              'You have pushed the button this many times:',
            ),
            new Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ), 
    );
  }
}

In this example, a floating button is added and by the time it is pressed the method _incrementCounter will be called. When updating the state, the build method is called again and another text is built with the new amount of times the button was pressed. 

We can use one of above for design application UI. If you have any doubt, please feel free to clarify that in the comment section below.