Introduction

Flutter is an open source user interface (UI) toolkit developed by Google for building high-performance, beautiful, and smooth mobile applications on multiple platforms. It uses the Dart programming language and provides a wealth of UI components and tools to quickly build modern application interfaces.

Flutter Framework

The Flutter framework consists of three layers: Framework, Engine, and Embedder.

  • Framework: Written in Dart. Developers can interact with Flutter through the Flutter framework layer, which provides a responsive framework written in Dart.

  • Engine: It is the core of Flutter, and it is mainly written in C++. When a new frame of content needs to be drawn, the engine will be responsible for rasterizing the scene that needs to be synthesized. It provides the underlying implementation of the Flutter core API, including graphics, text layout, file and network IO, accessibility support, plug-in architecture, and the tool chain of the Dart runtime environment and compilation environment.

  • Embedder: On each platform, a specific embedding layer is included to provide a program entry point, through which the program can coordinate with the underlying operating system, access services such as surface rendering, accessibility and input, and manage event loop queues. The embedding layer is written in a language suitable for the current platform. Flutter code can be integrated into existing applications in a modular manner through the embedding layer, or it can be used as the main body of the application.

Environment Construction

Flutter can be installed on Windows, macOS, Linux, and ChromeOS. Here I will focus on how to use Flutter on macOS. For usage on other platforms, please refer to https://docs.flutter.dev/

  • First use the terminal to set up the mirror site
    export PUB_HOSTED_URL=”https://pub.flutter-io.cn“
    export FLUTTER_STORAGE_BASE_URL=”https://storage.flutter-io.cn“

  • Some Flutter components require the Rosetta 2 translation process on Macs running Apple silicon. To run all Flutter components on Apple silicon, install Rosetta 2.
    sudo softwareupdate –install-rosetta –agree-to-license

  • Download and install the following packages.
    Xcode
    CocoaPods
    Android Studio

  • Download the Flutter SDK.
    You can download any version of the Flutter SDK from any branch by visiting https://docs.flutter.dev/release/archive.I recommend downloading the latest version of the SDK from the stable branch, because this branch is the most stable.The dev branch changes most frequently, but is also prone to problems.

  • Unzip the downloaded zip package to a specified folder, such as ~/dev/flutter.

  • Add flutter to your default shell file.For example, if your default shell file is zsh, open zsh and add the following code.
    export PATH=$HOME/dev/flutter/bin:$PATH

  • Finally, you can run flutter doctor -v in the terminal to check whether there are any configuration problems. Follow the prompts to correct the problems one by one.

Create Application

You can use VSCode or Android studio to develop a flutter app. Choose whichever you like. Here I will use Android studio as an example.

  • Open Android studio. Select New Flutter project.

  • Enter the path to the Flutter SDK you just installed. Then click Next.

  • Enter the project name in lowercase letters and separate it with underscores.

  • Select the project type (application, module, plugin, package, etc.) as application

  • Select the development language. Android includes Java and Kotlin. iOS includes OC and Swift.

  • Select the platforms supported by the app. These include Android, iOS, Linux, MacOS, Web, and Windows.

  • Click the create button. After a short while, you will get a Flutter application.

Application Development And Run

You can use VSCode or Android studio to develop a flutter app. Choose whichever you like.

  • You should write your code should be in lib folder

  • main.dart is the root view of the project. You can start writing your first flutter page here.

  • You can refer to the component library in https://docs.flutter.dev/ui for development.

  • Select a target device from Select Device prompt.

  • Go to Run > Start Debugging.

  • After the app build completes, your device displays your app.