Build up the Flutter environment

Flutter is currently one of the hottest cross-platform developments. To do something right, it must be done right. Learning any new technology or language needs to start from the most basic engineering environment. Learning Flutter is no exception.

The preparatory work

Since Flutter is developed across screens, it is best to build a development environment on MacOS so that you can debug Android and iOS development.

Install the Android studio

Android Studio is an official Android Application Integration development environment (IDE) based on IntelliJ IDEA. We can download and install it from the official website.

Install xcode

Xcode is Apple’s official Application Integrated Development Environment (IDE) for iOS and macOS. It’s easy to install. Just search for Xcode in the App Store on macOS and install it.

Install the flutter

The source site of Flutter may not be stable in China, so Google China Developer Community (GDG) set up a temporary image to allow our Flutter command line tools to download the required resources from this image site. For macOS and Linux, open the ~/.bash_profile file in a text editor and add the following code at the end of the file to configure the environment variables for the mirror site:

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

Then, download the REQUIRED SDK from the official website and unpack it. To configure the environment variables, locate the folder containing the flutter SDK, find the bin folder, and configure macOS in the ~/.bash_profile file:

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

Then enter:

flutter doctor
Copy the code

Get tips

Xcode installation is incomplete; a full installation is necessary for iOS development. Download at: https://developer.apple.com/xcode/download/ Or install Xcode via the App Store. Once installed, run: Sudo xcode - select - switch/Applications/xcode. The app/Contents/Developer sudo xcodebuild - runFirstLaunch ✗ CocoaPods installed but not working. You appear to have CocoaPods installed but it is not working. This can happen if the version of Ruby that CocoaPods was installed with is different from the one being used to invoke it. This can usually be fixed by re-installing CocoaPods. For more info, see https://github.com/flutter/flutter/issues/14293. To re-install CocoaPods, run: sudo gem install cocoapods [!] Android Studio (Version 4.1) Qualify Flutter plugin not installed; Those who qualify Dart plugin not installed; This adds Flutter specific functionality. this adds Dart specific functionality.Copy the code

This error occurs because Xcode is not configured properly:

Xcode -select –install (xcode)
The Command Line Tools under Preferences -> Locations is also configured by default

And then follow the prompts, and then terminal input command

sudo gem install cocoapods
Copy the code

Go over here and the iOS toolchain configuration is done.

Android toolchain configuration

Android is much easier to configure than iOS. Open Android Studio –>preference–>plugins–> Enter flutter

Come here, and the setup is done. I can still hear it!

Open the first project

The SDK for Flutter provides several good demos. Find the folder of the Flutter SDK, open the familiar hello_world as seen in examples, then open it in Android Studio, after build, see the familiar page, click the triangle button

Then saw the first Flutter project

The Construction of the Flutter environment is complete.

conclusion

This is just the first step on the road to flutter development. We will continue to analyze what we have learned.

Build up the Flutter environment