聚焦Flutter-MacOS下搭建Flutter开发环境

MacOS下搭建Flutter开发环境

搭建flutter开发环境，须要以下步骤：

1> 安装和配置flutter-sdk；
2> Flutter Android/IOS 运行平台设置;
3> flutter doctor命令检查环境是否配置好；
复制代码

本文环境版本信息记录

此文章搭建的flutter开发环境相关版本记录以下：

Mac OS X 10.15.1
flutter 1.9.1+hotfix.6
dart 2.5.0
复制代码

配置flutter-sdk

1. 下载flutter

下载flutter-sdk：能够直接下载release包，也可使用flutter 仓库 stable分支的内容做为sdk;

# 方式一：[clone的方式支持flutter upgrade,推荐使用]
# 能够直接下载stable分支的仓库代码
# git clone -b stable https://github.com/flutter/flutter.git

# 方式二：
# 下载官方的正式包并解压到本地
$ cd ~/development
$ unzip ~/Downloads/flutter_macos_v1.5.4-hotfix.2-stable.zip
复制代码

安装遇到的问题:

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的代理【推荐】
### 设置代理的命令：
### (注意代理端口: 须要查看本机的代理端口)
$ git config --global http.proxy http://127.0.0.1:1080
$ git config --global https.proxy http://127.0.0.1:1080
### 取消代理的命令以下：
$ git config --global --unset http.proxy 
$ git config --global --unset https.proxy 
复制代码

2. 配置环境变量

配置flutter sdk必须的环境变量：

# 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

# flutter sdk
export PATH=$PATH:$HOME/devlibs/flutter/bin
复制代码

3. 配置国内镜像【可选】

配置国内镜像：国内网络关于google的资源下载不是很友好，这里配置国内镜像来提速，参考 Using Flutter in China,在环境变量里添加以下配置：

#【macOS】
# flutter china mirror
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
复制代码

4. flutter doctor 检查

“flutter doctor”命令用来检查Flutter环境, 并安装缺乏的依赖库；

初次运行此命令，会执行以下操做：

• 会进行基础依赖安装，包括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
复制代码

5. flutter更新

flutter upgrade
复制代码

flutter经常使用命令

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

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

# 【更新】
# 同时更新Flutter SDK和依赖包: 
# 最好在项目的包含pubspec.yaml文件的目录执行：
flutter upgrade 
# 获取pubspec.yaml文件中列出的全部依赖包：
flutter packages get
# 获取pubspec.yaml文件中列出的全部依赖包的最新版本
flutter packages upgrade 
复制代码

Flutter多平台设置

IOS平台设置

1. ios模拟器：

# 打开IOS模拟器
open -a Simulator
# 运行启动您的应用
flutter run
复制代码

2. 安装到真机

1. xcode打开flutter/ios/Runner.xcworkspace
2. xcode导航面板中选择最外层的Runner,添加开发者帐号，并添加team;
3. ios设备设置信任开发者：设置->通用->描述文件与设备管理->选择信任的开发者；
4. 命令运行便可：flutter run
复制代码

Android平台设置

1. 配置Android必须的sdk、jdk、android-studio等工具，此处不作赘述，默认你的环境能够跑Android应用了；
2. android studio avd模拟器建立：Android 4.1（API level 16）或更高版本的x86 或 x86_64的Android设备,Emulated Performance选择 Hardware - GLES 2.0 以启用 硬件加速.

#【模拟器】
# 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表明全速。
复制代码

3. android studio plugin 安装dart插件、flutter插件;

//【注意】
Jetbrians系列的IDE下载插件或者更新须要去掉use secure connection步骤以下:
设置-> appearance->system settings->updates->去掉use secure connection
复制代码

4. flutter项目Android gralde的配置：android部分gradle的配置可能国内没法加载成功，能够配置阿里云的远程仓库镜像。

不推荐设置

//app_project/android/build.gralde中修改远程仓库的配置
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'}
    }
}
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\flutter.gradle
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' }
    }
}
复制代码

5. 运行项目到Android设备：

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

建立项目

推荐使用Android-Studio或IntelliJ IDEA来建立,由于它们支持建立时，对项目的细节进行配置(如：移动端项目可选基于kotlin/swift、定制包名等)。

通常使用IDE编写项目，须要安装flutter插件，如 IDEA/vscode只须要安装flutter插件便可；

Android Studio

Android Studio: 为Flutter提供完整的IDE体验.

建立项目myapp步骤以下：

1. 选择 File>New Flutter Project
2. 选择 Flutter application 做为 project 类型, 而后点击 Next
3. 输入项目名称 (如 myapp), 而后点击 Next
4. 点击 Finish
5. 等待Android Studio安装SDK并建立项目，应用程序的代码位于 lib/main.dart。
6. as的菜单栏很智能的提示有运行和选择设备的图标，点击便可运行调试；
7. 项目热重载，即保存时刷新界面；
复制代码

VS Code

VS Code: 轻量级编辑器，支持Flutter运行和调试.

建立项目myapp步骤以下：

1. 启动 VS Code
2. 调用 View>Command Palette…
3. 输入 ‘flutter’, 而后选择 ‘Flutter: New Project’ action
4. 输入 Project 名称 (如myapp), 而后按回车键
5. 指定放置项目的位置，而后按蓝色的肯定按钮
6. 等待项目建立继续，并显示lib/main.dart文件
7. 确保在VS Code的右下角选择了目标设备
8. 按 F5 键或打开菜单栏的 调试->Start Debugging
9. 等待应用程序启动
10. 项目热重载，即保存时刷新界面；
复制代码

命令行建立

# 建立flutter项目(默认会建立基于kotlin的Android、基于swift的ios项目)
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

# flutter1.7 开始支持AndroidX的建立方式
# 【注意】目前flutter 1.9.1默认建立不会在项目中配置AndroidX
flutter create --androidx myapp 
flutter create --org com.focus -i swift -a kotlin --androidx myapp

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

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

建立支持AndroidX的项目

1. 经过命令建立支持androidx的项目：

# 当建立 Flutter 项目时，可经过添加 --androidx 来确保生成的项目文件支持 AndroidX。
# 命令行建立Flutter项目,支持AndroidX
$ flutter create --androidx myapp
复制代码

2. 在已有的flutter项目中支持AndroidX：只须要按原生Android的方式，将android项目进行AndroidX迁移便可。
3. 在已有的Android项目中添加Flutter模块，让flutter支持AndroidX:

若是您的Flutter项目是用于添加到现有Android应用的模块类型，而且包含.android目录，请在pubspec.yml中的module部分添加AndroidX属性，控制是否使用AndroidX构建模块项目。

# ...
# 控制生成的模块项目是否使用AndroidX
flutter:
 uses-material-design: true

 module:
 androidX: true
    # androidPackage:
    # iosBundleIdentifier:
复制代码

应用打包

Android应用打包

1. 命令行建立签名: 放到android文件夹下

keytool -genkey -v -keystore android/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key
复制代码

2. android/app/build.gradle文件中配置app的打包签名信息;

# gradle中配置秘钥信息能够单独抽离到key.properties文件
storePassword=123456
keyPassword=123456
# key别名
keyAlias=key
# jks文件路径
storeFile=key.jks
复制代码

3. 执行打包命令：flutter build(同时会生成一个备用的文件root/build/app/outputs/app.apk)

# 打包命令默认打release包
flutter build apk [--release]
flutter build apk --debug
复制代码

4. 命令安装app：

# 安装的是root/build/app/outputs/app.apk
# 打debug或release包会在同一位置生成app.apk文件
flutter install
复制代码

git管理项目

1. 建立flutter项目，按照默认的.gitignore文件上传到远程git仓库；
2. clone远程flutter项目到本地，执行安装本地依赖命令便可运行项目：

flutter packages get
复制代码

issues

• flutter upgrade 或 flutter packages get 报冲突Lock问题!!!

waiting for another flutter command to release the startup lock...
# 解决办法：删除flutter/bin/cache/lockfile文件从新执行命令便可。
复制代码