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

 

2nd day with Flutter - Dive into Dart!!

             

Hello Friends,

This is 2nd blog on this series #30DaysOfFlutter.

In the last blog we learn about how to install/setup the flutter. You can check my previous blog if you had not done it yet -

https://bigakash.blogspot.com/2021/02/1st-day-with-flutter-hello-flutter.html

I know I am not able to post blog regularly but I will try now to be regular for this series.

So Lets Gets Start!!

As we know for flutter development the programming language used is #Dart which is made by Google, so in this post we will dive into dart language and try to get familiar with it so that we can start writing flutter applications.

Dart is an object oriented programming language and its syntax is very much smilar to java or other object oriented langauge. We will see here some important concepts/features/syntax that differentiate it with other languages -

1. Main function - Each app must have a top level main function as shown below -

// Entry point of the application
void main() {
  var name = 'XYZ'; // Declare and initialize a  string variable.
  print(name); // Display name on console.
}

2. Functions - Function are usually created in following way -

Integer sun(Integer a, Integer b) {
  return a+b;
}

You just need to define return type, function name and function body to create a function. In Dart inserting the return type is even not required as it can use type inference to infer the return type.

Arrow function can also be used which is a function with only one line of code for example -

void printName(String name) => print(name);

3. Function Parameters - A function can have 2 types of parameters : Required & Optional

The optional parameter can be of two types - Named & Positional.

Lets see an example of 'Named' parameter first which are declared using curly brackets ({}).

/// Two optional parameters - firstName & lastName
void printHelloWorld({String firstName, String lastName}) { print(...) }

We can call this function as -

printHelloWorld(firstName: 'ABCD', lastName: 'EFGH');

Also If required you can make 'Named' parameters mandatory in a function by annotating them with @required attribute.

To declare 'Positional' parameters we need to use square brackets ([]). Following is an example of it -

String printMessage(String firstName, String lastNAme, [String message]) {
  var text = 'Hello $firstName $lastNAme';
  if (message != null) {
    text = '$result $message!!';
  }
  return text;
}

You can call this function with or without the 'message' parameter as -

printMessage('Akash', 'Bisariya');   // Hello Akash Bisariya

printMessage('Akash', 'Bisariya', 'Good evening')   // Hello Akash Bisariya GoodEvening!!

 

4. Variables - Dart does not have keywords public, protected and private. If an identifier starts with an underscore ( _ ) , it will be private to its library/dart app. You can also use 'var' keyword to create a variable -

var name = 'XYZ';

Dart language has some built in types -

• numbers - It's further divided into 2 types - integers(int) & doubles(double)
• strings - You can use either single '' or double "" quotes to create string.
• booleans - 
• lists (also known as arrays)
• sets
• maps
• runes (for expressing Unicode characters in a string such as laughing emojis)
• symbols (these are compile time constants)

5. Classes - You can define a class simply by using 'class' keyword followed by its name. You can create object of this class by using its constructor. To define class constructor we have 2 ways  -

1) Generative constructor & 2) Named constructor.

Follwing is an example of both -

class Person{ String name; String lastName; String this.age;

Person(this.name, this.lastName);  Person.newEntry(){this.age=0}   }

var p1 = new Person(2, 2);
var p2 = new Person.newEntry();

6. Mixins - Its a relatively new feature when comapring with other object oriented language like java.

By 'Mixin' we can reuse the class code in mulitple class hiearchies. Dart uses 'with' keyword for this feature.

class A extends object {
  .....

  void printMessgae() {
    print("This is mixin class")
  }
}

class B with A
  {
 ....
}

Now you can use the 'printMessage' method with the object of class B.

You can only extend the 'Mixin' class with Object class.

So friends these are some features of Dart language, we will use these features when developing the Flutter applications later.

For more detailed review of Dart language you can use the following official Doc -

https://dart.dev/guides/language/language-tour

Thanks for reading. From next post we will start developing the Flutter application.