What is Flutter, Build Context, Skia Engine, Stateless Widget Stateful Widget.

Hey dev I am Sadaqat Hussain. In this article I introduced the base architecture of flutter framework and the dart language, it is very important before diving into code to understand the working principle of flutter behind the scene .

In this tutorial we will cover.

• Development and Deployment
• Single Codebase Development
• Widget composing (Widget tree and Render Tree)
• Stateful Widget and Stateless Widget
• Build Context
• Platform Channel
• Sika Engine

Flutter is dart portable UI framework develop by google to build multi-platform app including mobile, desktop and web. It use dart language that is compile to the platform arm (Advanced RISC Machines) code. And for web apps it compiles to JavaScript production code,

UI Rendering in Flutter.

Flutter use an open source 2D rendering engine know as skia, Skia rendering engine is capable of working with different types of hardware and software that’s why flutter is working with all platforms. It use GPU for graphics rendering.

Dart is capable of ahead of time compiled to platform native arm code, which makes apps fast.

It is also just in time compile, means faster display codes changes, which makes it development fast, the hot reload features of flutter is due to JIT.

It use dart for developing business logic and also creating UI of app that remove the need of separate markup language to develop UI, like in native android development for developing of UI we use xml, and for business logic we use java.

It is decorative, means that it UI is drawn according to the current state of the app, if it state (data and conditions) changes , it redraw the entire UI according to the current state.

Flutter rendering speed is about 60 frame per second and in high end devices its speed is 120 fps. Higher the rendering speed means that smother the animation and transition. Flutter apps are built from single code base that are compiled into arm platform specific code. It use GPU to access platform specific apis like GPS location, file manager and image library etc using platform channel.

Flutter UI is build using widgets from modern reactive framework, it uses its own rendering engine to draw widgets. Widgets are mounted and configure using widget tree and element tree, a third tree know as rendering tree which define the painting protocol and basic layouts. Widgets are building block of flutter UI, each widget is the immutable declaration of UI. Widgets are instruction to create the UI, by these instruction widget trees are formed. When an app is running it follow some events know as lifecycle events they occur in linearly one after another.

There are two types of widgets stateless widget and stateful widgets, each widget has its own Lifecyle events. Each type of widget has build method and build context, which define the location of widgets in widget tree. Build context is element object that define the actual place of widget in widget tree.

Stateless Widget is used when the state or data is not change, e.g to show the app log, title etc., its state cannot change dynamically. It is defined with one class which extends the stateless Widget class and override the build method from stateless Widget class. Its state is change when the parent widget state change or an inherited widget state change.

class GreenFrog extends StatelessWidget {
  const GreenFrog({ Key key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
     
  }
}

Stateful Widget is used in that scenario when the state or data is dynamically change by user interaction e.g., selecting image from file manger or network calls etc. It has mutable state, it is declare by with two classes, stateful widget class and state class, the state full widget is rebuild when it state is changed, the UI is redrawn based on current state. There are different techniques to change the state of widget. SetState is local and easy technique that change the widget state.

class GreenFrog extends StatefulWidget{
 @override
State<StatefulWidget> createState()=> GreenFrogState();
}
class GreenFrogState extends  State<GreenFrog>{
  const GreenFrog({ Key key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
     
  }
}