The Apple Mac is configured with the Flutter development environment

Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

📝 [Flutter] learning to form a record, [programmer essential knowledge]

📔 Tip of the day — Configure the Flutter development environment for your Mac

preface

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

RNusingJSLanguage development, basedReactIs directly throughJSWrite native code and write different code for different platforms
WeexIs based onvueSyntax, and then the engine parses the code intohtml.domOr native components
FlutterThe performance will be better and the wireless will be close to the native experience,DartisAOTCompiled into fast and predictable native code, Flutter implements its own UI framework, discarking the native UI framework
RNThe layout is more likecssAnd theFlutterThe layout is more likenativelayout

1. Introduction of Flutter

Flutter is Google’s open source Build User interface (UI) toolkit that helps developers efficiently build beautiful applications across multiple platforms, including mobile, Web, desktop, and embedded platforms, using a code base. Flutter is open source, free and has a loose open source license for commercial projects. Flutter is currently available in a stable version 2.5.

2. Build the Flutter Mac environment

2.1 Environment Requirements

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

Operating system:macOS(64 – bit)
Disk space:700 MB(not includingXcodeorAndroid StudioDisk space).
Tools:FlutterRely on the following command-line tools.bash.mkdir.rm.git.curl.unzip.which

2.2 Obtaining the Flutter SDK

Download the latest available flutter installation package from the Download page on the Flutter website

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

Note: Channel versions of Flutter are subject to change. Please refer to the Website of Flutter. In addition, you may need to climb the wall to get the list or download the package in Mainland China. Readers can also go to the Flutter Github project to download the package and download the page

Unzip the installation package to the directory you want to install, for example:

CD ~ / development unzip ~ / Downloads/flutter_macos_v0. 5.1 beta. ZipCopy the code

2.3 Configuring Environment Variables

Add tools for Flutter to path:

export PATH=`pwd`/flutter/bin:$PATH
Copy the code

Since access to Flutter may sometimes be restricted in China, Flutter officials have created a temporary mirror for Chinese developers who can add the following environment variables to their user environment variables:

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

Note: This image is temporary and is not guaranteed to be available all the time. Please refer to Using Flutter in China to get the latest information about the image server.

The above configuration is set under.bash_profile. Enter the following command

Enter the home page (your user name)

cd ~

If you have.bash_profile on your computer, skip one step (go to Step 4)

Create the.bash_profile file with the command touch.bash_profile \

To open the. Bash_profile file, run the open-e. bash_profile\ command

5. Enter (environment variable configuration) in the open editor 6. Save and exit 7. To update the configuration information, run the source.bash_profile command

2.4 Run the Flutter Doctor

flutter doctor
Copy the code

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

Common errors are that the xcode or Android Studio version is too low, or there is no ANDROID_HOME environment variable, etc. Please follow the instructions. The figure below is the result of my own command detection, checked means there is no problem, crossed means missing or version problems.

3. Editor Settings

MacOS supports Flutter application development 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 application.

3.1 iOS Settings Install Xcode

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

We could open Developer or App Store and download it

3.2 Setting up the iOS Emulator

To prepare to run and test the Flutter application on the iOS emulator, follow these steps:

inMacbySpotlightOr use the following command to find the emulator

open -a Simulator
Copy the code

By checking the simulatorHardware > DevicesMenu Settings to ensure that the emulator is in useA 64 - bitEquipment (iPhone 5sOr later).
Depending on the screen size of your development machine, an emulated HD iOS device may cause your screen to overflow.
In the simulatorWindow> ScaleSet device ratio under menu 4. Runflutter runLaunch your app

3.3 iOS running on a real machine

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

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

Open the terminal and run these commands to install the tools used to install the Flutter application on your iOS device

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

If any of these commands fail and an error occurs, run Brew Doctor and follow the instructions to resolve the problem.

Follow the Xcode signing process to configure the project:

Open the default Xcode workspace in your Flutter project directory by opening ios/Runner. Xcworkspace.
In Xcode, select the Runner project on the left side of the navigation panel
On the Runner Target Settings page, make sure you select your development team under General > Signature > Teams. When selecting a team, Xcode creates and downloads development certificates, registers your account with your device, and creates and downloads configuration files (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 a real machine, you need to trust both your Mac and the development certificate on that device. When connecting an iOS device to a Mac for the first time, select Trust in the dialog box

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

Run the flutter run command to start the project

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

4. Android environment configuration

4.1 Installing Android Studio

Download and install Android Studio.
Start theAndroid StudioAnd then execute"Android StudioInstallation Wizard. This will install the latestAndroid SDK.Android SDKPlatform tools andAndroid SDKBuild tools, this isFlutterforAndroidRequired for development

4.2 Setting the Android Emulator

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

Now that the simulator is installed, you can choose a device to run your first Flutter project

4.3 Android Configuration Editor

Android Studio and VS Code are both officially recommended editors

4.3.1 Android Studio install the Flutter and Dart plug-ins

Two plug-ins need to be installed:

FlutterPlug-ins: supportFlutterDevelop workflows (run, debug, hot reload, etc.).
DartPlug-ins: provides code analysis (validation as input, code completion, etc.).

To install these:

Start theAndroid Studio
Open the plug-in preferences(Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux)
chooseBrowse the repositories..., the choice ofFlutterPlug-in and clickinstall
restartAndroid StudioAfter plug-in takes effect

4.3.2 Visual Studio Code (VS Code) installation

Install the Flutter plugin with VS Code 1.20.1 or later

Start theVS Code
callThe View > Command Palette...
The input'install'And then selectExtensions: Install Extension action
Enter in the search boxflutter, select from the search result list"Flutter"And then clickInstall
choose'OK'Restart the VS Code

Verify your Settings with Flutter Doctor

callThe View > Command Palette...
The input'the doctor'And then select'Flutter: Run Flutter Doctor' action
To view"OUTPUT"Is there a problem with the output in the window

Installing the Dart plug-in

Now that the environment for flutter development is configured, you can develop your first Flutter project 😄

For detailed environment configuration, visit the website of Flutter Chinese for more information

5. Write in the back

Follow me, more content continues to output

CSDN
The Denver nuggets
Jane’s book

🌹 if you like, give it a thumbs up 👍🌹

🌹 feel harvest, can come to a wave of collection + attention, so as not to find you next time I 😁🌹

🌹 welcome everyone to leave a message exchange, criticism and correction, forwarding please indicate the source, thank you for your support! 🌹