Flutter开发环境配置文档

631 阅读1分钟

Flutter SDK下载

1、下载地址:Flutter SDK archive

2、Mac 系统M1/M2芯片选择ARM64  3.16.5版本下载; image.png

3、把下载好的 Flutter SDK 解压到你想安装 Sdk 的目录如: /Users/xxName/flutter; image.png

4、把 Flutter 安装目录的 bin 目录配置到环境变量,然后把 Flutter 国内镜像也配置到环变量里面,找到.zshrc 文件编辑内容新增 export PATH="$PATH:/Users/Jim/flutter/bin",路径根据自己SDK位置而定,终端执行source ~/.zshrc; image.png

5、flutter -h 如果能出来一些命令说明 flutter sdk 配置成功。 注意如果配置完成后输入 flutter -h 告诉你 flutter 不是内置命令之类的错误的话,可能sdk没有配置成功,也可能 sdk 下载的时候没有下载全;

6、执行flutter doctor查看还需要什么环境; image.png 7、如果电脑上面没有安装 brew 的话首先第一步需要安装 brew,我们Mac电脑都自带这一步可以忽略;

8、安装xcode 、cocopod工具,这一步我们电脑也有可以忽略;

9、安装Android Studio;

Andriod Studio安装

1、下载地址:官网下载

2、Mac系统M1/M2芯片选择 ARM64 image.png

3、安装流程按指示进行即可,环境变量也得配置如下: image.png

Andriod Studio配置

1、选择Andriod Studio --> settings --> Plugin下载flutter开发插件 :Dart、Flutter、 GraphQL(grap相关插件) image.png

image.png

image.png

image.png

image.png

检测下环境配置是否正常如下图:

image.png

Flutter开发注意事项

1、Flutter生成.g文件:在原文件添加xxx.g.dart头文件,执行命令:flutter packages pub run build_runner build --- ( 我们暂时用不到,待补充其他注意事项)

项目编译流程

flutter_modeule项目创建使用命令:flutter create -t module flutter_module ,在yaml文件中配置相关依赖;

使用Android Studio软件打开flutter_modeule文件夹项目,找到pubspec.yaml文件点击右上角pub get按钮 image.png

成功后运行命令:flutter build ios --release --no-codesign  (PS: 保证flutter_modeule项目代码是最新的)

如下截图: image.png

使用终端输入以下命令 :cd 项目路径地址pod install

Pod install操作成功后,使用xcode15打开ios 项目源码直接编译即可

iOS主工程运行起来且进入flutter界面后,点击Android studio的flutter attach按钮在当前iOS模拟器上调试dart代码,这样我们后可以利用flutter hot热更新及时调整布局了image.png

老的flutter版本情况打包出来的iOS包安装可能会崩溃: xcode打包注意配置此处脚本,如果没有下面的值则加上:(我们使用最新版本暂时不需要配置,后续打包如果有问题再增加)

"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed

"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" thin

image.png