Apple Mac computer configure flutter development environment

In recent years, in the field of Internet development, cross-platform development has become more and more popular, such as RN ( React Native), Weex, and Flutter.

RN is developed in JS language and based on React. It writes native code directly through JS, and writes different codes for different platforms.
Weex is based on vue grammar, and then the engine parses the code into html, dom, or native components
Flutter's performance will be better wireless and close to the native experience. Dart is compiled by AOT and compiled into fast and predictable native code. Flutter implements a set of UI frameworks and discards the native UI framework.
RN's layout is more like css, while Flutter's layout is more like native layout

1. Introduction to Flutter

Flutter is Google's open source building user interface (UI) toolkit, which helps developers efficiently build multi-platform beautiful applications through a set of code bases, supporting mobile, web, desktop and embedded platforms. Flutter is open source, free, and has a loose open source protocol, making it suitable for commercial projects. At present, Flutter has launched a stable version 2.0.

2. Flutter Mac environment construction

2.1 Environmental requirements

To install and run Flutter, the development environment must meet the following minimum requirements:

Operating System: macOS (64-bit)
Disk Space: 700 MB (excluding Xcode or Android Studio disk space).
Tools: Flutter relies on the following command line tools. bash, mkdir, rm, git, curl, unzip, which

2.2 Get Flutter SDK

Go to flutter official website to download the latest available installation package, download page

Select macOS, there will be different versions, it is recommended to choose the latest version.

Note: The channel version of Flutter will keep changing, please refer to the official website of Flutter. In addition, in mainland China, if you want to get the installation package list or download the installation package normally, you may need to overturn the wall. Readers can also go to the Flutter github project to download the installation package. Download page

Unzip the installation package to the directory you want to install, such as:


cd ~/development
unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip

2.3 Environment variable configuration

Add Flutter related tools to the path:

export PATH=`pwd`/flutter/bin:$PATH

Since access to Flutter in China may sometimes be restricted, Flutter has officially built a temporary mirror for Chinese developers. You can add the following environment variables to the user environment variables:


export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

Note: This mirror is a temporary mirror and cannot be guaranteed to be available all the time. Readers can refer to Using Flutter in China for the latest updates on mirror servers.

The above configuration is set under .bash_profile, and the entry command is as follows

1. Command line (terminal) to enter the home page (under your username)

cd ~

2. If there is a .bash_profile file in your computer, skip one step (go to step 4)
3. Create a .bash_profile file, command: touch .bash_profile
4. Open the .bash_profile file, command: open -e .bash_profile
5. After opening Enter in the editor (configuration of environment variables)
6. Save, exit
7. Update configuration information, command: source .bash_profile

2.4 Run flutter doctor

flutter doctor

This command checks your computer's environment and displays a report in a terminal window. Dart SDK is already bundled in Flutter, there is no need to install Dart separately. Double check the command line output for additional software that may need to be installed or further tasks to be performed (in bold)

The general error will be that xcode or Android Studio version is too low, or notANDROID_HOMEenvironment variables, etc., please follow the prompts to resolve. The picture below is the result of my own detection with the command. The check mark means there is no problem, and the cross mark means that it is missing or has a problem with the version.

3. Editor settings

macOS supports developing Flutter apps for iOS and Android. Now complete at least one of the two platform setup steps to be able to build and run our first Flutter app.

3.1 iOS settings install Xcode

To develop Flutter apps for iOS, Xcode 7.2 or higher is required

We can open Developer or App Store to download and install

3.2 Setting up the iOS Simulator

To prepare to run and test your Flutter app on the iOS simulator, follow these steps:

On a Mac, find the emulator via Spotlight or use the following command

open -a Simulator

Make sure the simulator is using a 64-bit device (iPhone 5s or later) by checking the settings in the Simulator Hardware > Devices menu.
Depending on the screen size of your development machine, emulated high-definition iOS devices may overflow your screen.
Set the device scale under the emulator's Window > Scale menu 4. Run flutter runstart your app

3.3 iOS real machine running

If you want to install the Flutter app to a real iOS device, you need some additional tools and an Apple account, which needs to be set up in Xcode

Install homebrew (if you already have brew installed, skip this step).

Open a terminal and run these commands to install the tools for installing Flutter apps to iOS devices


brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup

If any of these commands fail with an error, run brew doctor and follow the instructions to fix the problem.

Follow the Xcode signing process to configure the project:

in your Flutter project directory via open ios/Runner.xcworkspace Open the default Xcode workspace.
In Xcode, select in the left side of the navigation panelRunnerproject
existRunner In the target settings page, make sure your development team is selected under General > Signing > Team. When a team is selected, Xcode will create and download a development certificate, register your account with your device, and create and download provisioning profiles (if needed)
To start running your first iOS development project, you may need to log in to Xcode with your Apple ID

The first time you run it on a real machine, you need to trust both your Mac and the development certificate on the device. When connecting your iOS device to your Mac for the first time, in the dialog box select Trust

If automatic signing in Xcode fails, verify that the project's General > Identity > Bundle Identifier value is unique

Run the startup project using the flutter run command

If you want to run on the Android platform, you also need to configure the Android environment

4. Android environment configuration

4.1 Install Android Studio

Download and install Android Studio .
Start Android Studio and execute the "Android Studio Setup Wizard". This will install the latest Android SDK, Android SDK Platform Tools and Android SDK Build Tools, which are required when Flutter develops for Android

4.2 Setting up the Android emulator

Launch Android Studio>Tools>Android>AVD Manager and select Create Virtual Device

After the simulator is installed, you can choose a device to run your first flutter project

4.3 Android Configuration Editor

Both Android Studio and VS Code are officially recommended editors

4.3.1 Android Studio installs Flutter and Dart plugins

Two plugins need to be installed:

Flutter plugin: Supports Flutter development workflows (running, debugging, hot reloading, etc.).
Dart plugin: Provides code analysis (validation when entering code, code completion, etc.).

To install these:

Start Android Studio
Open the plugin preferences (Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux)
Select Browse repositories…, select the Flutter plugin and click install
The plugin takes effect after restarting Android Studio

4.3.2 Visual Studio Code (VS Code) Installation

Install VS Code Install 1.20.1 or later
Install the Flutter plugin

Start VS Code
Call View>Command Palette…
Type 'install', then select Extensions: Install Extension action
Type flutter in the search box, select 'Flutter' in the search result list, and click Install
Select 'OK' to restart VS Code

Verify your settings with Flutter Doctor

Call View>Command Palette…
Type 'doctor', then select the 'Flutter: Run Flutter Doctor' action
See if there is a problem with the output in the OUTPUT window

Install Dart plugin

At this point, the environment configuration for flutter development has been completed, and now we can develop our first flutter project 😄

For detailed environment configuration, please go to the official website Flutter Chinese website to read carefully

🌹Welcome everyone to leave a message to exchange, criticize and correct, and learn from each other😁

Navigation

foreword
1. Introduction to Flutter
2. Flutter Mac environment construction
3. Editor settings
4. Android environment configuration
1. 4.1 Install Android Studio
2. 4.2 Setting up the Android emulator
4.3 Android Configuration Editor
1. 4.3.1 Android Studio installs Flutter and Dart plugins
2. 4.3.2 Visual Studio Code (VS Code) Installation

foreword