Flutter 开发环境的搭建,对于前端来说还是有点复杂的,我这边由于做过 Android 开发,已经搭好 Java 和 Android 的环境,这里主要介绍 Flutter 的开发环境。
SDK下载
官方地址:https://flutter.dev/docs/development/tools/sdk/releases
推荐使用最新 Stable 版本,需要注意的是,网页浏览是没有问题,但是下载就需要想点办法了。
对此官方也给出了解决办法:https://flutter.dev/community/china
将下载地址复制出来,替换 storage.googleapis.com
域名为 storage.flutter-io.cn
即可下载,例如:
原始网址:
https://storage.googleapis.com/flutter_infra/releases/stable/macos/flutter_macos_v1.5.4-hotfix.2-stable.zip
镜像网址:
https://storage.flutter-io.cn/flutter_infra/releases/stable/macos/flutter_macos_v1.5.4-hotfix.2-stable.zip
下载后解压,我保存在 /Users/ff/Develop/Flutter/
目录下,这个路径在下面配置环境变量时需要使用。
配置镜像和环境变量
由于不能保证镜像长期有效,建议官网进行配置参照:https://flutter.dev/community/china
这里也简单介绍下:
vim ~/.bash_profile
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
# Setting PATH for Flutter
export PATH=/Users/ff/Develop/Flutter/flutter/bin:$PATH
source ~/.bash_profile
完成配置,使用 flutter -h
检测是否配置成功
检查开发环境
使用 flutter doctor
检查开发环境:
➜ ~ 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.13.6 17G7024,
locale zh-Hans-CN)
[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
! Some Android licenses not accepted. To resolve this, run: flutter doctor
--android-licenses
[!] iOS toolchain - develop for iOS devices (Xcode 10.1)
✗ libimobiledevice and ideviceinstaller are not installed. To install with
Brew, run:
brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller
✗ ios-deploy not installed. To install:
brew install ios-deploy
✗ Brew can be used to install tools for iOS device development.
Download brew at https://brew.sh/.
[!] Android Studio (version 3.4)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[!] IntelliJ IDEA Ultimate Edition (version 2019.1.3)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[!] Connected device
! No devices available
! Doctor found issues in 5 categories.
[✓] 标记成功的配置项,[!] 标记有问题的配置项。
第一部分:Flutter 环境
第二部分:Android 工具链
有些 licenses 没有接受,需要运行flutter doctor --android-licenses
,遇到(y/N)?
一路 y 即可。第三部分:iOS 工具链
libimobiledevice 和 ideviceinstaller 没有安装;ios-deploy 没有安装;brew 没有安装。
首先需要安装 brew,不然是无法执行它推荐的brew ...
命令的
使用下面命令安装 brew :
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
输入命令后,根据提示按下return
,然后输入 root 密码,后面等待就可以了。
brew 安装完成后,按照提示依次执行brew ...
命令即可。-
第四部分:Android Studio 插件
未安装 Flutter 插件和 Dart 插件
点击Install后,它会捆绑安装 Dart 插件,点击 Yes 即可,安装完成后根据提示Restart,重启后,就会发现增加了一个 Flutter 入口。
第五部分:IDEA 插件
未安装 Flutter 插件和 Dart 插件,由于我安装了 IntelliJ IDEA,所以这里也会有个提示,如果不使用 IDEA 的话,可以不用理会。第六部分:设备连接
提示你没有连接设备,当连接模拟器或者真机后,这里自然就不会有问题了。
按照上面提示,全部安装完成后,连接一台设备,再次使用 flutter doctor
检查开发环境:
➜ ~ 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.13.6 17G7024,
locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[!] iOS toolchain - develop for iOS devices
✗ 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.app/Contents/Developer
✗ CocoaPods not installed.
CocoaPods is used to retrieve the iOS platform side's plugin code that
responds to your plugin usage on the Dart side.
Without resolving iOS dependencies with CocoaPods, plugins will not work
on iOS.
For more info, see https://flutter.dev/platform-plugins
To install:
brew install cocoapods
pod setup
[✓] Android Studio (version 3.4)
[!] IntelliJ IDEA Ultimate Edition (version 2019.1.3)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] Connected device (1 available)
iOS 工具链还有有问题:
- Xcode安装不完整
根据提示执行:
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
- CocoaPods没有安装
根据提示分别执行:
brew install cocoapods
pod setup
再次使用 flutter doctor
检查开发环境:
➜ ~ 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.13.6 17G7024,
locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.1)
[✓] Android Studio (version 3.4)
[!] IntelliJ IDEA Ultimate Edition (version 2019.1.3)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] Connected device (1 available)
! Doctor found issues in 1 category.
搞定!
新建Flutter项目
启动 Android Studio,Start a new Flutter project,后面选项默认值即可。
有异议的部分是这里:
有不少人说要勾选 离线项目,不然构建项目会非常慢,卡在
Creating Flutter Project
,这个和网络状况是有关系的,我这里尝试不勾选,构建也是很快的,如果存在问题可以尝试使用手机热点,推荐大家尽量不要勾选,除非真的不能成功创建。
项目创建成功后,在 Run 的时候会出现卡在 Resolving dependencies...
的现象
这个原因是连接不到 google 仓库,可以使用阿里镜像:
maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
需要修改两个文件:
-
项目中
android/build.gradle
注释掉google()
和jcenter()
buildscript { repositories { // google() // jcenter() maven { url 'https://maven.aliyun.com/repository/google' } maven { url 'https://maven.aliyun.com/repository/jcenter' } maven { url 'http://maven.aliyun.com/nexus/content/groups/public'} } dependencies { classpath 'com.android.tools.build:gradle:3.2.1' } } allprojects { repositories { // google() // jcenter() maven { url 'https://maven.aliyun.com/repository/google' } maven { url 'https://maven.aliyun.com/repository/jcenter' } maven { url 'http://maven.aliyun.com/nexus/content/groups/public'} } }
-
Flutter SDK 中
/packages/flutter_tools/gradle/flutter.gradle
注释掉google()
和jcenter()
buildscript { repositories { // google() // jcenter() maven { url 'https://maven.aliyun.com/repository/google' } maven { url 'https://maven.aliyun.com/repository/jcenter' } maven { url 'http://maven.aliyun.com/nexus/content/groups/public'} } dependencies { classpath 'com.android.tools.build:gradle:3.2.1' } }
另外,直接 Run 起来的是 debug 版本,由于支持 Hot reload,所以安装包比较大,release 版本大小和原生安装包相差不大。
升级Flutter
使用命令 flutter upgrade
可以很方便的更新 SDK。
如果有下面提示:
Your flutter checkout has local changes that would be erased by upgrading. If
you want to keep these changes, it is recommended that you stash them via "git
stash" or else commit the changes to a local branch. If it is okay to remove
local changes, then re-run this command with --force.
只需要运行 flutter upgrade --force
即可强制升级。
参考
官网中文:https://flutter-io.cn/
中文社区:https://flutterchina.club/