两个星期,用Flutter撸个APP

简介: 在编译Android版本的时候很顺畅,没有遇到任何问题。但是在编译iOS版本的时候,遇到了很多问题,直到现在也没有解决。

前言
Flutter是Google推出的跨平台的解决方案,Slogan是“Design beautiful apps”,国内也有知名企业在使用和推广,例如阿里、美团都有在尝试。

个人对其中的一些特性,比如JIT、Material Design、快速开发等很感兴趣,于是决定尝试一下。

开始
FLutter可以在Windows、Linux、Mac上进行开发,开发工具可以使用VS Code、Android Studio、IDEA等,本文推荐使用Android Studio,主要在于Android Studio提供了FLutter Inspector工具,可以实时审查元素,解决界面的显示适配问题。

搭建开发环境
搭建环境的主要步骤:

下载SDK。

配置PATH,如果使用Mac或者Linux系统,一定要将bin目录添加到系统PATH。

配置依赖源镜像,这一步很重要,并且需要将脚本放到启动shell中。

export PUB_HOSTED_URL=

export FLUTTER_STORAGE_BASE_URL=

执行flutter doctor,这一步耗时会很长,需要耐心等耐。

安卓开发工具及插件,配置编辑器。

配置编辑器
主要是给编辑器安装相应的插件。

VS Code安装flutter插件,Android Studio和IDEA需要安装Flutter和Darter插件。

其中Android Studio和IDEA基本一样,跟VS Code的主要区别在于:

VS Code提供了更好的代码提示功能

IDEA提供了Flutter Inspector,可实时审查页面元素

可根据个人喜好、习惯选择使用。

主要技术点
Dart
Flutter项目的开发语言是Dart,Dart 是由 Google 开发的一种面向对象语言,可以编译成 ARM 和 x86 代码直接运行在 iOS、Android 设备上。

推荐先学习Dart语言官方教程,对Dart有初步了解之后再进行Flutter的学习和开发。

界面开发
终于可以进入Flutter本身了。

Widget
Flutter中页面所有元素都是Widget,又分为StatelessWidget和StatefulWidget。

顾名思义,StatelessWidget 就是指无可变状态的 Widget,这类 Widget 的状态只由创建 Widget 时传入的参数决定,一旦创建,其状态、在页面上的展示效果也就不再改变。

而 StatefulWidget 内部则存在着可变状态。当通过setState改变这些状态时,Flutter 会重新渲染该 Widget。

布局
在实际开发中,主要使用了Row、Column、Container、Expanded、Stack等。

Row、Column提供了水平、垂直方向的布局,Stack提供了堆叠方式的布局,各种容器有不同的特性,可根据实际页面需求选择搭配不同的布局。

主要插件
话题切回到诗词汇APP,本APP收集了4000余位诗人的30多万首诗词,提供了古诗词的查询、收藏、朗诵功能,并且实现了初步的社区功能。

项目目录结构如下:

2.webp.jpg

开发这个富贵论坛APP大概用了一个月的业余时间,每天抽出一两个小时,这样折算为工作日,大概是两个星期左右,开发效率还是很高的。

下面跟大家分享一下主要功能及所使用的一些插件。

切换主题
为了实现实时切换主题颜色,使用了状态管理插件。

flutter_redux 。

极光推送
在国内厂商中,极光是少有的对Flutter提供了技术支持的,这里给极光大大的👍。

jpush_flutter

QQ
QQ的Flutter插件提供了基本的登录、分享功能。

flutter_qq

微信
微信的Flutter插件提供的功能稍微丰富,包含了支付、登录、分享、启动小程序的功能。

fluwx

事件总线Event Bus
大名鼎鼎的event_bus也提供了对Flutter的支持。

event_bus

音频
录音及播放音频也有很好的支持。

audio_recorder

audioplayer2

其它
其它诸如加载HTML、Toast提示、图片选择器、图片加载等也有较好的插件支持。

可在 官方插件库 查询相关的插件。


安装、升级
FLutter的安装、升级会经常遇到卡死的问题,主要原因就是使用了Google的源,但是莫名的,即使使用了上网、设置了国内镜像后,也会遇到同样的问题。只能通过反复的flutter doctor 或 flutter upgrade直到解决问题。

开发
由于笔者最近一段时间Android项目做得较多,习惯了Android的XML布局方式,对于在代码中编写页面的形式一开始还有些不习惯,但是在按照官方例子实践了几个页面后,用代码写页面的优势就体现出来了。

在页面已经设计好的情况下,开发的时候脑海中就构思出一个Widget树,从根节点到每一个节点一级一级嵌套下去,自然而然的布局就写好了。

Dialog弹出框
使用Dialog的时候,弹出Dialog的Context及Dialog本身都会压入栈中,所以让Dialog消失的方法是Navigator.of(ctx).pop(),这样的设计既不同于Android也不同于iOS,也许跟Flutter本身所有元素都是Widget的设计有关。

编译
在编译Android版本的时候很顺畅,没有遇到任何问题。但是在编译iOS版本的时候,遇到了很多问题,直到现在也没有解决。

问题在于使用了audio_recorder和flutter_qq两个插件,而这两个插件一个要求编译选项需要设置!use_framework,一个要求不能设置,造成了冲突,在实际编译中一直编译不通过。

结语
开发结束,最终打包了Release版本的APK,安装到手机后,发现惊喜。

竟然如丝般顺滑,这是我始料未及的,转场效果、页面相应速度不输原生APP。

总而言之,个人对Flutter的前景相当看好,毕竟是Google大厂出品,并且项目本身的迭代速度很快,目前已经是0.11版本,期望在不远的将来发布正式的1.0版本,更期望国内厂商加大对Flutter的支持力度。

顺便推广一下笔者的诗词汇APP,欢迎大家 下载试用 ,或者访问 诗词汇 体验下Flutter如丝般的顺滑。_

有需要做Fluuter APP的可以直接发我消息哦,大家试用小程序的时候顺便点下广告,就当是支持我咯。(谢谢🙏)

相关文章
|
2天前
|
人工智能 API 开发工具
Claude Code国内安装:2026最新保姆教程(附cc-switch配置)
Claude Code是我目前最推荐的AI编程工具,没有之一。 它可能不是最简单的,但绝对是上限最高的。一旦跑通安装、接上模型、定好规范,你会发现很多原本需要几小时的工作,现在几分钟就能搞定。 这套方案的核心优势就三个字:可控性。你不用依赖任何不稳定服务,所有组件都在自己手里。模型效果不好?换一个。框架更新了?自己决定升不升。 这才是AI时代开发者该有的姿势——不是被动等喂饭,而是主动搭建自己的生产力基础设施。 希望这篇保姆教程,能帮你顺利上车。做出你自己的作品。
Claude Code国内安装:2026最新保姆教程(附cc-switch配置)
|
9天前
|
缓存 人工智能 自然语言处理
我对比了8个Claude API中转站,踩了不少坑,总结给你
本文是个人开发者耗时1周实测的8大Claude中转平台横向评测,聚焦Claude Code真实体验:以加权均价(¥/M token)、内部汇率、缓存支持、模型真实性及稳定性为核心指标。
3815 21
|
5天前
|
人工智能 JSON BI
DeepSeek V4 来了!超越 Claude Sonnet 4.5,赶紧对接 Claude Code 体验一把
JeecgBoot AI专题研究 把 Claude Code 接入 DeepSeek V4Pro 的真实体验与避坑记录 本文记录我将 Claude Code 对接 DeepSeek 最新模型(V4Pro)后的真实体验,测试了 Skills 自动化查询和积木报表 AI 建表两个场景——有惊喜,也踩
2391 8
|
4天前
|
人工智能 缓存 BI
Claude Code + DeepSeek V4-Pro 真实评测:除了贵,没别的毛病
JeecgBoot AI专题研究 把 Claude Code 接入 DeepSeek V4Pro,跑完 Skills —— OA 审批、大屏、报表、部署 5 大实战场景后的真实体验 ![](https://oscimg.oschina.net/oscnet/up608d34aeb6bafc47f
2002 4
Claude Code + DeepSeek V4-Pro 真实评测:除了贵,没别的毛病
|
21天前
|
人工智能 自然语言处理 安全
Claude Code 全攻略:命令大全 + 实战工作流(建议收藏)
本文介绍了Claude Code终端AI助手的使用指南,主要内容包括:1)常用命令如版本查看、项目启动和更新;2)三种工作模式切换及界面说明;3)核心功能指令速查表,包含初始化、压缩对话、清除历史等操作;4)详细解析了/init、/help、/clear、/compact、/memory等关键命令的使用场景和语法。文章通过丰富的界面截图和场景示例,帮助开发者快速掌握如何通过命令行和交互界面高效使用Claude Code进行项目开发,特别强调了CLAUDE.md文件作为项目知识库的核心作用。
18905 60
Claude Code 全攻略:命令大全 + 实战工作流(建议收藏)
|
2天前
|
SQL 人工智能 弹性计算
阿里云发布 Agentic NDR,威胁检测与响应进入智能体时代
欢迎前往阿里云云防火墙控制台体验!
1168 2

热门文章

最新文章