导航
导航
文章目录
  1. 1. 准备
  2. 2. 安装Xcode和Android Studio
    1. 2.1 Xcode
    2. 2.2 Android Studio
  3. 3. 配置Flutter
    1. 3.1 命令行中通过git下载flutter SDK包
    2. 3.2 配置环境变量
    3. 3.3 检查flutter是否设置成功
    4. 3.4 开发工具选择
    5. 3.5 一些小技巧

flutter开发系列之一--环境配置

flutter出来已经一段时间,相信有不少开发同学都去尝试了,现在跨平台开发技术火爆移动开发圈,比如RN,Weex等等,但是这些方案如果不是有特殊需求,一般并没有动力去学,flutter不同,google大厂出品,值得信赖。这系列文章主要是用来记录自己学习flutter的一些经验和遇到的问题。

1. 准备

因我使用的开发环境是Mac系统,因此本系列所有的配置都是Mac为主
由于网络问题,部分用户可能无法打开flutter官网,这里推荐Flutter中文站

在开始flutter之前,请先安装好Xcode和Android Studio

2. 安装Xcode和Android Studio

2.1 Xcode

直接在Mac App Store下载安装Xcode。

安装完Xcode后还需要安装一些依赖库。而这些库需要通过brew安装。

  1. 首先安装brew(已经安装过的跳过此步骤)
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  1. 安装一些依赖库
brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup
  1. 命令行启动模拟器
open -a Simulator  //打开默认模拟器

或者也可以打开指定的模拟器

xcrun instruments -s //列出你安装的所有可用的设备
xcrun instruments -w "iPhone X" //打开指定模拟器

2.2 Android Studio

温馨提示,这些步骤可能因为国内网络问题导致不成功,请自行解决访问国外网络的问题。

  1. 下载并安装Android Studio

  2. 启动AS,根据配置向导一步步安装即可。

  3. 因Flutter默认使用的Android API 27和buildtools 27.0.3。而AS默认安装的最新版。所以这两个东西需要我们自己手动安装。按照下图打开SDK Manager。

打开后界面如下,按图勾选show package details

然后选中Android SDK Platform 27

接下来切换到SDK tools,选中27.0.3

最后点击下面的apply,弹出下载界面,等待安装完成即可。

3. 配置Flutter

3.1 命令行中通过git下载flutter SDK包

git clone -b master https://github.com/flutter/flutter.git
./flutter/bin/flutter --version

或者点击此处直接下载zip压缩包

3.2 配置环境变量

以ohmyzsh为例,在.zshrc中添加

export PATH=`pwd`/flutter/bin:$PATH  //pwd是你flutter sdk目录的前置路径

修改完成后记得source一次使配置生效

source ~/.zshrc

3.3 检查flutter是否设置成功

命令行运行如下命令

flutter doctor

运行完成会出现一些提示,成功的会打 ✓,有缺失的会打 ✗,提示 ✗ 的下面有对应提示,根据提示运行对应命令或安装Flutter插件。插件安装请查看下面的开发工具选择章节。

示例:

 ~ flutter doctor                                                                              
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, v0.5.8-pre.109, on Mac OS X 10.13.6 17G65, locale zh-Hans-CN)
[!] Android toolchain - develop for Android devices (Android SDK 28.0.1)
✗ Android SDK file not found: /Users/simon/Library/Android/sdk/platforms/android-28/android.jar.
[✓] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
[✓] Android Studio
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] Android Studio (version 3.1)
[!] IntelliJ IDEA Ultimate Edition (version 2018.1.5)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] VS Code (version 1.25.1)
[!] Connected devices
! No devices available

! Doctor found issues in 3 categories.

糟糕,我运行flutter doctor后提示了一些问题,Android toolchain提示警告!。赶紧看看是什么问题,原来是
✗ Android SDK file not found: /Users/simon/Library/Android/sdk/platforms/android-28/android.jar.
因为Flutter版本升级,可能需要的API版本发生变化。上面提示我android 28找不到,那我就按照前面的步骤,去安装一下Android SDK 28.0.1。

如果你此时下面的IDE全都是 ✗,请不要惊慌,下面的开发工具选择章节会教你插件如何安装。到此时你只需要保证前面的三项都显示 ✓就行了。
可能你会好奇为什么会有这么多 ✗,其实仔细看这些提示。
第一行是Flutter SDK的一些信息,一般都是打钩。
第二行是Android环境的一些提示,如果打 ✗,就安装提示解决对应的问题,比如我这个提示缺失android sdk 28,那么按照前面的步骤安装好即可。
第三行是iOS的开发环境,如果按照上面的步骤都完成的话,一般不会有问题,如果也提示 ✗,按照提示解决。
后面的是你本地支持Flutter开发的一些IDE工具,我一般使用Android Studio 和VScode。我这里有两个版本的Android Studio。但是我常用的是3.1。所以我只需要保证Android Studio(version 3.1)和VS Code打钩即可,其他的都是提示你缺少Flutter插件。

好了,我刚已经按照提示安装android 28了。再次运行flutter doctor看看结果。

 ~ flutter doctor                                                                             
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, v0.5.8-pre.109, on Mac OS X 10.13.6 17G65, locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK 28.0.1)
[✓] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
[✓] Android Studio
Flutter plugin not installed; this adds Flutter specific functionality.
Dart plugin not installed; this adds Dart specific functionality.
[✓] Android Studio (version 3.1)
[!] IntelliJ IDEA Ultimate Edition (version 2018.1.5)
Flutter plugin not installed; this adds Flutter specific functionality.
Dart plugin not installed; this adds Dart specific functionality.
[✓] VS Code (version 1.25.1)
[!] Connected devices
! No devices available

! Doctor found issues in 2 categories.

Good,Android toolchain已经正确的提示 ✓ 了。
此时,我们的环境便已经搭建好了,接下来只需要安装好Flutter提供的插件就能开始开发啦。

3.4 开发工具选择

开发工具一般使用VS Code、Android Studio、IntelliJ。
根据实际使用对比,推荐使用Android Studio,毕竟是谷歌亲儿子,插件完善度比VS Code的高,当然会后续发展也许VS Code会完善,到时候用也不错。

  1. Android Studio
    以Android Studio为例,看看我们如何安装Flutter的插件。

在输入框中输入flutter,点击安装。
-w824

  1. Vs Code

检查是否安装成功,打开命令面板,输入flutter

3.5 一些小技巧

Flutter开发和其他一样,也需要引入各种库,但是部分网络情况下可能会出现依赖库无法下载的问题,我们可以指定国内的镜像地址。

  1. 在环境变量中配置国内源(以ohmyzsh为例,在.zshrc中添加)
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

然后运行

source ~/.zshrc
  1. Flutter更新
flutter upgrade
  1. Flutter切换最新版
    Flutter目前还在迭代阶段,默认提供的beta版本,如果我们想使用preview版本该怎么办呢?
    可以通过flutter channel命令来切换
 ~ flutter channel                                                                            
Flutter channels:
* beta
dev
master

执行flutter channel发现默认指向是beta,我们通过下面的命令可以切换到master

flutter channel master

文章参考: https://flutter.io/setup-macos/

打赏
扫一扫,提供动力能源
  • 微信扫一扫
  • 支付宝扫一扫