细说Flutter-MacOS下搭建Flutter开发环境

梁泰

2023-12-01

MacOS下搭建Flutter开发环境

搭建flutter开发环境，需要如下步骤：

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

此文环境版本记录

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

Mac OS X 10.14.3
flutter v1.0.0
dart 2.1.0
复制代码

配置flutter-sdk

下载flutter-sdk：可以直接下载release包，此处直接使用flutter 仓库 stable分支的内容作为sdk;

cd ~/devlibs
# 下载stable分支的仓库代码
git clone -b stable https://github.com/flutter/flutter.git
复制代码

配置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
复制代码

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

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

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

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

flutter doctor

# 接受android flutter相关的licenses
flutter doctor --android-licenses
复制代码

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平台设置

ios模拟器：

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

安装用于将Flutter应用安装到iOS设备的工具: 运行flutter doctor按提示配置；

brew update
brew install --HEAD libimobiledevice
# cocoapods 是管理iOS项目中第三方开源代码的工具
brew install ideviceinstaller ios-deploy cocoapods
# 此处注意：如果上几条命令没成功，按照提示进行，最后成功了再执行pod setup
# 可先尝试flutter doctor，如果通过，可不执行pod setup，因为很慢；
pod setup # 将cocoapods目录下载到本地
复制代码

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模拟器列表
~/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 studio plugin 安装dart插件、flutter插件;

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

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' }
    }
}
复制代码

运行项目到Android设备：

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

检查flutter环境

执行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!
复制代码

创建项目

一般使用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 create myapp
cd myapp
# 检查设备是否在运行
flutter devices
# 运行应用程序:
flutter run

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

应用打包

Android应用打包

命令行创建签名: 放到android文件夹下

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

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

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

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

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

命令安装app：

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

git管理项目

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

flutter packages get
复制代码

转载于:https://juejin.im/post/5c638662f265da2da23d0e1f