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

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 业界 ›最新研发flutter3.27+bitsdojo_window+getx客户端仿微信 ...

最新研发flutter3.27+bitsdojo_window+getx客户端仿微信聊天Exe应用

靳谷雪 13 小时前
2025跨平台Flutter3+Dart3+Getx仿微信电脑端Exe聊天系统Flutter3-WinChat。
flutter3_winchat：基于最新跨平台框架flutter3.27+dart3.6+getx+bitsdojo_window+media_kit+system_tray搭建桌面客户端仿微信聊天exe实例。整合了聊天功能、联系人、收藏、朋友圈、小视频、我的等模块。
1.png

技术栈


  • 开发工具：Vscode
  • 技术框架：Flutter3.27.1+Dart3.6.0
  • 窗口管理：bitsdojo_window: ^0.1.6
  • 托盘图标：system_tray: ^2.0.3
  • 路由/状态管理：get: ^4.7.2
  • 本地存储：get_storage: ^2.1.1
  • 图片预览：photo_view: ^0.15.0
  • 网址预览：url_launcher: ^6.3.1
  • 视频组件：media_kit: ^1.2.0
  • 文件选择器：file_picker: ^10.2.0
  • 富文本编辑器：fleather: ^1.22.0
2.gif

3.gif

项目框架结构

4.png

flutter3-winchat电脑端聊天项目已经更新到我的原创作品集。

Flutter3.27+bitsdojo_window仿微信客户端聊天Exe
5.png

6.png

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

31.png

32.png

33.png

项目入口配置main.dart
  1. import 'dart:io';
  2. import 'package:flutter/material.dart';
  3. import 'package:bitsdojo_window/bitsdojo_window.dart';
  4. import 'package:get/get.dart';
  5. import 'package:get_storage/get_storage.dart';
  6. import 'package:media_kit/media_kit.dart';
  7. import 'package:system_tray/system_tray.dart';
  9. import 'utils/common.dart';
  11. // 公共布局模板
  12. import 'layouts/index.dart';
  14. // 路由管理
  15. import 'router/index.dart';
  17. void main() async {
  18.   // 初始化get_storage存储类
  19.   await GetStorage.init();
  21.   // 初始化media_kit视频套件
  22.   WidgetsFlutterBinding.ensureInitialized();
  23.   MediaKit.ensureInitialized();
  25.   initSystemTray();
  27.   runApp(const MyApp());
  29.   // 初始化bitsdojo_window窗口
  30.   doWhenWindowReady(() {
  31.     appWindow.size = const Size(850, 620);
  32.     appWindow.minSize = const Size(700, 500);
  33.     appWindow.alignment = Alignment.center;
  34.     appWindow.title = 'Flutter3-WinChat';
  35.     appWindow.show();
  36.   });
  37. }
  39. class MyApp extends StatelessWidget {
  40.   const MyApp({super.key});
  42.   @override
  43.   Widget build(BuildContext context) {
  44.     return GetMaterialApp(
  45.       title: 'FLUTTER3 WINCHAT',
  46.       debugShowCheckedModeBanner: false,
  47.       theme: ThemeData(
  48.         colorScheme: ColorScheme.fromSeed(seedColor: Color(0xFF07C160)),
  49.         useMaterial3: true,
  50.         // 修正windows端字体粗细不一致
  51.         fontFamily: Platform.isWindows ? 'Microsoft YaHei' : null,
  52.       ),
  53.       home: const Layout(),
  54.       // 初始路由
  55.       initialRoute: Common.isLogin() ? '/index' :'/login',
  56.       // 路由页面
  57.       getPages: routes,
  58.     );
  59.   }
  60. }
  62. // 创建系统托盘图标
  63. Future<void> initSystemTray() async {
  64.   String trayIco = 'assets/images/tray.ico';
  65.   SystemTray systemTray = SystemTray();
  67.   // 初始化系统托盘
  68.   await systemTray.initSystemTray(
  69.     title: 'system-tray',
  70.     iconPath: trayIco,
  71.   );
  73.   // 右键菜单
  74.   final Menu menu = Menu();
  75.   await menu.buildFrom([
  76.     MenuItemLabel(label: '打开主界面', onClicked: (menuItem) => appWindow.show()),
  77.     MenuItemLabel(label: '隐藏窗口', onClicked: (menuItem) => appWindow.hide()),
  78.     MenuItemLabel(label: '设置中心', onClicked: (menuItem) => Get.toNamed('/setting')),
  79.     MenuItemLabel(label: '关于', onClicked: (menuItem) => {}),
  80.     MenuItemLabel(label: '退出', onClicked: (menuItem) => appWindow.close()),
  81.   ]);
  82.   await systemTray.setContextMenu(menu);
  84.   // 右键事件
  85.   systemTray.registerSystemTrayEventHandler((eventName) {
  86.     debugPrint('eventName: $eventName');
  87.     if (eventName == kSystemTrayEventClick) {
  88.       Platform.isWindows ? appWindow.show() : systemTray.popUpContextMenu();
  89.     } else if (eventName == kSystemTrayEventRightClick) {
  90.       Platform.isWindows ? systemTray.popUpContextMenu() : appWindow.show();
  91.     }
  92.   });
  93. }
复制代码
使用 bitsdojo_window 插件进行窗口管理。支持无边框窗口，窗口尺寸大小，自定义系统操作按钮(最大化/最小化/关闭)。
https://pub-web.flutter-io.cn/packages/bitsdojo_window
使用 system_tray 插件管理系统托盘图标。
34.png

https://pub-web.flutter-io.cn/packages/system_tray
flutter3公共布局

35.png

项目整体布局分为菜单栏+侧边栏+右侧主区域三个模块。
36.png
  1. class Layout extends StatefulWidget {
  2.   const Layout({
  3.     super.key,
  4.     this.activitybar = const Activitybar(),
  5.     this.sidebar,
  6.     this.child,
  7.     this.showSidebar = true,
  8.   });
  10.   final Widget? activitybar; // 左侧菜单栏
  11.   final Widget? sidebar; // 侧边栏
  12.   final Widget? child; // 右侧内容区域
  13.   final bool showSidebar; // 是否显示侧边栏
  15.   @override
  16.   State<Layout> createState() => _LayoutState();
  17. }
  19. class _LayoutState extends State<Layout> {
  20.   // 置顶窗口
  21.   bool winTopMost = false;
  22.   
  23.   @override
  24.   void initState() {
  25.     super.initState();
  26.   }
  28.   @override
  29.   void dispose() {
  30.     super.dispose();
  31.   }
  33.   @override
  34.   Widget build(BuildContext context) {
  35.     return Scaffold(
  36.       backgroundColor: Colors.grey[100],
  37.       body: Flex(
  38.         direction: Axis.horizontal,
  39.         children: [
  40.           // 左侧菜单栏
  41.           MoveWindow(
  42.             child: widget.activitybar
  43.           ),
  44.           // 侧边栏
  45.           Visibility(
  46.             visible: widget.showSidebar,
  47.             child: SizedBox(
  48.               // ...
  49.             ),
  50.           ),
  51.           // 主体容器
  52.           Expanded(
  53.             child: Column(
  54.               children: [
  55.                 // 导航栏
  56.                 WindowTitleBarBox(
  57.                   child: Row(
  58.                     children: [
  59.                       Expanded(
  60.                         child: MoveWindow(),
  61.                       ),
  62.                       // 右上角操作按钮组
  63.                       Winbtn(
  64.                         // ...
  65.                       ),
  66.                     ],
  67.                   ),
  68.                 ),
  69.                 // 内容区域
  70.                 Expanded(
  71.                   child: Container(
  72.                     child: widget.child,
  73.                   ),
  74.                 ),
  75.               ],
  76.             ),
  77.           ),
  78.         ],
  79.       ),
  80.     );
  81.   }
  82. }
复制代码
flutter3路由配置

37.png
  1. import 'package:flutter/material.dart';
  2. import 'package:get/get.dart';
  4. import '../utils/common.dart';
  6. /* 引入路由页面 */
  7. import '../views/auth/login.dart';
  8. import '../views/auth/register.dart';
  9. // 首页
  10. import '../views/index/index.dart';
  11. // 通讯录
  12. import '../views/contact/index.dart';
  13. import '../views/contact/addfriends.dart';
  14. import '../views/contact/newfriends.dart';
  15. import '../views/contact/uinfo.dart';
  16. // 收藏
  17. import '../views/favor/index.dart';
  18. import '../views/favor/write.dart';
  19. // 我的
  20. import '../views/my/index.dart';
  21. import '../views/my/setting.dart';
  22. import '../views/my/recharge.dart';
  23. import '../views/my/wallet.dart';
  24. // 朋友圈
  25. import '../views/fzone/index.dart';
  26. import '../views/fzone/publish.dart';
  27. // 短视频
  28. import '../views/fvideo/index.dart';
  29. // 聊天
  30. import '../views/chat/group-chat/chat.dart';
  32. // 路由地址集合
  33. final Map<String, Widget> routeMap = {
  34.   '/index': const Index(),
  35.   '/contact': const Contact(),
  36.   '/addfriends': const AddFriends(),
  37.   '/newfriends': const NewFriends(),
  38.   '/uinfo': const Uinfo(),
  39.   '/favor': const Favor(),
  40.   '/writefavor': const WriteFavor(),
  41.   '/my': const My(),
  42.   '/setting': const Setting(),
  43.   '/recharge': const Recharge(),
  44.   '/wallet': const Wallet(),
  45.   '/fzone': const Fzone(),
  46.   '/publish': const PublishFzone(),
  47.   '/fvideo': const Fvideo(),
  48.   '/chat': const Chat(),
  49. };
  51. final List<GetPage> patchRoute = routeMap.entries.map((e) => GetPage(
  52.   name: e.key, // 路由名称
  53.   page: () => e.value, // 路由页面
  54.   transition: Transition.noTransition, // 跳转路由动画
  55.   middlewares: [AuthMiddleware()], // 路由中间件
  56. )).toList();
  58. final List<GetPage> routes = [
  59.   GetPage(name: '/login', page: () => const Login()),
  60.   GetPage(name: '/register', page: () => const Register()),
  61.   ...patchRoute,
  62. ];
  64. // 路由拦截
  65. class AuthMiddleware extends GetMiddleware {
  66.   @override
  67.   RouteSettings? redirect(String? route) {
  68.     return Common.isLogin() ? null : const RouteSettings(name: '/login');
  69.   }
  70. }
复制代码
flutter3+bitsdojo_window自定义无边框窗口

38.png

39.png

40.png
  1. Widget build(BuildContext context){
  2.   return Row(
  3.     children: [
  4.       Container(
  5.         child: widget.leading,
  6.       ),
  7.       Visibility(
  8.         visible: widget.minimizable,
  9.         child: MouseRegion(
  10.           cursor: SystemMouseCursors.click,
  11.           child: SizedBox(
  12.             width: 32.0,
  13.             height: 36.0,
  14.             child: MinimizeWindowButton(colors: buttonColors, onPressed: handleMinimize,),
  15.           )
  16.         ),
  17.       ),
  18.       Visibility(
  19.         visible: widget.maximizable,
  20.         child: MouseRegion(
  21.           cursor: SystemMouseCursors.click,
  22.           child: SizedBox(
  23.             width: 32.0,
  24.             height: 36.0,
  25.             child: isMaximized ?
  26.             RestoreWindowButton(colors: buttonColors, onPressed: handleMaxRestore,)
  27.             :
  28.             MaximizeWindowButton(colors: buttonColors, onPressed: handleMaxRestore,),
  29.           ),
  30.         ),
  31.       ),
  32.       Visibility(
  33.         visible: widget.closable,
  34.         child: MouseRegion(
  35.           cursor: SystemMouseCursors.click,
  36.           child: SizedBox(
  37.             width: 32.0,
  38.             height: 36.0,
  39.             child: CloseWindowButton(colors: closeButtonColors, onPressed: handleExit,),
  40.           ),
  41.         ),
  42.       ),
  43.       Container(
  44.         child: widget.trailing,
  45.       ),
  46.     ],
  47.   );
  48. }
复制代码
  1. // 监听窗口尺寸变化
  2. @override
  3. void didChangeMetrics() {
  4.   super.didChangeMetrics();
  5.   WidgetsBinding.instance.addPostFrameCallback((_) {
  6.     setState(() {
  7.       isMaximized = appWindow.isMaximized;
  8.     });
  9.   });
  10. }
  12. // 最小化
  13. void handleMinimize() {
  14.   appWindow.minimize();
  15. }
  16. // 设置最大化/恢复
  17. void handleMaxRestore() {
  18.   appWindow.maximizeOrRestore();
  19. }
  20. // 关闭
  21. void handleExit() {
  22.   showDialog(
  23.     context: context,
  24.     builder: (context) {
  25.       return AlertDialog(
  26.         content: const Text('是否最小化至托盘，不退出程序？', style: TextStyle(fontSize: 16.0),),
  27.         backgroundColor: Colors.white,
  28.         shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),
  29.         elevation: 3.0,
  30.         actionsPadding: const EdgeInsets.all(15.0),
  31.         actions: [
  32.           TextButton(
  33.             onPressed: () {
  34.               Get.back();
  35.               appWindow.hide();
  36.             },
  37.             child: const Text('最小化至托盘', style: TextStyle(color: Colors.blue),)
  38.           ),
  39.           TextButton(
  40.             onPressed: () {
  41.               Get.back();
  42.               appWindow.close();
  43.             },
  44.             child: const Text('退出系统', style: TextStyle(color: Colors.red),)
  45.           ),
  46.         ],
  47.       );
  48.     }
  49.   );
  50. }
复制代码
flutter3小视频模块

41.png

使用media_kit视频套件实现类似抖音短视频，支持点击暂停/播放、上下滑动切换功能。
底部mini播放进度条支持拖拽、点击播放位置功能。
  1. // mini播放进度条
  2. Positioned(
  3.   bottom: 10.0,
  4.   left: 6.0,
  5.   right: 6.0,
  6.   child: Visibility(
  7.     visible: videoIndex == index && position > Duration.zero,
  8.     child: Listener(
  9.       child: SliderTheme(
  10.         data: SliderThemeData(
  11.           trackHeight: sliderDraging ? 6.0 : 2.0,
  12.           thumbShape: RoundSliderThumbShape(enabledThumbRadius: 4.0), // 调整滑块的大小
  13.           // trackShape: RectangularSliderTrackShape(), // 使用矩形轨道形状
  14.           overlayShape: RoundSliderOverlayShape(overlayRadius: 0), // 去掉Slider默认上下边距间隙
  15.           inactiveTrackColor: Colors.white24, // 设置非活动进度条的颜色
  16.           activeTrackColor: Colors.white, // 设置活动进度条的颜色
  17.           thumbColor: Colors.white, // 设置滑块的颜色
  18.           overlayColor: Colors.transparent, // 设置滑块覆盖层的颜色
  19.         ),
  20.         child: Slider(
  21.           value: sliderValue,
  22.           onChanged: (value) async {
  23.             // debugPrint('当前视频播放时间$value');
  24.             setState(() {
  25.               sliderValue = value;
  26.             });
  27.             // 跳转播放时间
  28.             await player.seek(duration * value.clamp(0.0, 1.0));
  29.           },
  30.           onChangeEnd: (value) async {
  31.             setState(() {
  32.               sliderDraging = false;
  33.             });
  34.             // 继续播放
  35.             if(!player.state.playing) {
  36.               await player.play();
  37.             }
  38.           },
  39.         ),
  40.       ),
  41.       onPointerMove: (e) {
  42.         setState(() {
  43.           sliderDraging = true;
  44.         });
  45.       },
  46.     ),
  47.   ),
  48. )
复制代码
flutter3聊天模板

42.png

聊天编辑框支持多行文本、超过高度出现滚动条、光标位置插入emo表情，支持链接。
43.png

优化了类似微信按住说话、左滑取消、右滑转文字功能。
44.png


综上就是flutter3实战仿微信客户端聊天系统的一些知识分享，希望对大家有所帮助！
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

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

0

粉丝关注

9

主题发布

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