flutter开发APP
使用Android Studio创建一个项目
flutter项目主题色#57be6a, 搭建一个flutter的架构,要求实现引入dio,先只请求/health, 验证网络请求能成功,然后引入组件化的代码封装,风格使用微信app的tabbar,有一个登录页面,做假登录,tabbar分别是小绿书 通讯录 发现 我,需要增加一个theme文件夹做全局主题管理
我现在想做模仿微信的聊天工具,先帮我实现第一步,移动端的用户表 然后移动端登录 注册 添加好友的功能,先不用实现对话功能,我感觉用户表是不是应该单独隔离,和admin的用户分开
登录方式设置为邮箱 但是不需要验证,邮箱作为唯一的账号,然后添加好友需要对方确认,完成这个需求,添加Swagger注释到新接口,可补齐 swagger 注解。
我手动执行了go run main.go 无问题 总结一下这个的用户注册,添加以及获取好友,查看好友资料的文档给我
根据这篇文档,先实现flutter的用户注册以及登录的需求,移除health的请求,我已经验证可以网络访问了
没问题了 我的tab实现退出功能和个人资料展示, 然后在通讯录tab的右上角 添加一个添加好友的按钮,按照这个app_user.md文档继续完成添加好友功能
搞定
继续完成
通讯录展示好友列表(GET /api/v1/app/friends)
持久化 token(shared_preferences),App 重启保持登录
待处理好友请求列表、接受/拒绝(接口 6-8)
完美~ 下一步 开始对话功能
刚刚我已经完成了好友添加功能了,现在帮我实现私聊功能的后端服务,必须是即时通讯服务
我执行go run main.go 无报错 给我一个使用这个即时通讯的文档
根据这两个文档,实现通讯录的tab,点击好友的卡片,然后跳转到新页面,展示好友资料,下方有一个发起发消息按钮,跳到聊天新页面然后开始对话,模仿微信的页面布局
点击发消息 然后跳转页面卡死了
[ERROR:flutter/runtime/dart_vm_initializer.cc(40)] Unhandled Exception: WebSocketException: Connection to 'http://172.20.121.96:8090/api/v1/app/chat/ws#' was not upgraded to websocket, HTTP status code: 401
综合go的代码 修复这个bug 可以同时改flutter和go
搞定
增加会话列表需求,最近对话的人,可以直接在第一个tab页面显示,然后第一个tab页面的会话列表,点进去直接就是聊天对话
美化目前的app,按照微信的ui样式来,如果需要创建自己的UI组件请建立文件夹封装
后续更新中~
这里需要先使用docker安装minio,用于文件管理,先不做赘述,有问题去问豆包如何安装
minio:
endpoint: localhost:9000
access-key: oSWL19QTSnBj5lQGLPV3
secret-key: fZeyQqEo9J1iZm0SVCVtF9wGpN6OFe0ciA099HOc
这是我minio的配置,帮我实现一个minio的后端的接口对接,先实现创建/删除Buckets, 文件上传/删除的功能
根据后端的minio的接口对接,在前端新建一个页面,并实现minio的基础的功能
我想给init/main.go的权限初始化加上这个minio的菜单 叫文件管理 帮我写一个初始化的脚本
http://192.168.64.1:8090/api/v1/storage/buckets/1111/objects上传文件报错 {
"code": 400,
"message": "mime not allowed"
}
现在可以做移动端的图片上传和发图片 发动态功能了,在此之前,先要修复预览的文件映射
问了内置的gpt5关于minio的方案后,手动安装mc,配置minio的文件映射,http://127.0.0.1:9000/avatar/1.png 完成这个的映射,因为minio的图片都是有效期的访问,且属于加密的数据,手动配置开放的桶以及保留非公共桶
新增一个逻辑 我需要app上传图片和更新头像 可能app端也需要做一个允许上传文件的接口权限控制
更新app的用户表,需要增加一个头像字段,性别字段,以及更新资料的接口,头像更新的方式是先上传头像,然后拿到路径后,这个路径作为资料更新的头像一起更新即可
flutterclient 新增一个个人资料更新的页面 头像 性别 修改密码
点击编辑资料页面报错
======== Exception caught by widgets library =======================================================
The following assertion was thrown building EditProfilePage(dirty, state: _EditProfilePageState#11360):
There should be exactly one item with [DropdownButton]'s value: .
Either zero or 2 or more [DropdownMenuItem]s were detected with the same value
'package:flutter/src/material/dropdown.dart':
Failed assertion: line 1732 pos 10: 'items == null ||
items.isEmpty ||
value == null ||
items.where((DropdownMenuItem item) => item.value == value).length == 1'
The relevant error-causing widget was:
EditProfilePage EditProfilePage:file:///Users/yusenlin/Avalon/saber/github/alice/client_flutter/lib/features/home/home_tabs.dart:640:44
When the exception was thrown, this was the stack:
#2 new DropdownButtonFormField (package:flutter/src/material/dropdown.dart:1732:10)
点击头像编辑的icon 没有反应
点击从相册选取没有反应 是不是需要添加权限
选择完图片后 点击保存提示 保存失败Unsupported operation: MultipartFile is only supported where dartio is available,选择的图片也没法在头像看到
现在开始修复安卓app可以联网以及访问图片的bug
安卓登录失败 I/flutter (23209): uri: http://localhost:8090/api/v1/app/login
I/flutter (23209): DioException [connection error]: The connection errored: Connection refused This indicates an error which most likely cannot be solved by the library.
I/flutter (23209): Error: SocketException: Connection refused (OS Error: Connection refused, errno = 111), address = localhost, port = 45786
I/flutter (23209):
数据库现在的头像存的是http://127.0.0.1:9000/app-avatars/avatar-1-1755756652.jpg 改成存 /app-avatars/avatar-1-1755756652.jpg 然后下发的时候 拼接base-url
搞定
下一步开始做私密朋友圈以及开放式的朋友圈功能
继续实现朋友圈动态的功能,按照步骤先实现动态列表的api,发送动态,动态列表(我的动态, 他人查看朋友圈动态(可以让所有人都看到动态),动态支持最多9张图),先实现后端接口,图片逻辑参考头像上传的接口
缺少了一个删除动态的功能吧
成发表动态的api的代码接口文档给我
删除 列表 都要出一个接口 最后生成一个md文件给我
根据这个文档 生成flutter app的动态发布和列表功能
接入真实图片上传,如果没有 你需要更新后端的代码
我没看到发布按钮
参考头像的逻辑 修复照片没有在安卓显示成功的bug ,我需要你拼接base-url 而不是现在的逻辑
这个朋友圈开发是前后端一起写 一次对话框写完的 可以看到右下角的文件是go和dart一起存在,这也是同一个项目开发的便捷之处
通讯录增加一个刷新功能
个人信息卡片增加一个查看朋友圈的入口
优化flutter的代码 首先我觉得接口需要封装吧 然后tabbar是不是可以抽出来成为不同的子文件
优化登录页面的样式 背景希望是多色弥散叠加高斯模糊的效果,多色弥散的背景可以动起来,输入框和登录按钮居中 不需要导航栏了
希望改成浅色背景的风格的 目前你做的是暗黑主题
优化前后端的代码,会话列表支持头像,然后未读的状态也有bug,目前不会消失
增加需求 会话列表能不能也实时更新 目前发了消息后 会话列表需要手动刷新
給朋友圈动态增加点赞和评论功能,同时更新前端和后端代码
很牛,超长的上下文,一次性写好了,11个文件
修复发表动态的时候 web不支持图片的bug 但是app都没问题 Assertion failed: file:///Users/yusenlin/development/flutter/packages/flutter/lib/src/widgets/image.dart:520:10
!kIsWeb
"Image.file is not supported on Flutter Web. Consider using either Image.asset or Image.network instead." 但是更新个人头像那里,是没问题的
优化发消息的代码 点击输入框左侧的+ 可以弹出聊天表情选择页面 希望把这个选择器封装成一个组件 因为后续的评论 也会用到 你的数据库里有表情包的库吗 需要我提供吗
增加一个需求 除了发送文本消息 支持发送图片消息 支持链接 新增这两个类型的消息发送 图片是本地图片
可以 发送成功了 flutter: access-control-allow-credentials: true
flutter: access-control-allow-headers: Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization, accept, origin, Cache-Control, X-Requested-With
flutter: access-control-allow-origin: *
flutter: date: Mon, 25 Aug 2025 04:51:54 GMT
flutter: access-control-allow-methods: POST, OPTIONS, GET, PUT, DELETE
flutter: content-length: 178
flutter: content-type: application/json; charset=utf-8
flutter: Response Text:
flutter: {"code":200,"message":"success","data":{"path":"/app-chat-images/chat-1-1756097514574093000.jpg","url":"http://192.168.64.1:9000/app-chat-images/chat-1-1756097514574093000.jpg"}} flutter: 但是没看到
支持发送视频,希望视频是点击才能播放的,这个发送视频后续也会需要支持发动态的时候支持视频
优化聊天对话列表
1 展示双方头像,如果后端没下发需要更新一下后端接口
2 发送消息的组件 改成 输入框 表情包 然后是+号 点击加号 底部弹出视频 图片 链接三个选项 移除发送按钮 使用者键盘自带的发送
3 点击头像 进入这个人的朋友圈
希望进来的时候 自动显示最下面的消息 也就是最新的消息 现在还要滚动一下
优化会话列表的显示,如果最近一条消息是图片 视频 或者链接 那么就直接显示 [图片] [视频] [链接] 不要展示http的原始url
会话列表的首页的右上角移除刷新按钮 因为已经支持下拉刷新了 然后改成+ 点击后 展示浮窗 第一个菜单叫发起群聊 第二个菜单叫添加朋友 先实现发起群聊的需求,点击后进入发起群聊的新页面,要么选择好友,最少2个人,发起群聊,然后也支持搜索加入群聊,你还需要同时更新后端接口以便支持这个需求,创建人可以设置群聊的头像,更改群聊名称,可以结合抖音的群聊或者tg的群聊,来实现这个功能
没问题了 继续实现 扩展会话列表返回群项(type=group) 调整 ChatPage 支持 group_id
富化群消息(附带 sender 基本信息)
WebSocket 群广播过滤仅群成员
群未读统计(需要成员阅读游标表)
会话列表合并排序(当前群会话未按消息时间排序混排在末尾)
前端尚未展示群消息 sender 昵称/头像,需要在 ChatPage 渲染 group_message 时使用返回的 sender。
前端未调用群已读上报接口;后端也尚未提供显式 MarkReadGroup API(只提供了内部 CountUnread/UpdateLastRead)。 继续完成
A. 在 GroupMessages 接口中富化群历史消息 sender 信息(解决历史头像缺失最终问题)。
没问题了 继续添加成员管理功能
[GIN-debug] POST /api/v1/app/chat/groups/:group_id/members:remove --> alice/api/handler/chat.(*GroupHandler).RemoveMember-fm (5 handlers) panic: ':remove' in new path '/api/v1/app/chat/groups/:group_id/members:remove' conflicts with existing wildcard ':add' in existing prefix '/api/v1/app/chat/groups/:group_id/members:add' goroutine 1 [running]: 后端报错
更新结束,代码已经提交 累计对话用时大概11个小时左右
用了额度大概是80%的额度 240次耗费(实际对话远低于240次)
我的微信:yusenlin1122 欢迎交流