iFlow CLI快速搭建Flutter应用记录

用户投稿：@诡秘之主

背景

作为一个Android开发，最近在调研跨端技术。经过一番研究和选择之后，想尝试下flutter技术，体验一下传说中比肩原生实现的UI流畅度到底体验如何。

按照学习新技术的惯性，找到了Flutter官方文档，准备从安装Flutter SDK开始入手。这个时候突然想到，为什么不借助神奇的iFlow CLI呢？这种事情对于她来说应该不在话下吧？说干就干！

目标明确：借助iFlow CLI快速帮我配置、安装好Flutter相关的环境，并完成demo app的开发，最终在多设备上运行成功，体验下跨端技术的神奇！

准备工作

进入工程目录project，iFlow启动！

cd project
iflow

什么？你还没有安装iFlow CLI？？

指路：心流开放平台

正式开始

需求描述

• 进行了背景说明，和需求描述

• 由于Flutter是可以跨端运行在Android IOS Web上的技术，基于已有的设备，让CLI整一个可以在电脑浏览器和Android手机上跑起来的应用。

• 主要功能是一个简单的随机图片生成器

• 因为还想了解下Flutter环境准备的具体过程，所以要求CLI将具体的步骤详细列出。

任务拆解

啪一下就拆解好了，很快啊！

1. 查资料如何安装Flutter

   原来CLI也是去这么搜的啊，不知道是不是问的度娘

   

2. 下载Flutter

   一开始超时了，但是找到了解决办法成功下载，厉害~

   

3. 配置路径

   更新了~/.zshrc文件后执行flutter --version打印出了当前安装的Flutter版本，至此安装成功

   

   这里省去了iFlow CLI一开始配置失败，然后通过一系列命令排查问题并解决问题的过程，事关Flutter配置的细节就不全部列出了。总之是自己默默解决并完成了Flutter SDK的安装。

   

4. 创建工程

   直接通过命令成功创建了flutter_app的工程，位于我指定的project，目录下。

   

5. 添加网络权限

   修改Android项目的AndroidManifest.xml，添加网络权限。

   

6. 编写Dart代码，开始界面开发

   这么快就开始写代码了！

   

7. 编写Dart代码，开始网络请求开发

   在Flutter项目中引入了http包，进行网络请求功能

   

8. 提示已完成

   CLI提示已完成，但实际上并没有成功在Android设备上运行，需要继续敲打一下

   

9. 修复没有在Android设备上跑起来的问题

遇到了Android SDK相关的报错，自己去解决了

最终成功构建Android安装包

工作总结

最终成功运行

chome浏览器运行截图(执行命令：flutter run -d chrome)

图片加载失败可能和我电脑的防火墙有关，后续有时间再换个图片API应该能解决。

总结

经过这一次Flutter环境的安装的体验，感慨iFlow CLI真的很适合开发环境的搭建。因为开发环境的搭建遇到的问题相对固定，流程也比较套路化，AI工具在效率方面的优势体现的可谓是淋漓尽致。

iFlow CLI，YYDS！