iFlow CLI快速搭建Flutter应用记录

用户投稿:@诡秘之主

背景

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

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

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

准备工作

进入工程目录project,iFlow启动!

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

相关推荐
yuankoudaodaokou几秒前
高校科研新利器:思看科技三维扫描仪助力精密研究
人工智能·python·科技
ujainu1 分钟前
Flutter + OpenHarmony 实战:从零开发小游戏(一)——主菜单与最高分存储
flutter·游戏·app
2501_940007891 分钟前
Flutter for OpenHarmony三国杀攻略App实战 - 性能优化与最佳实践
android·flutter·性能优化
Acrelhuang5 分钟前
工商业用电成本高?安科瑞液冷储能一体机一站式解供能难题-安科瑞黄安南
大数据·开发语言·人工智能·物联网·安全
小王毕业啦6 分钟前
2010-2024年 非常规高技能劳动力(+文献)
大数据·人工智能·数据挖掘·数据分析·数据统计·社科数据·经管数据
hello 早上好6 分钟前
03_JVM(Java Virtual Machine)的生命周期
java·开发语言·jvm
沐雪架构师7 分钟前
LangChain 1.0 Agent开发实战指南
开发语言·javascript·langchain
tod1138 分钟前
力扣高频 SQL 50 题阶段总结(四)
开发语言·数据库·sql·算法·leetcode
言無咎17 分钟前
从规则引擎到任务规划:AI Agent 重构跨境财税复杂账务处理体系
大数据·人工智能·python·重构
2501_9400078919 分钟前
Flutter for OpenHarmony三国杀攻略App实战 - 战绩记录功能实现
开发语言·javascript·flutter