The course “Flutter from The Beginning to the Advanced – Practical Application” was launched, unlocking the new posture of Flutter development and covering all the core technologies of Flutter.

In this article, we will take you through a quick guide to build a Flutter development environment on the Mac platform. We will also share some tips and experience in building a Flutter development environment.

  • If you encounter problems that cannot be solved during the development of Flutter environment, you can ask questions in the Q&A section of the course, and the course teacher will provide guidance and help to you.

directory

  • System requirements
  • Setting up a FLutter mirror (optional)
  • Access to Flutter the SDK
  • IOS development environment Settings
  • Android development environment Settings
  • Install the Flutter plug-in

System requirements

To install and run Flutter on a Mac, the following minimum requirements must be met:

  • Operating system: macOS (64-bit)
  • Disk space: 700 MB (not including Xcode or Android Studio disk space).
  • Tools: Flutter relies on the following command-line tools:bash curl git 2.x mkdir rm unzip which

Setting up a FLutter mirror (optional)

Since access to Flutter may 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:

//Macintosh HD⁩ ▸ ⁨Users⁩ ▸ ⁨ Your user name ▸ ⁨. Bash_profile export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cnCopy the code

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

Access to Flutter the SDK

1. Download the latest available Flutter installation package from the Flutter website.

2. Decompress the installation package to a directory you want to install, for example:

$CD ~/development $unzip ~/Downloads/ flutter_macOS_v1.2.1-stablesCopy the code

3. Add flutter tools to your path:

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

This code can only temporarily set the PATH environment variable to the current command line window. To permanently add a Flutter to your PATH, do the following:

$ cd ~
$ vim .bash_profile
Copy the code

Then add:

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

Remember to save the file afterwards.

Run the flutter doctor

After the above path configuration is complete, you need to close the terminal and restart it, and then run:

$ flutter doctor
Copy the code

This command examines your 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) :

Such as:

[-] Android toolchain to develop for Android devices, the Android SDK at/Users/obiwan/Library/Android SDK ✗ Android SDK is missing command line tools; • Try re-installing or updating your Android SDK, visit https://flutter.dev/setup/#android-setup for detailed instructions.Copy the code

Common errors are that the XCode or Android Studio version is too low, or there is no ANDROID_HOME environment variable, etc. Check your environment variables by referring to the configuration of environment variables:

Bash_profile #Android environment variable export ANDROID_HOME=/Users/ Your user name /Library/Android/ SDK Android tools export PATH=${PATH}:${ANDROID_HOME}/emulator #Android Tools export PATH=${PATH}:${ANDROID_HOME}/tools Export PATH=${PATH}:${ANDROID_HOME}/platform-tools #Android NDK PATH ANDROID_NDK_HOME = / Users/username/Library/Android/the NDK/Android - the NDK - r10e # FLutter mirror export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn #Flutter environment variables export PATH=/Users/jph/Documents/flutter/bin:$PATHCopy the code

The first time a flutter command (such as a flutter Doctor) is run, it downloads its own dependencies and compiles them. It will run much faster later.

IOS development environment Settings

Install Xcode

To develop iOS apps with Flutter, Xcode 9.0 or later is required:

1. Install Xcode 9.0 or later (download via link or from apple App Store)

2. Configure the Xcode command line tool to use the newly installed Xcode version S

$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
Copy the code

The preceding path is for the latest version of Xcode. If you want to use a different version of Xcode, specify the path.

3. Ensure that the Xcode license agreement is agreed by opening Xcode once or by using the command sudo xcodebuild-license

You can then run the Flutter App on your iOS device or emulator using Xcode.

Setting up the iOS Emulator

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

1. Run the following command on the terminal to open an iOS emulator:

$ open -a Simulator
Copy the code

2. Make sure you have a 64-bit iPhone 5S or newer emulator open by going to Hardware > Devices in the emulator menu bar

3. If the simulator is too large, you can set the device Scale under the Window> Scale menu of the simulator

Create and run a simple Flutter project

1. Run the following command to create a Flutter project

$ flutter create my_app
Copy the code

2. A Flutter project named my_app will be created in the current folder and run with the following command:

$ cd my_app
$ flutter run
Copy the code

How do I install Flutter on a real iOS machine?

To install the Flutter app onto a real iOS device via Lutter Run, you need some extra tools, an Apple account, and Settings in Xcode:

Of course, it’s much easier to run Flutter on a real machine with XCode, just click on it
runButton, you can select the two different operating modes according to need;

1. Install Homebrew (skip this step if brew is already installed).

2. Make sure Homebrew is updated

$ brew update
Copy the code

3. Open the terminal and run these commands to install the tools used to install the Flutter application onto an iOS device

$ brew install --HEAD usbmuxd $ brew link usbmuxd $ brew install --HEAD libimobiledevice $ brew install ideviceinstaller  ios-deploy cocoapods $ pod setupCopy the code

If any of these commands fails with an error, run brew Doctor and follow the instructions to resolve the problem.

4. Follow the Xcode signing process to configure your project:

  • Pass in your Flutter project directoryopen ios/Runner.xcworkspaceOpen the default Xcode workspace
  • In Xcode, select the Runner project on the left side of the navigation panel
  • On the Runner Target Settings page, make sure your development team is selected under General > Signature > Teams. When you select a team, Xcode creates and downloads development certificates, registers your account with your device, and creates and downloads configuration files (if needed)
    • To start your first iOS development project, you may need to log in to Xcode with your Apple IDAny Apple ID supports development and testing, but publishing your App to the App Store requires a $99 developer account.

  • When you attach a real device for iOS development for the first time, 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.

Then, go to the Settings app on your iOS device, choose General > Device Management and trust your credentials.

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

5. Start the project by running Flutter Run

$ flutter run
Copy the code

Android Development environment setup & Install the Flutter plugin

Install the Android Studio

1. Download and install Android Studio

Because the Android site is located abroad, if your network cannot access the first address, you can choose to use the Chinese website provided by Google for Chinese developers.

In addition, about the Android Studio installation and configuration, official Android there is a detailed documentation developer. The Android, Google. Cn/Studio/intr… , you can refer to according to your needs;

If you encounter problems during the installation process that cannot be solved, you can find them in our course
Q&a questionsfor
Ask questions;

2. Start Android Studio and run the Android Studio Installation Wizard. This will install the latest Android SDK, Android SDK platform tools and Android SDK build tools

Flutter plug-in installation

  • Open the Android Studio
  • Open Preferences > Plugins (macOS), File > Settings > Plugins (Windows & Linux)
  • Select Browse Repositories to search for the Flutter Plugin
  • Then click Install, and then install the Dart plug-in
  • When you’re done, select restart Android Studio

How do I run Flutter on an Android emulator?

To prepare to run and test your Flutter application on an Android emulator, follow these steps:

  • Enable VM Acceleration on your machine;
  • Start Android Studio>Tools>Android>AVD Manager and selectCreate Virtual Device;
  • Select a device and select Next;
  • Select one or more system images for the version of Android you want to emulate, and then select Next. X86 or x86_64 images are recommended.
  • For Emulated Performance, select Hardware-gles 2.0 to enable Hardware acceleration.

  • Verify that the AVD configuration is correct, then select Finish;

    If you are not sure about the above steps, refer to the Android official Managing AVDs documentation.

    If you can’t solve any problems during installation, you can ask questions in the Q&A section of our course.

  • In Android Virtual Device Manager, click on the toolbarRun, the emulator starts and displays the startup screen of the selected operating system version or device;
  • throughflutter runRun the startup project;

How to run on Android real machine?

To be ready to run and test your Flutter application on an Android device, you need Android 4.1 (API Level 16) or higher

By default, the Android SDK version used by Flutter is based on the version of your ADB tool. If you want Flutter to use a different version of the Android SDK, you must change the ANDROID_HOME environment variable to the SDK directory.

Learn more practical tips and best practices about building a development environment
Development of Ctrip App based on Flutter1.x – Development Environment ConstructionPart of the course.

  • If you have any unsolvable problems during the learning process, you can ask questions in the COURSE QUESTION and answer area, and the course teacher will give you guidance and help.

reference