Learn Flutter day 4 : Stateful Widgets

Hello Friends,

In the last blog we learn about stateless widgets, you can check the last blog here -

https://bigakash.blogspot.com/2021/03/learn-flutter-3rd-day-flutter.html

In this post we will learn Stateful widgets and will see some common widgets that are used in building layout/UI for flutter applications.

So Lets get started!!

Stateful Widgets -

Stateful widgets maintain state that can be changed based on user interactions.

To build these widgets we require two classes - 1) StatefulWidget & 2) State class.

Stateful Widget object itself is immutable and can be regenerated but the State object persists over the lifetime of widgets to hold state/information.

There is a shortcut to create a Stateful widget in Android Studio. Just type 'stful' outside the widget class that we had created in last post example and it will generate the boilerplate code for 2 classes one for stateless widget and one for its state. 

We will name this as StatefulCounter widget which will include a 'increment' button and a text which will show the count. The count will increase whenever we press the 'increment' button as below -

In the above code we have created a class _StatefulCounterState  which will maintain the state of the widget. The _increment() method will be called when the button is pressed.

In the _increment() method we are calling setState() which indicates that some of the internal state has changed, at this time widget rebuild itself by calling build() method.

In the build() method we are returning the parent Scaffold widget with the Container widget in its body property. This Container widget can have one child only. So we have created a Center widget which will center its child. As its child we have created a Column widget which will have 2 children -

1) Elevated Button  & 2) Text which will show the count.

Whenever we press this button the count will increase. 

Useful Widgets -

1) Image - This widget is used to show images on the UI. There are several ways or constructors are provided to load the image as -

1) Image.asset To obtain image from assets folder.

2) Image.network To obtain image from link or url.

3) Image.file To obtain image from a file or local path.

Image.asset(
  "assets/images/image/exa.png",
  fit: BoxFit.cover,
)

2) Stack - This widget can contain multiple children widgets one above the others.

  child: Stack(
    children: <Widget>[
      Container(
        color: RED,
      ),
      Container(
        margin: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
        color: BLUE_LIGHT,
      ),
      Container(
        margin: EdgeInsets.symmetric(vertical: 30, horizontal: 60),
        color: PURPLE,
      ),
    ],
  );

3) Container -

Container contains only one child and it can manage its width, height and background also.

Container(
  color: RED,
  child: Text("Hello world"),
  width: 200.0,
  height: 100.0,
  margin:
  EdgeInsets.only(left: 10.0, right: 50.0, top: 10, bottom: 30)
  
)

4) Row & Column -

We have already used these two widgets in our examples. These widgets can be used to show multiple widgets in one direction, The Row-widget will show widget in the horizontal direction and the Column widget will show widget in the vertical direction. We can also use 'mainAxisAlignment' to control the alignment of the widgets.

So here we saw Stateful widget and some useful widgets. You can check the complete code on github repository below -

https://github.com/akash-bisariya/LearnFlutterApp

In next blog post we will see how to build the screen layouts in a flutter application using widgets.

Thanks for the reading... 

Learn Flutter Day 3 - Flutter Architecture & Widgets

Hi Friends,

Today we will learn about Flutter Architecture, how it works under the hood and then we will learn about Widgets to develop UI interfaces in Flutter.

Let's Get Started!!

Flutter Architecture-

Flutter is an open source cross platform development toolkit, It is designed to reuse the same code with different platforms like Android, iOS and Web.

In development phase Flutter applications runs in VM and then for release they are directly compiled to machine code.

Flutter is designed as an layer system with no layer has privileged access to the layer below.

Developers interact with the Flutter Framework. It provides a reactive framework written in Dart language which includes Foundational libraries like animation, painting etc, rendering layer (converting UI code into pixels) for rendering layouts, Widgets layer for rendering objects for layout and then Material & Cupertino library for implementing Material or iOS design language.

The core of the Flutter is Flutter Engine written in C++. It is reponsible for rasterizing composited scenes whenever a new frame needs to be painted. It provides the low level implementation of Flutter's core API, I/O, plugin architecture and Dart runtime and compile toolchain.

A platform specific Embedder coordinates with the underlying operating system for services like rendering surfaces, accessibility and input. It is written in language appropriate for the platform like Java/C++ for Android, Objective C/Objective C++ for iOS and macOS and C++ for Windows and Linux.

Flutter Widgets-

In Flutter widgets are everything from images, icons to layouts of the application. These are classes used to build UI elements. We can make complex widgets or layouts by composing simple widgets.

A widget declares its user interface by overiding the build() method. This method is designed to be fast so that it can be called by the framework whenever needed to render the frame. On each rendered frame Flutter can recreate only those parts of the UI where state has changed by calling that widget's build() method. Therefore it is important that build method should return quickly and heavy computational task should be done in asynchronous manner.

Widget State-

A widget can be of two types - Stateless or Stateful.

Widget that don't have any properties that can change over time like icon or label are Stateless Widget.

Widget that needs to change based on  user interaction or any other factors are Stateful widget.

There are various widget available in Flutter framework such as Center, Text, Row, Column, Stack, Container etc and some top level widget like MaterialApp and CupertinoApp.

Stateless Widget Example-

Now we will see how to create a stateless widget in the Flutter. Also we will learn including external package/library. Here we have used open source package named 'english_words' which contains some most used english words  and will display these words randomly on Home-Screen. Lets see main.dart file now -

In the above code first we create a main() function which simply calls the runApp() function that contains a widget MaterialApp. This widget is required to implement material design in application. It contains title property and home property which is used for routes or top level Navigator. Navigator helps in transitioning smoothly between screens. The home property calls the FlutterHome() class as below -

This class extends with StatelesWidget. As we know Stateless widget need to override build() method to display the widget in terms of other lower level widget.

This function will return the Scaffold class which is also a widget that provides a default App bar, a title and a body property that holds widget tree for the Homescreen. In body we have added a Column widget which displays its children in a vertical array. Then we have 2 Text widgets as children of the column widget, we will show random words in these 2 widgets.

Using External Package-

To use the external package 'english_words'we need to append - 'english_words: ^3.1.5-nullsafety.0'

to the dependencies list in pubspec.yaml file as below -

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2
  english_words: ^3.1.5-nullsafety.0   

Now import this package in main.dart file as -

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart'; 

Now to get the random words we use WordPair.random().asPascalCase

This will return random word each time we click on hot reload or save the project.

So here we saw StateLess widget in action. You can check the code on github repository below

https://github.com/akash-bisariya/LearnFlutterApp

In next blog post we will see how to create Stateful widgets which change on any user interaction.

Thanks for reading...