Flutter学习笔记(一):开发环境配置
📅 2019-07-04 | 🖱️
🔖 flutter
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
页面: