《聚焦Flutter.1》Flutter开发环境配置(MacOS篇)

呛呛嗟
6,225 阅读3分钟

前言

本文，讲的是MacOS系统下，下载、安装和配置Flutter开发环境。

本文所基于的 Flutter 版本信息如下：

Flutter version: 2.2.1
Dart version: 2.13.1
Android Studio version: 4.2.1
Flutter Plugin version: 57.0.2
MacOS version: 11.4
Xcode: 12.5

Flutter开发环境配置的基本步骤：

  1. 获取 flutter sdk;
  2. 配置必须的环境变量；
  3. 安装 Flutter 相关依赖项，并检查环境是否OK；

获取 Flutter SDK

下载flutter

下载 flutter sdk，有如下几种方式：

  1. 官方下载最新的stable稳定版源码压缩包；
  2. 克隆官方git仓库的stable分支，这种方式可持续更新【推荐】；

本文采用的是第二种方式，直接从GitHub仓库clone。

通过如下命令克隆flutter仓库到本地：

# 1.直接下载stable分支的仓库代码
$ git clone https://github.com/flutter/flutter.git -b stable

# 2.可以指定clone的深度，会屏蔽历史提交记录，下载会更快
# --depth 用来指定克隆的深度，1表示克隆最近的一次commit
$ git clone https://github.com/flutter/flutter.git -b stable --depth 1

下载遇到的问题

1. git clone flutter 遇到"SSL_read: Connection was reset"？

PS D:\devlibs\flutter\sdk> git clone -b stable https://github.com/flutter/flutter.git
Cloning into 'flutter'...
fatal: unable to access 'https://github.com/flutter/flutter.git/': OpenSSL SSL_read: Connection was reset

#【原因】
git客户端访问github没有走ssl的代理

#【解决办法】
# 方法一：把 https 连接改成 git【不推荐】
$ git clone -b stable git://github.com/flutter/flutter.git

# 方法二：在开启代理软件的前提下，手动配置git的代理端口【推荐】
# 设置代理的命令(注意代理端口“port”: 需要查看本机的代理端口)
$ git config --global http.proxy http://127.0.0.1:[port]
$ git config --global https.proxy http://127.0.0.1:[port]
# 如果之后取消git代理，通过如下命令如下进行重置：
$ git config --global --unset http.proxy 
$ git config --global --unset https.proxy

配置环境变量

  1. 根据flutter源码，配置flutter sdk必须的环境变量，向.zshrc环境变量文件中，加入如下环境变量配置：
#【环境变量】
# android sdk
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/build-tools/28.0.3/

# Android NDK（flutter2.2.1需要依赖ndk 21.1.6352462,否则编译不过）
export ANDROID_NDK_HOME=$ANDROID_HOME/ndk/21.1.6352462
export PATH=$PATH:$ANDROID_NDK_HOME

# Flutter
# Flutter SDK
export FLUTTER_HOME=$PATH:$HOME/devlibs/flutter
export PATH=$PATH:$FLUTTER_HOME/bin
# 国内资源镜像
# flutter mirror
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
# pub mirror	
export PUB_HOSTED_URL=https://pub.flutter-io.cn

# Dart SDK(flutter自带dart-sdk, 所以不需要额外下载)
export DART_HOME=$FLUTTER_HOME/bin/cache/dart-sdk
export PATH=$PATH:$DART_HOME/bin
  1. 通过终端命令验证配置的flutter环境变量是否可用：
$ which flutter
/Users/userx/devlibs/flutter/bin/flutter
  1. 命令行验证flutter和dart 命令是否来自同一bin目录。
$ which flutter dart
/Users/userx/devlibs/flutter/bin/flutter
/Users/userx/devlibs/flutter/bin/dart
# 查看dart版本
$ dart --version

安装 Flutter 相关依赖项

开发二进制文件预下载

flutter 命令行工具会下载不同平台的开发二进制文件，如果需要一个封闭式的构建环境，或在网络可用性不稳定的情况下使用等情况，你可能需要通过下面这个命令预先下载 iOS 和 Android 的开发二进制文件：

$ flutter precache

检查flutter环境

flutter doctor 命令用来检查Flutter环境是否OK, 并安装缺少的依赖库；

初次运行此命令，会执行如下操作：

  • 会进行基础依赖安装，包括dart库和部分基础库；
  • 并检查flutter的Xcode和Android studio环境配置，会显示最终检查和安装的结果；

执行flutter doctor命令，按提示操作，直到显示如下信息标识配置完成:

[user:~xxx]$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.0.0, on Mac OS X 10.14.2 18C54, locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK 28.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.1)
[✓] Android Studio (version 3.3)
[✓] IntelliJ IDEA Ultimate Edition (version 2018.3.3)
[✓] VS Code (version 1.30.2)
[✓] Connected device (1 available)

• No issues found!

如果报错，请按照错误日志修改；

$ flutter doctor
....
# 如: 初次配置环境时，会提示接受android flutter相关的licenses
$ flutter doctor --android-licenses

Android环境配置

  1. Android SDK：运行Android应用的基础配置，此处不做赘述。
  2. NDK: flutter2.2.1需要依赖ndk 21.1.6352462, 否则Android Studio中单独编译android模块会报错。

Flutter 版本更新

通过如下命令检查并升级 flutter 版本：

$ flutter upgrade

Flutter 常用命令

# 帮助命令
flutter config -h

#【flutter环境信息】
# 检查flutter环境是否配置好
flutter doctor
# 查看系统中flutter相关环境的配置
flutter doctor -v
# 检查并升级flutter
flutter upgrade 

#【分支】
# 查看当前使用的分支：
flutter channel
# 切换分支：
# 切换beta分支
flutter channel beta 
# 切换master分支
flutter channel master

#【更新】
# 获取pubspec.yaml文件中列出的所有依赖包：
flutter packages get
# 获取pubspec.yaml文件中列出的所有依赖包的最新版本
flutter packages upgrade 

#【设备相关】
# 查看flutter识别的设备
$ flutter devices 

#【运行应用】
flutter run

IDE编程环境

这里推荐使用 android studio 作为编码IDE，Android Studio为Flutter提供完整的IDE可视化开发体验，毕竟是Google定制IDE。当然也可以vscode或IDEA。

不管是 android studio、IDEA、vscode，只需要安装 flutter 和 dart 插件，就完成了IDE编程环境的配置。

创建项目

命令行创建

# 创建flutter项目(Android模块默认使用Kotlin并支持AndroidX，iOS模块默认使用Swift)
$ flutter create myapp
# 相当于
$ flutter create -i swift -a kotlin myapp
# 自定义包名的创建方式
$ flutter create --org com.focus -i swift -a kotlin myapp
# 创建flutter项目，Android端基于java, ios端基于object-c(--org 标识组织)
$ flutter create --org com.focus -i objc -a java myapp

# 支持AndroidX的创建方式(flutter 2.0以前默认创建的Android模块如果要使用AndroidX，需要手动配置)
$ flutter create --org com.focus -i swift -a kotlin --androidx myapp

# 检查设备是否在运行
$ flutter devices
# 运行应用程序:
$ cd myapp
$ flutter run

# flutter run 后命令界面常用快捷键
# 热重载
r
# 热重载重启
R
# 显示网格，这个可以很好的掌握布局情况
p
# 切换android和ios的预览模式
o 
# 退出调试预览模式
q

Android Studio

Android Studio 为Flutter提供了完整的可视化的创建项目方式，同时还提供了非常舒适的编码环境和调试工具。

Android Studio 创建 Flutter 项目时，只需按照可视化界面的提示，根据需要选择支持的功能，即可快速的完成项目的创建。

应用打包

Android应用打包

  1. 命令行创建签名
# 1> 先确定秘钥信息如下：
keystore password: focus1024
alias: focus_flutter
key password: focus2048
validity(years): 100
first and last name(姓名): thlllzq
organizational unit(组织): focus
organization：focus
city and locality(城市和地区)：shanghai
state or province(州或省)：shanghai
country code(国家代码): CHN
--------------------
# 2> 再通过命令行创建秘钥：
# 输入以下keytool命令生成jks秘钥，并按提示填写额外的配置信息，最后以Y结束。
$ keytool -genkey -v -keystore keystore.jks -keyalg RSA -keysize 2048 -validity 36500 -alias focus_flutter -storepass focus1024 -keypass focus2048
  1. 为Android模块配置app的打包签名信息;
# 1.在“project/app/”目录下创建“key.properties”秘钥属性文件，并配置如下配置：
--------------------
# key.properties
storePassword=focus1024
keyPassword=focus2048
keyAlias=focus_flutter
storeFile=keystore.jks
--------------------

# 2 build.gradle中配置release签名和编译类型
# build.gradle
--------------------
# 在android{}配置信息前，加载keystore.jks的配置信息
def keystoreProperties = new Properties()
def keystorePropertiesFile = rootProject.file('app/key.properties')
if (keystorePropertiesFile.exists()) {
    keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
}
...
android {
    signingConfigs {
        # 读取秘钥配置文件中的签名秘钥
        release {
            keyAlias keystoreProperties['keyAlias']
            keyPassword keystoreProperties['keyPassword']
            storeFile keystoreProperties['storeFile'] ? file(keystoreProperties['storeFile']) : null
            storePassword keystoreProperties['storePassword']
        }
    }
    buildTypes {
        release {
            signingConfig signingConfigs.release
        }
    }
}
--------------------
  1. 打包
# “flutter build”默认打release包,是包含所有目标ABI编译代码的胖apk,初始项目打包大小为15.4MB.
$ flutter build apk
# “--split-per-abi”设置按不同目标ABI分别打包,不同ABI的包更小。
$ flutter build apk --split-per-abi
# 分包打包，包含如下几个类型apk，初始项目打包，单个包大小约为5MB.
[project]/build/app/outputs/apk/release/app-armeabi-v7a-release.apk
[project]/build/app/outputs/apk/release/app-arm64-v8a-release.apk
[project]/build/app/outputs/apk/release/app-x86_64-release.apk
# 指定ABI架构打包
$ flutter build apk --target-platform android-arm
  1. 命令安装apk到设备：
# 默认安装的是root/build/app/outputs/app.apk
# (打debug或release包会在同一位置生成app.apk文件)
flutter install

多平台运行

iOS

模拟器

# 打开IOS模拟器
$ open -a Simulator
# 运行应用到模拟器
$ flutter run

真机

Flutter 项目运行到 iOS 真机，需要在Xcode中为ios模块配置开发者信息。

需要用 Xcode 打开ios模块，按照如下步骤来运行app。

# project->flutter->open iOS module in Xcode
# Flutter 支持 iOS 8.0+

1. 在Xcode中,打开App的iOS目录中的 Runner.xcworkspace。
2. 在Xcode的项目导航栏中选择Runner,在Runner配置窗口来配置App：
-----------------------
->[General]
    Display Name: 设置应用名称
    Bundle Identifier: 设置包名(AppID)
->[Signing & Capabilities]
    Team: 设置Apple开发者账号
->[Info】
		Bundle name：设置应用名
-----------------------
3. 连接iPhone手机，手机会提示信任；
3. 安装应用：输入命令“flutter run”即可将应用安装到iPhone设备。
4. 安装信任问题：第一次安装到手机无法打开，会提示到设置里设置信任后再运行!!!
-----------------------
iPhone设置信任：设置->通用->设备管理->选择信任的开发者；
-----------------------

Android

此处假设您已经配置好了Android必须的SDK、JDK、Android-Studio等工具，并且您的环境可以跑Android应用了；

模拟器

Android Studio avd 模拟器创建：Android 4.1（API level 16）或更高版本的 x86 或 x86_64 的 Android 模拟器设备, Emulated Performance(仿真性能) 要选择 Hardware - GLES 2.0 以启用硬件加速。

下面是操作Android模拟器的相关命令：

#【模拟器】
# android模拟器列表
$ ~/Library/Android/sdk/tools/./emulator -list-avds
# 打开一个android模拟器
$ ~/Library/Android/sdk/tools/./emulator @PixelXL
$ ~/Library/Android/sdk/tools/./emulator -netdelay none -netspeed full -avd PixelXL
$ ~/Library/Android/sdk/tools/./emulator -netdelay none -netspeed full @PixelXL
# -netdelay none :设置模拟器的网络延迟时间，默认为none，就是没有延迟。
# -netspeed full: 设置网络加速值，full代表全速。

运行项目到Android设备：

# 查看flutter识别的设备
$ flutter devices 
# 运行启动您的应用程序 
$ flutter run

issues

  • flutter upgrade 或 flutter packages get 报冲突Lock问题!!!
waiting for another flutter command to release the startup lock...
# 解决办法：删除flutter/bin/cache/lockfile文件重新执行命令即可。
  • flutter无法连接设备
连锁问题：flutter doctor 检查卡住；
解决方式：可尝试杀掉所有dart进程，重新检查环境即可：
$ killall -9 dart

Flutter版本历史

2.2.1

  • Android 模块依赖的 NDK 版本提升到 21.1.6352462，本地必须安装了此版本，否则用Android Studio单独打开android模块会出现编译不过，报错缺少NDK 21.1.6352462。
avatar
文章
阅读
粉丝