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:

1
2
3
4
5
6
7
8
9
cd ~/Applicaion
curl -O https://storage.googleapis.com/flutter_infra/releases/stable/macos/flutter_macos_v1.5.4-hotfix.2-stable.zip

unzip flutter_macos_v1.5.4-hotfix.2-stable.zip

vi ~/.bash_profile
export PATH="$PATH:$HOME/Applications/flutter/bin"

source ~/.bash_profile

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

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

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

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

安装vscode的flutter扩展。

重新运行flutter doctor:

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

[✓] iOS toolchain - develop for iOS devices (Xcode 10.2.1)
[!] Android Studio (not installed)
[!] IntelliJ IDEA Community Edition (version 2018.3.6)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] VS Code (version 1.36.0)
[!] Connected device
    ! No devices available

! 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的项目:

1
2
3
ls ~/Applications/flutter/examples 
README.md              flutter_gallery        hello_world            platform_channel       platform_view
catalog                flutter_view           layers                 platform_channel_swift stocks
1
2
ls ~/Applications/flutter/examples/hello_world   
README.md       android         android.iml     hello_world.iml ios             lib             pubspec.lock    pubspec.yaml    test

进入hello_world目录,使用flutter运行这个例子:

1
flutter run

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

flutter-hello

参考