Flutter

App

React Native Architecture

Javascript

Bridge

Platform

Service

OEM Widget

Canvas

Events

Location

Bluetooth

Audio

Sensors

Camera

etc.

App

Flutter Architecture

Native Code

Widget

Rendering

Platform

Service

Canvas

Events

Location

Bluetooth

Audio

Sensors

Camera

etc.

Platform

Channels

Flutter System Overview

Flutter Characteristic

• No Support XML Design

• Support Cross Platform

• Everything is Widget

• Language is Dart (like Java)

• Using Android Studio

• Google support

Plugin

https://flutterchina.club/platform-channels/#architecture

Channel

Android Module

Flutter can be embedded into your existing Android application piecemeal, as a source code Gradle subproject or as AARs.

iOS Module

There are two ways to embed Flutter in your existing application.

1. Use the CocoaPods dependency manager and installed Flutter SDK. (Recommended.)

2. Create frameworks for the Flutter engine, your compiled Dart code, and all Flutter plugins. Manually embed the frameworks, and update your existing application’s build settings in Xcode.

iOS Module

Option A - Embed with CocoaPods and the Flutter SDK

https://flutter.dev/docs/development/add-to-app/ios/project-setup#option-a---embed-with-cocoapods-and-the-flutter-sdk

Option B - Embed frameworks in Xcode

https://flutter.dev/docs/development/add-to-app/ios/project-setup#option-b---embed-frameworks-in-xcode

Widget Tree

Layout widgets

• Single-child layout widgets

• Multi-child layout widgets

Single-child layout

https://flutter.dev/docs/development/ui/widgets/layout

Multi-child layout

https://flutter.dev/docs/development/ui/widgets/layout