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...