登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 安全 ›最新版Flutter3.32+Dart3.8跨平台仿微信app聊天界面|朋 ...

最新版Flutter3.32+Dart3.8跨平台仿微信app聊天界面|朋友圈

时思美 5 小时前
2025原创研发flutter3+dart3实战仿微信App聊天系统Flutter3Chat。
flutter3_wechat：基于最新跨平台框架flutter3.32+dart3.8+get_storage+photo_view从0-1打造仿微信app聊天项目。包含聊天、通讯录、我的及朋友圈等模块。实现发送文字+emo表情消息、长按仿微信语音操作、图片/链接预览等功能。
1.png

技术栈


  • 编辑器：VScode
  • 框架技术：Flutter3.32+Dart3.8
  • 组件库：material-design3
  • 弹窗组件：showDialog/SimpleDialog/showModalBottomSheet/AlertDialog
  • 图片预览：photo_view^0.15.0
  • 存储组件：get_storage^2.1.1
  • 下拉刷新：easy_refresh^3.4.0
  • toast提示：toast^0.3.0
  • 网址预览组件：url_launcher^6.3.1
2.png

3.gif

4.gif

项目框架目录

5.png

flutter3-chat聊天app项目已经更新到我的原创作品集。

flutter3.32+dart3.8仿微信App聊天界面|朋友圈
6.gif

7.png

8.png

9.png

10.png

11.png

12.png

13.png

14.png

15.png

16.png

17.png

18.png

19.png

20.png

21.png

22.png

23.png

24.png

25.png

26.png

27.png

28.png

29.png

30.png

flutter3沉浸式渐变导航条

31.png

32.png

33.png

通过配置AppBar提供的可伸缩灵活区域属性 flexibleSpace 搭配gradient即可快速实现渐变导航栏。
  1. AppBar(
  2.   title: Text('Flutter3-Chat'),
  3.   flexibleSpace: Container(
  4.     decoration: const BoxDecoration(
  5.       gradient: LinearGradient(
  6.         begin: Alignment.topLeft,
  7.         end: Alignment.bottomRight,
  8.         colors: [
  9.           Color(0xFF0091EA), Color(0xFF07C160)
  10.         ],
  11.       )
  12.     ),
  13.   )
  14. ),
复制代码
flutter3仿微信PopupMenu下拉菜单/下拉刷新

34.png

flutter提供的PopupMenuButton组件实现下拉菜单功能。
  1. PopupMenuButton(
  2.   icon: FStyle.iconfont(0xe62d, size: 17.0),
  3.   offset: const Offset(0, 50.0),
  4.   tooltip: '',
  5.   color: const Color(0xFF353535),
  6.   itemBuilder: (BuildContext context) {
  7.     return <PopupMenuItem>[
  8.       popupMenuItem(0xe666, '发起群聊', 0),
  9.       popupMenuItem(0xe75c, '添加朋友', 1),
  10.       popupMenuItem(0xe603, '扫一扫', 2),
  11.       popupMenuItem(0xe6ab, '收付款', 3),
  12.     ];
  13.   },
  14.   onSelected: (value) {
  15.     switch(value) {
  16.       case 0:
  17.         print('发起群聊');
  18.         break;
  19.       case 1:
  20.         Navigator.pushNamed(context, '/addfriends');
  21.         break;
  22.       case 2:
  23.         print('扫一扫');
  24.         break;
  25.       case 3:
  26.         print('收付款');
  27.         break;
  28.     }
  29.   },
  30. )
复制代码
35.png

下拉刷新、上拉加载更多是通过 easy_refresh 组件实现功能。
  1. EasyRefresh(
  2.   // 下拉加载提示
  3.   header: const ClassicHeader(
  4.     // showMessage: false,
  5.   ),
  6.   // 加载更多提示
  7.   footer: ClassicFooter(),
  8.   // 下拉刷新逻辑
  9.   onRefresh: () async {
  10.     // ...下拉逻辑
  11.     await Future.delayed(const Duration(seconds: 2));
  12.   },
  13.   // 上拉加载逻辑
  14.   onLoad: () async {
  15.     // ...
  16.   },
  17.   child: ListView.builder(
  18.     itemCount: chatList.length,
  19.     itemBuilder: (context, index) {
  20.       return Ink(
  21.         // ...
  22.       );
  23.     },
  24.   ),
  25. )
复制代码
36.png

37.png

38.png

弹窗功能均是自定义AlertDialog实现效果。通过无限制容器UnconstrainedBox配合SizedBox组件实现自定义窗口大小。
  1. // 关于弹窗
  2. void aboutAlertDialog(BuildContext context) {
  3.   showDialog(
  4.     context: context,
  5.     builder: (context) {
  6.       return UnconstrainedBox(
  7.         constrainedAxis: Axis.vertical,
  8.         child: SizedBox(
  9.           width: 320.0,
  10.           child: AlertDialog(
  11.             contentPadding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 20.0),
  12.             backgroundColor: Colors.white,
  13.             surfaceTintColor: Colors.white,
  14.             shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)),
  15.             content: Padding(
  16.               padding: const EdgeInsets.symmetric(horizontal: 10.0),
  17.               child: Column(
  18.                 mainAxisSize: MainAxisSize.min,
  19.                 children: [
  20.                   Image.asset('assets/images/logo.png', width: 90.0, height: 90.0, fit: BoxFit.cover,),
  21.                   const SizedBox(height: 10.0),
  22.                   const Text('Flutter3-WChat', style: TextStyle(color: Color(0xFF0091EA), fontSize: 22.0),),
  23.                   const SizedBox(height: 5.0),
  24.                   const Text('基于flutter3+dart3开发跨平台仿微信App聊天实例。', style: TextStyle(color: Colors.black45),),
  25.                   const SizedBox(height: 20.0),
  26.                   Text('©2024/01 Andy   Q: 282310962', style: TextStyle(color: Colors.grey[400], fontSize: 12.0),),
  27.                 ],
  28.               ),
  29.             ),
  30.           ),
  31.         ),
  32.       );
  33.     }
  34.   );
  35. }
  37. // 二维码名片弹窗
  38. void qrcodeAlertDialog(BuildContext context) {
  39.   showDialog(
  40.     context: context,
  41.     builder: (context) {
  42.       return UnconstrainedBox(
  43.         constrainedAxis: Axis.vertical,
  44.         child: SizedBox(
  45.           width: 320.0,
  46.           child: AlertDialog(
  47.             contentPadding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 20.0),
  48.             backgroundColor: const Color(0xFF07C160),
  49.             surfaceTintColor: const Color(0xFF07C160),
  50.             shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(3.0)),
  51.             content: Padding(
  52.               padding: const EdgeInsets.symmetric(horizontal: 10.0),
  53.               child: Column(
  54.                 mainAxisSize: MainAxisSize.min,
  55.                 children: [
  56.                   Image.asset('assets/images/qrcode.png', width: 250.0, fit: BoxFit.cover,),
  57.                   const SizedBox(height: 15.0),
  58.                   const Text('扫一扫，加我公众号', style: TextStyle(color: Colors.white60, fontSize: 14.0,),),
  59.                 ],
  60.               ),
  61.             ),
  62.           ),
  63.         ),
  64.       );
  65.     }
  66.   );
  67. }
  69. // 退出登录弹窗
  70. void logoutAlertDialog(BuildContext context) {
  71.   showDialog(
  72.     context: context,
  73.     builder: (context) {
  74.       return AlertDialog(
  75.         content: const Text('确定要退出登录吗？', style: TextStyle(fontSize: 16.0),),
  76.         backgroundColor: Colors.white,
  77.         surfaceTintColor: Colors.white,
  78.         shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)),
  79.         elevation: 2.0,
  80.         actionsPadding: const EdgeInsets.all(15.0),
  81.         actions: [
  82.           TextButton(
  83.             onPressed: () {Navigator.of(context).pop();},
  84.             child: const Text('取消', style: TextStyle(color: Colors.black54),)
  85.           ),
  86.           TextButton(
  87.             onPressed: handleLogout,
  88.             child: const Text('退出登录', style: TextStyle(color: Colors.red),)
  89.           ),
  90.         ],
  91.       );
  92.     }
  93.   );
  94. }
复制代码
flutter3实现微信朋友圈

39.png

40.png
  1. ImageGroup(images: item['images'])
  3. ImageGroup(
  4.   images: uploadList,
  5.   album: true,
  6.   onChoose: () async {
  7.     Toast.show('选择手机相册图片', duration: 2, gravity: 1);
  8.   },
  9. )
复制代码
41.png
  1. /// 微信朋友圈九宫格图片
  2. library;
  4. import 'package:flutter/material.dart';
  5. import '../router/fade_route.dart';
  6. import 'image_viewer.dart';
  8. import '../utils/index.dart';
  10. class ImageGroup extends StatelessWidget {
  11.   const ImageGroup({
  12.     super.key,
  13.     this.images,
  14.     this.width = 200.0,
  15.     this.album = false,
  16.     this.limit = 9,
  17.     this.onChoose,
  18.   });
  20.   final List<String>? images; // 图片组
  21.   final double width; // 图片宽度
  22.   final bool album; // 是否相册/专辑(最后面显示+可选择图片)
  23.   final int limit; // 限制多少张
  24.   final Function? onChoose; // 选择图片回调
  26.   int? get count => images?.length;
  27.   List<String>? get imgList => count! >= limit ? images?.sublist(0, limit) : images;
  29.   // 创建可点击预览图片
  30.   createImage(BuildContext context, String img, int key) {
  31.     return GestureDetector(
  32.       child: Hero(
  33.         tag: 'image_${key}_$img', // 放大缩小动画效果标识
  34.         child: img == '+' ?
  35.         Container(color: Colors.transparent, child: const Icon(Icons.add, size: 30.0, color: Colors.black45),)
  36.         :
  37.         Utils.isUrl(img) ?
  38.         Image.network(
  39.           img,
  40.           width: width,
  41.           fit: BoxFit.contain,
  42.         )
  43.         :
  44.         Image.asset(
  45.           img,
  46.           width: width,
  47.           fit: BoxFit.contain,
  48.         ),
  49.       ),
  50.       onTap: () {
  51.         // 选择图片
  52.         if(img == '+') {
  53.           onChoose!();
  54.         }else {
  55.           Navigator.of(context).push(FadeRoute(route: ImageViewer(
  56.             images: album ? imgList!.sublist(0, imgList!.length - 1) : imgList,
  57.             index: key,
  58.             heroTags: imgList!.asMap().entries.map((e) => 'image_${e.key}_${e.value}').toList(),
  59.           )));
  60.         }
  61.       },
  62.     );
  63.   }
  65.   @override
  66.   Widget build(BuildContext context){
  67.     // 一张图片
  68.     if(count == 1 && !album) {
  69.       return SizedBox(
  70.         width: width,
  71.         child: createImage(context, imgList![0], 0),
  72.       );
  73.     }
  75.     if(album && count! < limit) {
  76.       imgList?.add('+');
  77.     }
  78.    
  79.     // 多张图片
  80.     return GridView(
  81.       shrinkWrap: true,
  82.       physics: const NeverScrollableScrollPhysics(),
  83.       gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
  84.         // 横轴元素个数
  85.         crossAxisCount: 3,
  86.         // 纵轴间距
  87.         mainAxisSpacing: 5.0,
  88.         // 横轴间距
  89.         crossAxisSpacing: 5.0,
  90.         // 子组件宽高比例
  91.         childAspectRatio: 1,
  92.       ),
  93.       children: imgList!.asMap().entries.map((e) {
  94.         return Container(
  95.           color: Colors.grey[100],
  96.           child: createImage(context, e.value, e.key),
  97.         );
  98.       }).toList(),
  99.     );
  100.   }
  101. }
复制代码
flutter3聊天功能

42.png

文本框TextField设置maxLines: null即可实现多行文本输入，支持图文emoj混排，网址连接识别等功能。
  1. // 输入框
  2. Offstage(
  3.   offstage: voiceBtnEnable,
  4.   child: ConstrainedBox(
  5.     constraints: BoxConstraints(maxHeight: 300.0),
  6.     child: TextField(
  7.       decoration: InputDecoration(
  8.         isDense: true,
  9.         hoverColor: Colors.transparent,
  10.         border: OutlineInputBorder(borderSide: BorderSide.none),
  11.         contentPadding: EdgeInsets.fromLTRB(10, 0, 10, 0)
  12.       ),
  13.       style: const TextStyle(fontSize: 16.0,),
  14.       maxLines: null,
  15.       controller: editorController,
  16.       focusNode: editorFocusNode,
  17.       cursorColor: const Color(0xFF07C160),
  18.       onChanged: (value) {},
  19.     ),
  20.   ),
  21. )
复制代码
43.png

44.gif
  1. // 语音
  2. Offstage(
  3.   offstage: !voiceBtnEnable,
  4.   child: GestureDetector(
  5.     child: Container(
  6.       decoration: BoxDecoration(
  7.         color: Colors.white,
  8.         borderRadius: BorderRadius.circular(5),
  9.       ),
  10.       alignment: Alignment.center,
  11.       height: 40.0,
  12.       width: double.infinity,
  13.       child: Text(voiceTypeMap[voiceType], style: const TextStyle(fontSize: 15.0),),
  14.     ),
  15.     onPanStart: (details) {
  16.       setState(() {
  17.         voiceType = 1;
  18.         voicePanelEnable = true;
  19.       });
  20.     },
  21.     onPanUpdate: (details) {
  22.       Offset pos = details.globalPosition;
  23.       double swipeY = MediaQuery.of(context).size.height - 120;
  24.       double swipeX = MediaQuery.of(context).size.width / 2 + 50;
  25.       setState(() {
  26.         if(pos.dy >= swipeY) {
  27.           voiceType = 1; // 松开发送
  28.         }else if (pos.dy < swipeY && pos.dx < swipeX) {
  29.           voiceType = 2; // 左滑松开取消
  30.         }else if (pos.dy < swipeY && pos.dx >= swipeX) {
  31.           voiceType = 3; // 右滑语音转文字
  32.         }
  33.       });
  34.     },
  35.     onPanEnd: (details) {
  36.       // print('停止录音');
  37.       setState(() {
  38.         switch(voiceType) {
  39.           case 1:
  40.             Toast.show('发送录音文件', duration: 1, gravity: 1);
  41.             voicePanelEnable = false;
  42.             break;
  43.           case 2:
  44.             Toast.show('取消发送', duration: 1, gravity: 1);
  45.             voicePanelEnable = false;
  46.             break;
  47.           case 3:
  48.             Toast.show('语音转文字', duration: 1, gravity: 1);
  49.             voicePanelEnable = true;
  50.             voiceToTransfer = true;
  51.             break;
  52.         }
  53.         voiceType = 0;
  54.       });
  55.     },
  56.   ),
  57. )
复制代码
flutter3绘制聊天箭头
45.png
  1. // 绘制聊天箭头
  2. class ArrowShape extends CustomPainter {
  3.   ArrowShape({
  4.     required this.arrowColor,
  5.     this.arrowSize = 7,
  6.   });
  8.   final Color arrowColor; // 箭头颜色
  9.   final double arrowSize; // 箭头大小
  11.   @override
  12.   void paint(Canvas canvas, Size size) {
  13.     var paint = Paint()..color = arrowColor;
  15.     var path = Path();
  16.     path.lineTo(-arrowSize, 0);
  17.     path.lineTo(0, arrowSize);
  18.     path.lineTo(arrowSize, 0);
  19.     canvas.drawPath(path, paint);
  20.   }
  22.   @override
  23.   bool shouldRepaint(CustomPainter oldDelegate) {
  24.     return false;
  25.   }
  26. }
复制代码
综上就是Flutter3+Dart3实战仿微信App聊天项目的一些知识分享，感谢大家的阅读与支持！
附上几个最新项目实例
最新版uniapp+vue3+uv-ui跨三端短视频+直播+聊天【H5+小程序+App端】
Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板

Electron35-DeepSeek桌面端AI系统|vue3.5+electron+arco客户端ai模板
vue3-webseek网页版AI问答|Vite6+DeepSeek+Arco流式ai聊天打字效果
flutter3-dymall仿抖音直播商城|Flutter3.27短视频+直播+聊天App实例
tauri2.0-admin桌面端后台系统|Tauri2+Vite5+ElementPlus管理后台EXE程序
Tauri2.0+Vite5聊天室|vue3+tauri2+element-plus仿微信|tauri聊天应用
Electron32-ViteOS桌面版os系统|vue3+electron+arco客户端OS管理模板
uniapp+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天语音/朋友圈
46.gif

 

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

使用道具 举报
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
时思美
5 小时前

0

粉丝关注

12

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫