Flutter环境配置

一、简介

Flutter是Google在2015年推出的移动UI框架,可快速在iOS和Android上构建高质量的原生用户界面。Flutter可以与现有的代码一起工作。
Flutter第一次亮相于2015年5月Dart开发者峰会上,初始名字叫做“Sky”,后更名为Flutter,Flutter使用Dart语言开发,Dart是Google于2011年推出的新的计算机编程语言。
其应用广泛,社区活跃,因为可以跨平台试用,开发效率还是可以的。学起来学起来!!!

二、Flutter特点

Flutter特点
快速开发 由于Flutter选用了Dart作为其开发语言,Dart既可以是AOT(Ahead Of Time)编译,也可以是JIT(Just In Time)编译,其JIT编译的特性使Flutter在开发阶段可以达到亚秒级有状态热重载,从而大大提升了开发效率。
性能有约、不依赖原生 使用自带的高性能渲染引擎(Skia)进行自绘,渲染速度和用户体验堪比原生。
界面更新逻辑和原生不同,采用增量渲染 修改控件属性时,重新穿件一个新的Widget
富有表现力的精美UI Flutter内置众多精美的Material Design(组件的实现是同名的谷歌设计语言)和Cupertino(iOS风格)小部件,开发者可快速构建精美的用户界面,以提供更好的用户体验。
跨平台 Windows、macOS、Chrome OS、Linux (iOS、Android、web)

三、环境搭建(For Mac)

3.1 下载Flutter SDK

最新安装包地址

3.2 解压SDK包

下载完成后,那么接下来就是安装路径了。
因为Flutter的SDK中包含了很多命令⾏⼯具。我们需要配置环境变量,所以建议你安装到你平时放命令⾏⼯具 程序的地⽅!

cd /Users/wangxuewen/Documents/flutter
unzip ~/Downloads/flutter_macos_v2.5.2+hotfix.4-stable.zip

3.3 配置 Flutter 的 PATH 环境变量

 export PATH="$PATH:`pwd`/flutter/bin"
# 验证 flutter 是否可用
flutter

3.4 环境检测

# 查看当前环境是否需要安装其他的依赖
flutter doctor

打钩的就是配置OK了,叹号表示警告(下图提示更新cocoaPods,不影响使用),叉就是没有配置好。


3.5 更新 PATH 环境变量(全局配置)

出现: flutter: command not found 问题
原因:设置环境变量的时候,直接在命令行通过 export 命令进行的,并没有全局设置,需要做如下修改。

# 将flutter/bin添加到.bash_profile或.zshrc文件中
export PATH="$PATH:[替换为FlutterSDK保存的路径]/flutter/bin"

# 修改.bash_profile文件,并更新环境变量 (适用于: Linux、macOS Mojave 之前的系统)
open -e $HOME/.bash_profile
source $HOME/.bash_profile

# 修改.zshrc文件,并更新环境变量 (适用于:macOS Catalina)
open -e $HOME/.zshrc
source $HOME/.zshrc

四、平台配置

macOS 可以开发 iOS、Android 和 Web(技术预览版正式发布)三个平台的 Flutter 应用。

iOS开发环境

  • 安装 Xcode
  • 配置 Xcode command-line tools (可选)
# 安装多个 Xcode,可以通过命令配置配置
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
  • Xcode 的许可协议(可选)
# 打开 Xcode,或者通过命令同意许可协议
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
  • 配置iOS模拟器
# 运行模拟器
open -a Simulator

Android开发环境

1. 安装Android Studio
2. 配置SDK

根据安装向导,我们需要安装Android SDK, Android SDK Command-line Tools, and Android SDK Build-Tools,安装过程无需翻墙。

我们也可以进入偏好设置 CMD + , 如下图安装
image.png
3. 安装Android Studio的插件
  • 来到Studio的偏好设置里面.
4. 配置Android模拟器

根据以下步骤来将 Flutter 应用运行或测试于你的 Android 模拟器上:

  • 激活机器上的 VM acceleration 选项。
  • 打开 Android Studio,点击 AVD Manager 按钮,选择 Create Virtual Device…
    a. 在一些旧的 Android Studio 版本里,需要通过 Android Studio > Tools > Android > AVD Manager,然后选择 Create Virtual Device… 选项。(只有在 Android 项目中才会显示 Android 子选项。)
    b. 如果你以及还没打开某个项目,你可以选择 Configure > AVD Manager 然后选择 Create Virtual Device 选项
  • 选择相应的设备并选择 Next 选项。
  • 选择一个或多个你想要模拟的 Android 版本的系统镜像,然后选择 Next 选项。推荐选择 x86 或者 x86_64 镜像。
  • 在 Emulated Performance 下选择 Hardware - GLES 2.0 选项来开启 硬件加速
  • 确保 AVD 选项配置正确,并选择 Finish 选项。
    想要查看上述步骤的更多详细信息,请查看 Managing AVDs 页面。
  • 在 Android Virtual Device Manager 中,点击工具栏中的 Run 选项,模拟器会启动并为你所选择的系统版本和设备显示出相应的界面。

Web开发环境

安装 Chrome

五、Flutter常用命令

通过flutter --help查看 Flutter 常用命令

常用命令:
  flutter create <output directory> 创建项目
  flutter run [options]             运行项目
  
使用: flutter <command> [arguments]

全局选项:
-h, --help                  打印帮助信息
-v, --verbose               动态日志

-d, --device-id             目标设备 ID 或名称
    --version               查看命令版本
    --suppress-analytics    禁止分析报告
    --bug-report            提交 bug

可用的命令:
  analyze          分析 dart 代码
  attach           附加应用到连接中的设备
  build            构建应用
  channel          列出或者切换通道
  clean            删除 build/ 文件夹
  config           配置 flutter
  create           创建项目
  devices          列出已连接的设备
  doctor           检查 flutter 信息
  drive            Runs Flutter Driver tests for the current project.
  emulators        列出可用的设备
  format           格式化 Dart 文件
  fuchsia_reload   热加载
  help             显示帮助信息
  install          在连接的设备中安装 app
  logs             显示正在运行的应用的日志
  packages         包
  precache         Populates the Flutter tool's cache of binary artifacts.
  run              运行应用
  screenshot       为应用截图
  stop             停止运行
  test             Run Flutter unit tests for the current project.
  trace            Start and stop tracing for a running Flutter app.
  upgrade          更新 flutter

常见错误

error 1

Could not build the application for the simulator. Error launching application on iPhone 11

造成该问题是因为升级cocoapods到最新版,按照网上的很多方案都未解决,flutter clean清理xcode缓存清理flutter缓存文件...
后面在 github flutter issues 上看到该问题的解决方案: 切换flutter分支到master

flutter channel master

执行 flutter channel查看当前flutter所处分支(我的flutter处于stable(稳定)分支),
然后在官网上看到这一句话:

我们强烈建议跟踪Flutter的stable分支,这是Flutter稳定分支。 如果你需要查看最新的变化,你可以跟踪master分支,但注意这是开发分支,所以稳定性要低得多。

要切换分支,请使用flutter channel stableflutter channel master
还有个奇怪的问题,我这边先切换到master然后再切回stable分支fluttter cleanflutter run运行正常。不确定是不是切换flutter分支时flutter会检查其环境配置,把一些丢失的文件重新下载配置好。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345

推荐阅读更多精彩内容