Flutter开发 1.开发环境准备篇

Flutter 开发环境准备篇

1. 背景说明

该文章的前提是已经安装了AndroidStudio和Xcode，本文不会讲述AS和XCode的环境配置.
本课程基于Flutter SDK 2.10.3 + Dart SDK 2.16.1 版本做为开发基础,下载链接如下:
Flutter SDK 2.10.3
Dart SDK 2.16.1(X64)
Dart SDK 2.16.1(Arm64)

2. 开发环境SDK配置

Flutter开发环境支持以下四种操作系统，都可以做为你的开发环境，我们将以 MacOs为例来说明

Mac 下解压两个下载完成的SDK包后，需要在简单设置一下环境变量, 在命令行下:

$ vi ~/.bash_profile

编辑.bash_profile文件主要内容如下

export DART_SDK_HOME=/Users/wenchaox/Documents/dart_sdk_2.16.1/bin
export FLUTTER_SDK_HOME=/Users/wenchaox/Documents/flutter_sdk_2.10.3/bin
export PATH=${PATH}:${FLUTTER_SDK_HOME}:${DART_SDK_HOME}

保存文件后,执行如下命令能找到路径表示成功

$ source ~/.bash_profile
$ which flutter dart
  /Users/wenchaox/Documents/flutter_sdk_2.10.3/bin/flutter 
  /Users/wenchaox/Documents/flutter_sdk_2.10.3/bin/dart

你会发现你设置的dart sdk的路径并没有用，而且直接用了flutter sdk中带的dart sdk 也是可以兼容的, 直接查看一下dart 版本号发现他自带的也是 2.16.1 这样的话不用下载单独的dart sdk 也是可以的。

$ dart --version 
Dart SDK version: 2.16.1 (stable) (Tue Feb 8 12:02:33 2022 +0100) on "macos_x64"

如果版本号不对，或者为了保险起见，也可以将flutter sdk的bin目录下的dart文件删除，这时再运行就是你指定的路径了

$ which flutter dart
/Users/wenchaox/Documents/flutter_sdk_2.10.3/bin/flutter
/Users/wenchaox/Documents/dart_sdk_2.16.1/bin/dart
$ dart --version
Dart SDK version: 2.16.1 (stable) (Tue Feb 8 12:02:33 2022 +0100) on "macos_x64"

3. 开发工具

3.1 安装VsCode

Mac下开发工具可以选择的比较多，XCode、Android Studio、VsCode, 我们这里直接使用VsCode做为示例来配置。
VsCode 1.65.1

3.2 android-licenses

将下载的压缩文件解压后直接拖到Applications目录，运行后点击允许打开互联网下载的应用，这时我们执行flutter doctor 检测命令,可以看到VS Code项是检测通过的。Xcode和AS可以先不关注.

这时如果执行flutter doctor --android-licenses出错的话，需要手动安装一下android sdk command line.

flutter doctor --android-licenses
Android sdkmanager not found. Update to the latest Android SDK and ensure that the cmdline-tools are installed to resolve this.

AndroidStudio -> Preferences ->Appearance&Behavior->System Setting->Android SDK->SDK G Tools



安装成功后，可以再将执行flutter doctor --android-licenses 如果需要同意一路Y即可.

$ flutter doctor --android-licenses
All SDK package licenses accepted.======] 100% Computing updates...

3.3 安装中文扩展包

为了可以快速上手这个vscode ，你可以先安装一个简体中文的扩展包，选择Extensions左边第五个图标，输入chinese 第一项就是简体中文包,直接安装重启即可。

3.4 安装Code命令

在VsCode界面按下 CMD+SHIFT+P 输入install 回车安装

3.5 安装Flutter和Dart插件

在VsCode界面按下 CMD+SHIFT+P 输入flutter 回车安装

3.6 安装结果检测(非必需)

在VsCode界面按下 CMD+SHIFT+P 输入flutter 选择 Run Flutter Doctor 回车

在输出窗口是查看结果

[flutter] flutter doctor -v
[✓] Flutter (Channel stable, 1.22.4, on Mac OS X 10.15.7 19H1615 darwin-x64, locale zh-Hans-CN)
    • Flutter version 1.22.4 at /Users/wenchaox/Documents/flutter
    • Framework revision 1aafb3a8b9 (1 年 4 个月前), 2020-11-13 09:59:28 -0800
    • Engine revision 2c956a31c0
    • Dart version 2.10.4

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/wenchaox/Library/Android/sdk
    • Platform android-30, build-tools 30.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.4)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.4, Build version 12D4e
    • CocoaPods version 1.10.0

[!] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

[✓] VS Code (version 1.65.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.36.0

[✓] Connected device (1 available)
    • TECNO CD6j (mobile) • 06048250C7002479 • android-arm64 • Android 10 (API 29)

! Doctor found issues in 1 category.
exit code 0

3.7 手动安装插件(非必需)

选择Extensions左边第五个图标，分另输入flutter和dart可以选择自己喜欢的扩展包.