Flutter学习笔记(一)：开发环境配置

2019-07-04

1.flutter开发环境安装和配置 #

1.1 安装xCode #

安装或更新Xcode，之后运行sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer 终端运行open -a Simulator打开iOS模拟器，点击Hardware - Device - Manage Device，查看各个iOS设备的模拟器齐全。

1.2 flutter安装和配置 #

下载flutter SDK：

1cd ~/Applicaion
2curl -O https://storage.googleapis.com/flutter_infra/releases/stable/macos/flutter_macos_v1.5.4-hotfix.2-stable.zip
3
4unzip flutter_macos_v1.5.4-hotfix.2-stable.zip
5
6vi ~/.bash_profile
7export PATH="$PATH:$HOME/Applications/flutter/bin"
8
9source ~/.bash_profile

使用flutter version可以打印出长长的版本列表。

使用flutter doctor命令检查相关依赖是否安装完全，这里只安装iOS开发相关的环境，根据flutter doctor的提示安装平台相关的依赖，我这里还需安装以下内容：

1brew update
2brew install --HEAD usbmuxd
3brew link usbmuxd
4brew install --HEAD libimobiledevice
5brew install ideviceinstaller
6brew install ios-deploy
7brew install cocoapods
8pod setup

其中，libimobiledevice是调用iOS模拟器的一个第三方库，flutter使用这个库调用iOS模拟器运行项目。

安装vscode的flutter扩展。

重新运行flutter doctor:

 1flutter doctor
 2Doctor summary (to see all details, run flutter doctor -v):
 3[✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.14.5 18F132, locale en-US)
 4[✗] Android toolchain - develop for Android devices
 5    ✗ Unable to locate Android SDK.
 6      Install Android Studio from: https://developer.android.com/studio/index.html
 7      On first launch it will assist you in installing the Android SDK components.
 8      (or visit https://flutter.dev/setup/#android-setup for detailed instructions).
 9      If the Android SDK has been installed to a custom location, set ANDROID_HOME to that location.
10      You may also want to add it to your PATH environment variable.
11
12[✓] iOS toolchain - develop for iOS devices (Xcode 10.2.1)
13[!] Android Studio (not installed)
14[!] IntelliJ IDEA Community Edition (version 2018.3.6)
15    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
16    ✗ Dart plugin not installed; this adds Dart specific functionality.
17[✓] VS Code (version 1.36.0)
18[!] Connected device
19    ! No devices available
20
21! Doctor found issues in 4 categories.

这里只配置了iOS相关的内容，注意[!] Connected device ! No devices available，是因为我们还没有启动iOS模拟器。可以使用open -a Simulator打开一个模拟器，重新运行flutter doctor提示[✓] Connected device (1 available)。

2.运行HelloWorld样例 #

flutter的安装装目录中的example目录中包含了各种例子，其中包含一个hello_world的项目：

1ls ~/Applications/flutter/examples 
2README.md              flutter_gallery        hello_world            platform_channel       platform_view
3catalog                flutter_view           layers                 platform_channel_swift stocks

1ls ~/Applications/flutter/examples/hello_world   
2README.md       android         android.iml     hello_world.iml ios             lib             pubspec.lock    pubspec.yaml    test

进入hello_world目录，使用flutter运行这个例子：

1flutter run

可以在模拟器中看到下面的hello world页面：

flutter-hello

参考 #

MacOS install Flutter