Before start with Flutter — Flutter Programming — Part 1

  • Productive: Build and iterate quickly with Hot Reload. Update code and see changes almost instantly, without losing state.
  • Flexible: Control every pixel to create customized, adaptive designs that look and feel great on any screen.
  • Developer experience: Take control of your codebase with automated testing, developer tooling, and everything else you need to build production-quality apps.
  • Stable & Reliable: Flutter is supported and used by Google, trusted by well-known brands around the world, and maintained by a community of global developers.
Flutter architecture

Embedder layer (lowest layer)

  • Is provided by a platform-specific embedder.
  • Coordinates with the underlying operating system to access services such as accessibility, rendering surfaces, and input.
  • The embedder is written in a platform-specific language, such as Java and C++ for Android, Objective-C/Objective-C++ for iOS and macOS, and C++ for Windows and Linux.
  • Flutter code can be embedded into an existing application as a module or as the complete application’s content using the embedder.

Engine layer

  • It’s the core of Flutter.
  • Mostly written in C++ and supports the primitives necessary to support all Flutter applications.
  • Takes care of the input, output, network requests, and handles the difficult translation of rendering whenever a frame needs to be painted.
  • Flutter uses Skia as its rendering engine and it is revealed to the Flutter framework through the dart : ui, which wraps the principal C++ code in Dart classes.

Framework layer (highest layer)

  • It’s where most developers can interact with Flutter.
  • Provides a modern, reactive framework written in the Dart language.
  • Includes a rich set of platform, layout, and foundational libraries, composed of a series of layers.

Dive deep into Framework layer

Framework layer

Material & Cupertino

The Flutter framework has two sets of widgets that conform to specific design languages. These are Material Design for Android application and Cupertino Style for IOS application. It’ll let you easier to customize behaviors for specific platform.

Widgets

First thing to remind here that Everything is a widget. But, What’s widget ?

  • It indicate how their present configuration and status should appear in their display.
  • When a widget’s state changes, it rebuilds its description, which the framework compares to the previous description to see what changes in the underlying render tree to transition from one state to the next.
  • A widget can be in the form of a button, an image, an icon, or a layout, and placing the widgets together creates a widget tree.
  • The widget tree is a never-ending chain of parent and child widgets that creates the visual layout on a screen.
Widget tree
Widget category

Rendering

  • It provides an abstraction for dealing with layout. You can build a tree of renderable objects with this layer.
  • Flutter’s rendering process is basically turning widgets into pixels. This is the job of Flutter’s multi rendering pipeline. It’ll handles the input, runs animations, builds the widget tree, lays out the render objects, paints the render objects, and compiles everything into a single image.
  • Whenever a part of the widget tree receives user input, animation, or any other changes, Flutter enters the build phase. In this phase, the framework reconstructs the widget tree by calling the necessary build methods.
  • The build() phase updates the element tree, which updates the render object tree. The render objects are responsible for layout and painting. During the layout phase, Flutter walks the tree of render objects passing down constraints.
  • Once the layout phase is complete, it enters the paint phase. This is where Flutter calls the paint method on all the render objects.

Foundation

  • Core Flutter framework primitives. These libraries are written in Dart language.
  • Have these building block services such as animation, painting, and gestures which offer commonly used abstractions over the underlying foundation.
  • This library are the lowest-level utility classes and functions used by all the other layers of the Flutter framework.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Hoang Nguyen

Hoang Nguyen

I've started with Flutter since 2019 and have good knowledge about Flutter and some architecture. I want to share more of my knowledge and learn more from other