Chapter 3 of Flutter Construction of Flutter engineering environment

I. Requirements of working environment

The following work environment is the MAC environment, which requires the necessary installation software:

• JDK
• Android tudio and SDK
• Flutter Sdk;
• XCode

JDK installation:

1) Download and install

MAC System will generally the default install JDK 1.6, path to/System/Library/Java/JavaVirtualMachines 1.6.0. JDK, but sometimes may need to download a version of the JDK is higher

Official website to download address: www.oracle.com/technetwork…

Why choose JDK8 over 15 extension materials: www.techug.com/post/it-is-…

2) configuration

The configuration mode is vim ~/.bash_profile, which can be added or modified

Export JAVA_HOME = / Library/Java/JavaVirtualMachines jdk1.7.0 _79. JDK/Contents/Home

export JAVA_HOME

export PATH=
$PATH:$JAVA_HOME

Finally, reload the profile

source ~/.bash_profile

3) verification

If the current version is displayed, the installation and configuration are successful.

Note: If bash is used, modify ~/.bash_profile or ~/.profile;

If ZSH is used, change ~ /.zshrc

After modifying these files, re-open Terminal and the configuration will not be lost

Android Studio Installation and SDK configuration:

1) download and install website to download: developer.android.com/tools/studi… The resulting DMG file is directly dragged to Applications for installation. Note the installation path

2) Configure SDK and JDK path After installing Android Studio, Android SDK will be installed by default. Open Android Studio and configure path to open File->Project Structure and fill in the corresponding path, as shown below

At the same time, in order to make available in the Android Studio, not only in. Add in the following: SDK_HOME = / Users/baidu/Library/Android SDK

  export SDK_HOME

  export PATH=
$PATH:$SDK_HOME

3) the configuration of ADB

The Debug tool adds the following tools to the.bash_profile: ADB_HOME=/Users/baidu/Library/Android/sdk/platform-tools/ export ADB_HOME export PATH= PATH:PATH:PATH:ADB_HOME

4) Configure Gradle (this is not required)

Add to.bash_profile:

GRADLE_HOME = / Users/baidu/Develop/gradle – 2.10

   export GRADLE_HOME

   export PATH=
$PATH:$GRADLE_HOME/bin

After the above steps, you are ready to develop Android based on Android Studio.

Install Flutter SDK:

Enter the website of Flutter and download the latest version of Stable Channel (macOS). As of the final version of this article, the latest Stable version is 2.5.

If a network fault occurs, you can perform the mirroring configuration and skip the following configuration.

For homebrew downloads, many things may be slow to download because of the source of the image, you can replace the source of the download by using MacOs: The brew - CD "$(repo)" git remote set - origin url https://mirrors.aliyun.com/homebrew/brew.git # replace homebrew - core. Git: cd "$(brew --repo)/Library/Taps/homebrew/homebrew-core" git remote set-url origin The brew update # # https://mirrors.aliyun.com/homebrew/homebrew-core.git application effect to replace homebrew - bottles: echo 'export HOMEBREW_BOTTLE_DOMAIN= https://mirrors.aliyun.com/homebrew/homebrew-bottles ' >> ~/.bash_profileCopy the code

The downloaded SDK is a ZIP package. Next, we unzip the downloaded package to the directory you want to install. The installation directory is optional. I am used to sorting my files under ~/, clicking “Go” in the upper right corner of the screen and selecting “Go” folder

Create codeTools folder:

The downloaded SDKzip file is dragged directly into codeTools

Double click to decompress

After decompression, we also need to configure the environment variables in order to execute the FLUTTER command on the command line. For macOS, we edit the ~/.bash_profile file and add the following code to the end of the file to append the PATH of the flutter command to the environment variable PATH: Vim. Bash_profiles open the.bash_profile file and write the following (if you are not familiar with command-line tools, follow the steps above to open the codeTools folder and create your own editing) :

export PATH=~/codeTools/flutter/bin:$PATH
Copy the code



Officially, starting with macOS Catalina, your Mac will use ZSH as the default login Shell and interactive Shell. You can also set ZSH as the default Shell on earlier versions of macOS. For ZSH as the default environment variable, modify ~ /.zshrc

After modifying these files and opening terminal again, the configuration will not be lost, as shown in the first file:

Environment variables are roughly configured as follows:

XCode installation:

Download Xcode directly from the AppStore and you’re done. Note, however, that the latest version of Xcode has requirements for the MAC system version. You are advised to back up data before the upgrade.

After Xcode has been installed, you need to get two lines of prompt via the Flutter doctor command. Then enter corresponding prompts in the iterm command line to implement AS detection of Xcode created

The Simulator.

Once installed, the IOS emulator can be used. However, to deploy the Flutter application to a real IOS device, the IOS toolchain needs to be set up and some additional connection control command tools need to be installed (just like installing the app to your phone via your computer’s iTunes). And apply for an iOS developer account for Xcode signature configuration. This is not specific, please search by yourself.

twoDependency detection

If all of the above tools are installed and environment variables are configured, run the following command to see if additional dependencies need to be installed to complete the installation:

Plain Text

flutter doctor Doctor summary (to see all details, run flutter doctor -v): ✓] Flutter (Channel stable, 2.2.3, on macOS 11.5.1 20G80 darwin-x64, ✓ ✓ Android toolchain-develop for Android Devices (Android SDK version 31.0.0) [✓] Xcode-develop Chrome - develop for the web [✓] Android Studio (version 4.2) [✓] IntelliJ IDEA Ultimate Edition (version 2020.3.2) [✓] VS Code (Version 1.61.2) [✓] Connected device (1 available) • No issues found!Copy the code



Fix the environment according to the test results. Install whatever is missing. For VS Code and IntelliJ IDEA, I don’t think it is necessary to install.

3.Android Studio configures the Flutter environment to run a project

Open the Android Studio

Choose Open an Existing Project

Open thehello_worldfolder

Open the Settings

choosePluginsSearch,FlutterDownload the plug-in, as wellDartThe plug-in

AS runs the First Flutter project

When the installation is complete, exit to the main screen and you will see a button to select device in the header and run the project

We chooseOpen IOS Simulator, which opens the apple device’s Simulator

Click the run button again

When the project starts, wait about 10 seconds, the first time may be a little slower

The project is up and running

At this point the project is up and running. Of course, for a real iPhone, you can also connect your phone to your computer (iphones require Xcode and a signature) and run the project by selecting your phone from the top toolbar. But for Android development, there is no need to go so far ahead, you can try it yourself.

XCode configures the Flutter environment to run an item

A. Run a Hello World Flutter project to your phone using Xcode:

1. Create a Flutter project using VScode,AS, termianl. The official operation link is as follows:

Flutterchina. Club/get – started…

2. Double-click the corresponding Flutter project xcodeProj or xcworkspace to open the project

3. Click 1, 2, and 3 on the project page and enter your Apple ID to become a developer. Here you need a doctrine, a Bundle Identifier like the package name of an Android project. A personal Apple ID can be bound to only one Bundle Identifier. Therefore, multiple FLUTTER projects need to replace this Bundle Identifier with the Bundle Identifier originally bound to the Apple ID when they run.

4. Connect the mobile phone, pop the box to accept the trust of the device, click the run button, the corresponding device is not visible, and directly install the corresponding application on the mobile phone. Opening an app prompts the developer to be untrusted. Go to phone Settings – general – VPN and Device Management – Trust developers.

Then you can install the corresponding app on your phone. It’s easier to install the Simulator, just hit the Run button.

B. Using the Xcode configuration, run a native IOS project that integrates the Flutter project to the phone:

1. Create a Flutter Module. On the command line, execute: Plain Text

cd Desktop/flutter/
flutter create --template module my_flutter
Copy the code

The Flutter Module will be created in the ~/Desktop/ Flutter/directory. In this directory, you can execute Flutter commands as in other Flutter projects. For example, flutter run –debug or flutter build ios. The directory structure of the my_FLUTTER project is similar to that of the normal Flutter application:

My_flutter / ├ ─ ─ the ios / │ ├ ─ ─ Runner. Xcworkspace │ └ ─ ─ Flutter/podhelper rb ├ ─ ─ lib / │ └ ─ ─. Main dart ├ ─ ─ the test / └ ─ ─ pubspec.yamlCopy the code



2. Use CocoaPods dependency management and the installed Flutter SDK

This method requires that all developers of your project install the Flutter SDK locally. Simply compile the application in Xcode and automatically run scripts to integrate the DART code with the plugin. This method allows you to develop quickly iteratively using the latest code in the Flutter Module without having to execute additional commands outside of Xcode.

The following example assumes that your existing application and the Flutter Module are in adjacent directories. If you have a different directory structure, you need to adapt it to the corresponding path.

~ / Desktop/flutter / ├ ─ ─ my_flutter / │ └ ─ ─ the ios / │ └ ─ ─ flutter / │ └ ─ ─ podhelper. Rb └ ─ ─ MyApp / └ ─ ─ PodfileCopy the code



If your app (MyApp) doesn’t already have a Podfile, follow the CocoaPods Getting Started Guide to add a Podfile to your project.

1. Create the Podfile file

zhangqi59@zhangqi IosFlutter % cd /Users/... /Desktop/flutter/IosFlutter zhangqi59@zhangqi IosFlutter % pod initCopy the code

2. Add the following code to your Podfile:

Plain Text

flutter_application_path = '.. /my_flutter' load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')Copy the code

3. For each Podfile target that needs to integrate Flutter, run install_all_FLutter_PODS (flutter_APPLICation_path)

target 'MyApp' do
  install_all_flutter_pods(flutter_application_path)
end
Copy the code

4. Runpod install. Some new folders are generated

5. Then double-click IosFlutter. Xcodeproj or IosFlutter. Xcwordspace to open the corresponding native project. The file directories are as follows:

6. Next add the corresponding code to the tag files, using object-c for speech:

InAppDelegate.h:

@import UIKit;
@import Flutter;

@interface AppDelegate : FlutterAppDelegate // More on the FlutterAppDelegate below.
@property (nonatomic,strong) FlutterEngine *flutterEngine;
@end
Copy the code

The AppDelegate. M: Plain Text

// Used to connect plugins (only if you have plugins with iOS platform code).
#import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h>

#import "AppDelegate.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary<UIApplicationLaunchOptionsKey, id> *)launchOptions {
  self.flutterEngine = [[FlutterEngine alloc] initWithName:@"my flutter engine"];
  // Runs the default Dart entrypoint with a default Flutter route.
  [self.flutterEngine run];
  // Used to connect plugins (only if you have plugins with iOS platform code).
  [GeneratedPluginRegistrant registerWithRegistry:self.flutterEngine];
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

@end
Copy the code

In the ViewController. M:

Plain Text

@import Flutter; #import "AppDelegate.h" #import "ViewController.h"  @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // Make a button to call the showFlutter function when pressed. UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; [button addTarget:self action:@selector(showFlutter) forControlEvents:UIControlEventTouchUpInside]; [button setTitle:@"Show Flutter!" forState:UIControlStateNormal]; button.backgroundColor = UIColor.blueColor; Button.frame = CGRectMake(80.0, 210.0, 160.0, 40.0); [self.view addSubview:button]; } - (void)showFlutter { FlutterEngine *flutterEngine = ((AppDelegate *)UIApplication.sharedApplication.delegate).flutterEngine; FlutterViewController *flutterViewController = [[FlutterViewController alloc] initWithEngine:flutterEngine nibName:nil bundle:nil]; [self presentViewController:flutterViewController animated:YES completion:nil]; } @endCopy the code

Run. Now you have a Flutter page integrated into your iOS app. The effect is as follows:

Reference article

Build the Flutter engineering environment

Flutter. Cn/docs/develo…

Flutter. Cn/docs/develo…