Flutter Development (Day -03)

Stateless vs Stateful Widgets

Stateless Widget

• The widget that doesn't has any state which can be mutable is known as Stateless widget.
• This widget doesn’t require any mutable state and will be used at times where other than the data that is initially passed into the object.
• Ex. Text,Raised Button,Icon,......

Stateful Widget

• Stateful widgets are dynamic. They allow us to create widgets which can dynamically change their content over time and don’t rely on static states which are passed in during their instantiation. This may change due to user input, some form of asynchronous response or reactively from another form of state change.
• Ex. Checkbox,Radio Button,Form,Image,........

For Maintaining state in Flutter apps there are so many ways by default it provides setState.  

For more info on Stateful and Stateless widgets visit here.

We will discuss more in further tutorials by doing some real time projects.

Scrollable Widgets

• In Flutter Column and Row are only provides up to device width but when we have large list of items which should be scrolled then List view comes into picture.
• List view enables us to scroll over the list.    
• For learning fundamentals of Dart visit : click here.

Data types in Dart:

• Numbers (Integer, Double)
• Strings (String)
• Boolean (bool)
• Lists (List)
• Maps (Map<String,dynamic>)

In below example I used final as keyword which is similar to const in Javascript

final vs const

• const data type changes at compile time but final doesn't change even at run time when we want to modify final we will get some weird errors.

• All source code : Click Here

Source Code with Explanation: 

lib/main.dart:

import 'package:allaboutflutterblog/tuts/showing_basic_widgets.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: ShowingBasicWidgets(),
      debugShowCheckedModeBanner: false,
    ),
  );
}

import 'package:flutter/material.dart';

class ShowingBasicWidgets extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // scaffold gives default structure of the app by giving appbar and body
    return Scaffold(
      appBar: AppBar(
        title: Text("Basic widget example"),
      ),
      body: Padding(
        //Gives padding from all the sides of 8px
        padding: const EdgeInsets.all(8.0),
        child: Center(
          // Centers all the elements
          child: Column(
            // Aligns all the widgets vertically
            children: <Widget>[
              Container(
                height: 150.0,
                width: 150.0,
                padding: const EdgeInsets.all(8.0),
                color: Colors.redAccent,
                child: Center(
                  child: Text("Container"),
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(
                  bottom: 8.0,
                  top: 8.0,
                ),
              ),
              Text(
                "Text-Widget: Showing Some Basic Widgets Example",
              ),
              Padding(
                padding: const EdgeInsets.only(
                  bottom: 8.0,
                  top: 8.0,
                ),
              ),
              Row(
                // Aligns all the widgets horizontally
                children: <Widget>[
                  Container(
                    height: 100.0,
                    width: 100.0,
                    color: Colors.redAccent,
                    child: Center(
                      child: Text(
                        "Row-Container",
                      ),
                    ),
                  ),
                  Container(
                    height: 100.0,
                    width: 100.0,
                    color: Colors.blueAccent,
                    child: Center(
                      child: Text(
                        "Row-Container",
                      ),
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.only(
                      left: 20.0,
                    ),
                  ),
                  Column(
                    children: <Widget>[
                      Container(
                        height: 100.0,
                        width: 100.0,
                        color: Colors.redAccent,
                        child: Center(
                          child: Text(
                            "Column-Container",
                          ),
                        ),
                      ),
                      Container(
                        height: 100.0,
                        width: 100.0,
                        color: Colors.blueAccent,
                        child: Center(
                          child: Text(
                            "Column-Container",
                          ),
                        ),
                      ),
                    ],
                  )
                ],
              ),
              Padding(
                padding: const EdgeInsets.all(
                  8.0,
                ),
                child: Text(
                  "Image",
                ),
              ),
              Image.asset(
                'images/c7.jpg',
                fit: BoxFit.cover,
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {},
      ),
    );
  }
}