2.1 Introduction to Flutter

Flutter is a mobile application development framework introduced by Google and open-sourced. It focuses on cross-platform development, high fidelity, and high performance. Developers can build apps using the Dart language, with one set of code running on both iOS and Android platforms. Flutter provides a wealth of components and interfaces, allowing developers to quickly add native extensions. Let’s take a look at the main features of Flutter.

1. Cross-Platform Custom Rendering Engine

Unlike most frameworks used to build mobile apps, Flutter does not use WebView or native system controls. Instead, Flutter uses its own high-performance rendering engine to draw widgets. This ensures consistent UI on both Android and iOS, avoiding the limitations and high maintenance costs of relying on native controls.

At its core, Flutter uses Skia, a 2D rendering engine developed by Google. Skia offers high performance and simplicity, providing tools like font rendering, coordinate transformations, and bitmap handling. Both the Google Chrome browser and Android use Skia as their 2D graphics engine.

Flutter supports many platforms, including iOS, Android, Web, Windows, macOS, Linux, and Google’s new Fuchsia OS. However, this book focuses on iOS and Android, and readers can explore other platforms independently.

2. High Performance

Flutter’s high performance is mainly ensured by two key factors:

• Dart language: Flutter apps are developed using Dart. In JIT (Just-In-Time) mode, Dart's execution speed is comparable to JavaScript. However, Dart supports AOT (Ahead-Of-Time) compilation, providing significantly better performance than JavaScript, especially for high frame-rate UI updates.

• Custom Rendering Engine: Unlike frameworks like React Native (RN), Flutter directly controls layout data with Dart, avoiding the need for communication between JavaScript and native code. This gives Flutter a clear advantage in scenarios like scrolling and dragging, where continuous layout updates are necessary.

3. Developed with Dart

This raises an interesting and sometimes controversial question: why did Flutter choose Dart over JavaScript? Before answering, let’s understand JIT and AOT:

• AOT (Ahead-of-Time): Programs are compiled into machine code before execution. C/C++ applications are examples of AOT.

• JIT (Just-in-Time): Code is translated into machine code at runtime, used by languages like JavaScript and Python.

Flutter chose Dart for the following reasons:

• High Development Efficiency: Dart’s runtime and compiler support Flutter’s critical features. In JIT mode, developers can avoid recompilation with each change, saving time. AOT mode ensures performance when deploying the app, a capability JavaScript lacks.

• High Performance: Flutter requires high performance for smooth UI animations. Dart’s AOT support makes it faster than JavaScript in rendering tasks.

• Memory Management: Flutter uses functional streams and relies heavily on memory allocation. Dart’s memory allocator effectively handles these tasks, making it a good fit for Flutter.

• Type Safety and Null Safety: Since Dart is a type-safe language and supports null safety, it can catch type-related errors at compile time, unlike JavaScript, which is a weakly-typed language. This makes Dart more attractive to developers familiar with languages like TypeScript.

• Close Collaboration with Dart Team: Google’s Dart team works closely with the Flutter team, which accelerates feature development and optimization for Flutter.

4. Summary

This section introduced Flutter’s main features. If some concepts are still unclear, don’t worry! As you dive deeper into Flutter, things will become clearer over time.

2.2 Flutter Framework Architecture

In this section, we will give an overview of Flutter's framework structure, crucial for beginners. Flutter can be divided into three main layers: Framework, Engine, and Embedder, as shown in the diagram (Figure 1-1).

1. Framework Layer

The Framework Layer is the highest level of Flutter. It is a Dart-based SDK that provides a core library. The key components are:

• Dart UI Layer: Provides basic animation, gesture handling, and rendering capabilities.

• Rendering Layer: Manages layout and the rendering tree. It calculates the size and position of rendered objects and coordinates transformations.

• Widgets Layer: Flutter’s foundational widget library includes both Material and Cupertino design widgets.

2. Engine Layer

The Engine Layer is the core of Flutter, written in C++. It includes the Skia engine, Dart runtime, and text rendering engine. This layer handles the actual rendering and display.

3. Embedder Layer

The Embedder Layer is responsible for interacting with the operating system’s APIs. This allows Flutter apps to run on various platforms like Android, iOS, Windows, and Linux.

4. Summary

We introduced the three main layers of Flutter’s architecture: the framework, engine, and embedder. These layers provide a clear structure for understanding how Flutter works.

2.3 How to Learn Flutter

This section offers learning suggestions and insights from the author’s experience with Flutter.

1. Resources

• Official Documentation: Reading Flutter’s official documentation is the best way to get started.

• Source Code: The Flutter SDK includes detailed comments and examples. The source code is the best reference material.

• Github & StackOverflow: For advanced questions, check GitHub issues or ask questions on StackOverflow.

2. Summary

With the right resources, it’s important to practice building your own Flutter apps. Hands-on experience is essential.

2.4 Conclusion

Flutter’s framework is well-structured, and this section provides an initial understanding. You now have a basic grasp of Flutter, and in the following chapters, we’ll dive deeper into the Dart language.