Flutter Framework Overview

Flutter Framework Overview

·

3 min read

What is Flutter Framework?

  • This article is intended to provide a high-level overview of the architecture of Flutter, including the core principles and concepts that form its design.

  • Flutter is a cross-platform UI toolkit that is designed to allow code reuse across operating systems such as iOS and Android, while also allowing applications to interface directly with underlying platform services.

  • The goal is to enable developers to deliver high-performance apps that feel natural on different platforms, embracing differences where they exist while sharing as much code as possible.

  • During development, Flutter apps run in a VM that offers stateful hot reload of changes without needing a full recompile. For release, Flutter apps are compiled directly to machine code, whether Intel x64 or ARM instructions, or to JavaScript if targeting the web. The framework is open source, with a permissive BSD license, and has a thriving ecosystem of third-party packages that supplement the core library functionality.

  • This overview is divided into a number of sections:

    1. The layer model: The pieces from which Flutter is constructed.

    2. Reactive user interfaces: A core concept for Flutter user interface development.

    3. An introduction to widgets: The fundamental building blocks of Flutter user interfaces.

    4. The rendering process: How Flutter turns UI code into pixels.

    5. An overview of the platform embedders : The code that lets mobile and desktop OS execute Flutter apps.

    6. Integrating Flutter with other code: Information about different techniques available to Flutter apps.

    7. Support for the web: Concluding remarks about the characteristics of Flutter in a browser environment.

Architectural layers :

  • Flutter is designed as an extensible, layered system. It exists as a series of independent libraries that each depend on the underlying layer. No layer has privileged access to the layer below, and every part of the framework level is designed to be optional and replaceable.

  • Typically, developers interact with Flutter through the Flutter framework, which provides a modern, reactive framework written in the Dart language. It includes a rich set of platform, layout, and foundational libraries, composed of a series of layers. Working from the bottom to the top, we have:

  • Basic foundational classes, and building block services such as animation, painting, and gestures that offer commonly used abstractions over the underlying foundation.

  • The rendering layer provides an abstraction for dealing with layout. With this layer, you can build a tree of renderable objects. You can manipulate these objects dynamically, with the tree automatically updating the layout to reflect your changes.

  • The widgets layer is a composition abstraction. Each render object in the rendering layer has a corresponding class in the widgets layer. In addition, the widgets layer allows you to define combinations of classes that you can reuse. This is the layer at which the reactive programming model is introduced.

  • The Material and Cupertino libraries offer comprehensive sets of controls that use the widget layer's composition primitives to implement the Material or iOS design languages.

  • The Flutter framework is relatively small; many higher-level features that developers might use are implemented as packages, including platform plugins like camera and webview, as well as platform-agnostic features like characters, http, and animations that build upon the core Dart and Flutter libraries. Some of these packages come from the broader ecosystem, covering services like in-app payments, Apple authentication, and animations.

  • Framework (source code)

    • Provides higher-level API to build high-quality apps (for example, widgets, hit-testing, gesture detection, accessibility, text input).

    • Composites the app's widget tree into a scene.