Environment and Equipment:
MacOS Mojave 10.14.5
Xcode 11.2.1
Android Studio 3.5
Iterm2 +Zsh (optional)
IPhone 7 (13.3) (Optional, emulator available)


The method of Xcode + Android Studio is recommended here, because both Flutter and Android Studio are from the Google team. They have good compatibility with each other, fewer bugs, and powerful and perfect functions. Therefore, Android Studio has been chosen as the IDE for Flutter development. VScode is a relatively lightweight and efficient open source development tool. Interested students can also try it.


1. Build a Flutter environment in MacOS
Flutterchina. Club/setup – macos… Here are the official guidelines for building a FLUTTER environment under macOS. Here are the main points and points to pay attention to.
Internal access to Flutter is sometimes restricted. Just like installing cocoaPods, you need to set up an image for Flutter. Add the following sentences to the bash_profile file:
export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn


Note: This is a temporary image and may not always be available. For details, see the link Using Flutter in China, or search for Flutter images. There are many options available.


Here are some things to watch out for:
Download the Flutter SDK manually, unzip to a folder and run Flutter Doctor. It will prompt you that the folder is not a Clone project on Github
Go to Github to search for flutter and clone the SDK locally. Here we suggest tracking the stable branches of Flutter. This is the stable branch of flutter, as well as the master and beta branches, etc. You can track the master branch, but note that this is the development branch, so it’s less stable.


To see which branch is currently in use, run the Flutter Channel view.
To switch branches, use the Flutter Channel beta or flutter Channel Master


1.2 Install the Flutter and Dart plugin for Android Studio:
  1. Open the Android Studio
  2. Open Preferences > Plugins for macOS and File > Settings > Plugins for Windows and Linux.
  3. Select Marketplace, then select the Flutter plugin and click Install
  4. When prompted to install the Dart plug-in, click Yes
  5. When prompted to Restart, click Restart


Create a Flutter Module


Note that when creating the Flutter Module, you need to fill in Company domin. This will be used not only as the application name, but also as the package name of the Android project and the bundle ID of the iOS project after the application is released. It should be specified at the beginning of creation (e.g., the bundle ID of the fleet project: com.foryou.foryouAgent).
Now you have a Flutter Module. In a practical project, we need to integrate the Flutter Module into the native iOS project and establish data communication between the iOS native project and the Flutter Module. Develop native pages in Xcode. Develop Flutter Module on Android Studio.


Supplement:
If you have previously installed the flutter environment and now want to update the flutter SDK and your dependencies, run the flutter upgrade command in your application root directory (the directory containing the pubspec.yaml file) : (The pubspec.yaml file in the root folder of the Flutter project is the Flutter configuration file. It contains dependencies, image files, fonts, etc.)


Update to flutter SDK successfully:


2. Add the Flutter Module to the existing iOS project
At this point, by default you should have done:
  • Git Clone down the Flutter SDK
  • An iOS native project
  • A Flutter Module Module
  • Flutter Module Development Environment (Android Studio)


2.1 Integrate Flutter into native projects
There are two ways:
  1. CocoaPods Dependencies Management + Flutter SDK
  2. Compile the Flutter Engine, your DART code, and all the Flutter plugins into the framework. Then manually integrate it into your application with Xcode and update the compilation Settings.
Note: Emulators cannot run Release and Profile modes. You can run Debug mode on emulators and real machines, and Release or Profile mode on real machines. (Here, Release and Debug modes refer to the construction modes of Flutter. Different modes have different characteristics. For example, APP in Debug mode is larger and has poor performance, but can respond quickly to changes when the Flutter is thermally overloaded. Profile mode is used to analyze performance during testing, etc.)


This assumes that the iOS native project, the Flutter Module, and the Android native project are all in the same folder. Add them to the podfile:
flutter_application_path = ‘.. /flutter_module/’
load File.join(flutter_application_path, ‘.ios’, ‘Flutter’, ‘podhelper.rb’)
Podhelper. rb is a script that integrates your plugins, Flutter. Framework, and App. Framework into your native project. App. Framework is compiled from Dart code.
And integrate this code in target:
install_all_flutter_pods(flutter_application_path)
Then run Pod Install


2.2 Adding the Flutter page
2.2.1 start FlutterEngine
Here are two links to both:
FlutterEngine: API. Flutter – IO. Cn/objcdoc/Cla…
FlutterViewController: API. Flutter – IO. Cn/objcdoc/Cla…
There is one more noun to mention: FlutterDartProject, which is used to get Flutter resources and create FlutterEngine instances
Broadly speaking, FlutterEngine is the object of a Flutter engine that renders the FlutterView of FlutterViewController, which inherits from UIViewController. The Flutter extends it as needed and is essentially a special controller.


It is recommended that a global FlutterEngine be created in an Appdelegate and initialized to set up the default entry for Flutter routing.


When flutterEngine calls run, the main() function in the lib/main.dart file of the Flutter Module is called by default.
FlutterEngine has several run methods, such as:
This method means that the otherMain() function in the lib/ otherfile.dart file is not called as an entry point.


It is generally recommended to create A FlutterEngine first, rather than when it is in use, because the lifetime of a FlutterViewController can be the same, but it can also be longer. The advantage of priority creation is that the Flutter page can be displayed faster and more efficiently when it is started. In addition, the Flutter page can be used for early communication, logical interaction, and so on.


You might have noticed something called a FlutterAppDelegate. What is this? From its name, Flutter is a wrapper for UIApplicationDelegate, or a custom alternative. It contains additional functions, such as passing project call-back (e.g. fingerprint verification or network requests to Flutter modules), status bar click events to Flutter, and so on.


If existing project cannot inherit FlutterAppDelegate directly, in order to guarantee the Flutter plugins can receive the correct callback, should let the original AppDelegate in project implementation FlutterAppLifeCycleProvider agreement.


2.2.2 Create a page inherited from FlutterViewController
To create a page that inherits from the FlutterViewController, such as FYMainSettingFlutterVC in the fleet Settings page, introduce the Flutter framework
Within the page, we need to set up a two-way channel between the Flutter ⇄ native code to pass data and click events:
  • First build the native ->Flutter page routing channel
The main_setting here is used as page route identification to determine which flutter page to jump to from the native page. Both ends of the “main_setting” must be consistent.
As mentioned earlier, the dart entry is the main() function of the main.dart file, so this identifier is used there.




  • Next comes the Flutter-> native jump routing channels, such as actions such as click events passed from the Flutter page.
FlutterMethodChannel represents a channel used for interactive communication. This channel is named “MethodChannelPlugin”. In practice, multiple channels may exist, so you should specify a unique name when creating a FlutterMethodChannel. In addition, we see a binaryMessenger parameter. This parameter is of type binaryMessenger, which stands for message messenger. It is a tool for sending and receiving messages and, as its name suggests, is used to transport binary data.
Call is of type FlutterMethodCall and has a method attribute that distinguishes the operation identifier generated by the flutter page. The two ends of this flutter identifier must be consistent, otherwise the proper operation response chain will not form.
Result is a block of type FlutterResult, which can pass any type of parameters to the FLUTTER module.
The getCommomParams() method is used to pass some public parameters of the interface. Because many of the public parameters of the fleet project interface parameters are obtained at the bottom, they need to be passed when the Flutter Module makes a network request. To enable network requests in the Flutter project to run normally, which is currently the case and can be optimized.


At this point, all the channels between a Flutter page and the native page are set up.


3. Develop Flutter code in Android Studio

The Dart language: www.dartcn.com/guides/lang…

Flutter Chinese website: FlutterChina.club /