最新研发flutter3.27+bitsdojo_window+getx客户端仿微信聊天Exe应用
2025跨平台Flutter3+Dart3+Getx仿微信电脑端Exe聊天系统Flutter3-WinChat。
flutter3_winchat:基于最新跨平台框架flutter3.27+dart3.6+getx+bitsdojo_window+media_kit+system_tray搭建桌面客户端仿微信聊天exe实例。整合了聊天功能、联系人、收藏、朋友圈、小视频、我的等模块。
技术栈
- 开发工具: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
项目框架结构
flutter3-winchat电脑端聊天项目已经更新到我的原创作品集。
项目入口配置main.dart
import 'dart:io'; import 'package:flutter/material.dart'; import 'package:bitsdojo_window/bitsdojo_window.dart'; import 'package:get/get.dart'; import 'package:get_storage/get_storage.dart'; import 'package:media_kit/media_kit.dart'; import 'package:system_tray/system_tray.dart'; import 'utils/common.dart'; // 公共布局模板 import 'layouts/index.dart'; // 路由管理 import 'router/index.dart'; void main() async { // 初始化get_storage存储类 await GetStorage.init(); // 初始化media_kit视频套件 WidgetsFlutterBinding.ensureInitialized(); MediaKit.ensureInitialized(); initSystemTray(); runApp(const MyApp()); // 初始化bitsdojo_window窗口 doWhenWindowReady(() { appWindow.size = const Size(850, 620); appWindow.minSize = const Size(700, 500); appWindow.alignment = Alignment.center; appWindow.title = 'Flutter3-WinChat'; appWindow.show(); }); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return GetMaterialApp( title: 'FLUTTER3 WINCHAT', debugShowCheckedModeBanner: false, theme: ThemeData( colorScheme: ColorScheme.fromSeed(seedColor: Color(0xFF07C160)), useMaterial3: true, // 修正windows端字体粗细不一致 fontFamily: Platform.isWindows ? 'Microsoft YaHei' : null, ), home: const Layout(), // 初始路由 initialRoute: Common.isLogin() ? '/index' :'/login', // 路由页面 getPages: routes, ); } } // 创建系统托盘图标 Future<void> initSystemTray() async { String trayIco = 'assets/images/tray.ico'; SystemTray systemTray = SystemTray(); // 初始化系统托盘 await systemTray.initSystemTray( title: 'system-tray', iconPath: trayIco, ); // 右键菜单 final Menu menu = Menu(); await menu.buildFrom([ MenuItemLabel(label: '打开主界面', onClicked: (menuItem) => appWindow.show()), MenuItemLabel(label: '隐藏窗口', onClicked: (menuItem) => appWindow.hide()), MenuItemLabel(label: '设置中心', onClicked: (menuItem) => Get.toNamed('/setting')), MenuItemLabel(label: '关于', onClicked: (menuItem) => {}), MenuItemLabel(label: '退出', onClicked: (menuItem) => appWindow.close()), ]); await systemTray.setContextMenu(menu); // 右键事件 systemTray.registerSystemTrayEventHandler((eventName) { debugPrint('eventName: $eventName'); if (eventName == kSystemTrayEventClick) { Platform.isWindows ? appWindow.show() : systemTray.popUpContextMenu(); } else if (eventName == kSystemTrayEventRightClick) { Platform.isWindows ? systemTray.popUpContextMenu() : appWindow.show(); } }); }
使用 bitsdojo_window 插件进行窗口管理。支持无边框窗口,窗口尺寸大小,自定义系统操作按钮(最大化/最小化/关闭)。
https://pub-web.flutter-io.cn/packages/bitsdojo_window
使用 system_tray 插件管理系统托盘图标。
https://pub-web.flutter-io.cn/packages/system_tray
flutter3公共布局
项目整体布局分为菜单栏+侧边栏+右侧主区域三个模块。
class Layout extends StatefulWidget { const Layout({ super.key, this.activitybar = const Activitybar(), this.sidebar, this.child, this.showSidebar = true, }); final Widget? activitybar; // 左侧菜单栏 final Widget? sidebar; // 侧边栏 final Widget? child; // 右侧内容区域 final bool showSidebar; // 是否显示侧边栏 @override State<Layout> createState() => _LayoutState(); } class _LayoutState extends State<Layout> { // 置顶窗口 bool winTopMost = false; @override void initState() { super.initState(); } @override void dispose() { super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.grey[100], body: Flex( direction: Axis.horizontal, children: [ // 左侧菜单栏 MoveWindow( child: widget.activitybar ), // 侧边栏 Visibility( visible: widget.showSidebar, child: SizedBox( // ... ), ), // 主体容器 Expanded( child: Column( children: [ // 导航栏 WindowTitleBarBox( child: Row( children: [ Expanded( child: MoveWindow(), ), // 右上角操作按钮组 Winbtn( // ... ), ], ), ), // 内容区域 Expanded( child: Container( child: widget.child, ), ), ], ), ), ], ), ); } }
flutter3路由配置
import 'package:flutter/material.dart'; import 'package:get/get.dart'; import '../utils/common.dart'; /* 引入路由页面 */ import '../views/auth/login.dart'; import '../views/auth/register.dart'; // 首页 import '../views/index/index.dart'; // 通讯录 import '../views/contact/index.dart'; import '../views/contact/addfriends.dart'; import '../views/contact/newfriends.dart'; import '../views/contact/uinfo.dart'; // 收藏 import '../views/favor/index.dart'; import '../views/favor/write.dart'; // 我的 import '../views/my/index.dart'; import '../views/my/setting.dart'; import '../views/my/recharge.dart'; import '../views/my/wallet.dart'; // 朋友圈 import '../views/fzone/index.dart'; import '../views/fzone/publish.dart'; // 短视频 import '../views/fvideo/index.dart'; // 聊天 import '../views/chat/group-chat/chat.dart'; // 路由地址集合 final Map<String, Widget> routeMap = { '/index': const Index(), '/contact': const Contact(), '/addfriends': const AddFriends(), '/newfriends': const NewFriends(), '/uinfo': const Uinfo(), '/favor': const Favor(), '/writefavor': const WriteFavor(), '/my': const My(), '/setting': const Setting(), '/recharge': const Recharge(), '/wallet': const Wallet(), '/fzone': const Fzone(), '/publish': const PublishFzone(), '/fvideo': const Fvideo(), '/chat': const Chat(), }; final List<GetPage> patchRoute = routeMap.entries.map((e) => GetPage( name: e.key, // 路由名称 page: () => e.value, // 路由页面 transition: Transition.noTransition, // 跳转路由动画 middlewares: [AuthMiddleware()], // 路由中间件 )).toList(); final List<GetPage> routes = [ GetPage(name: '/login', page: () => const Login()), GetPage(name: '/register', page: () => const Register()), ...patchRoute, ]; // 路由拦截 class AuthMiddleware extends GetMiddleware { @override RouteSettings? redirect(String? route) { return Common.isLogin() ? null : const RouteSettings(name: '/login'); } }
flutter3+bitsdojo_window自定义无边框窗口
Widget build(BuildContext context){ return Row( children: [ Container( child: widget.leading, ), Visibility( visible: widget.minimizable, child: MouseRegion( cursor: SystemMouseCursors.click, child: SizedBox( width: 32.0, height: 36.0, child: MinimizeWindowButton(colors: buttonColors, onPressed: handleMinimize,), ) ), ), Visibility( visible: widget.maximizable, child: MouseRegion( cursor: SystemMouseCursors.click, child: SizedBox( width: 32.0, height: 36.0, child: isMaximized ? RestoreWindowButton(colors: buttonColors, onPressed: handleMaxRestore,) : MaximizeWindowButton(colors: buttonColors, onPressed: handleMaxRestore,), ), ), ), Visibility( visible: widget.closable, child: MouseRegion( cursor: SystemMouseCursors.click, child: SizedBox( width: 32.0, height: 36.0, child: CloseWindowButton(colors: closeButtonColors, onPressed: handleExit,), ), ), ), Container( child: widget.trailing, ), ], ); }
// 监听窗口尺寸变化 @override void didChangeMetrics() { super.didChangeMetrics(); WidgetsBinding.instance.addPostFrameCallback((_) { setState(() { isMaximized = appWindow.isMaximized; }); }); } // 最小化 void handleMinimize() { appWindow.minimize(); } // 设置最大化/恢复 void handleMaxRestore() { appWindow.maximizeOrRestore(); } // 关闭 void handleExit() { showDialog( context: context, builder: (context) { return AlertDialog( content: const Text('是否最小化至托盘,不退出程序?', style: TextStyle(fontSize: 16.0),), backgroundColor: Colors.white, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)), elevation: 3.0, actionsPadding: const EdgeInsets.all(15.0), actions: [ TextButton( onPressed: () { Get.back(); appWindow.hide(); }, child: const Text('最小化至托盘', style: TextStyle(color: Colors.blue),) ), TextButton( onPressed: () { Get.back(); appWindow.close(); }, child: const Text('退出系统', style: TextStyle(color: Colors.red),) ), ], ); } ); }
flutter3小视频模块
使用media_kit视频套件实现类似抖音短视频,支持点击暂停/播放、上下滑动切换功能。
底部mini播放进度条支持拖拽、点击播放位置功能。
// mini播放进度条 Positioned( bottom: 10.0, left: 6.0, right: 6.0, child: Visibility( visible: videoIndex == index && position > Duration.zero, child: Listener( child: SliderTheme( data: SliderThemeData( trackHeight: sliderDraging ? 6.0 : 2.0, thumbShape: RoundSliderThumbShape(enabledThumbRadius: 4.0), // 调整滑块的大小 // trackShape: RectangularSliderTrackShape(), // 使用矩形轨道形状 overlayShape: RoundSliderOverlayShape(overlayRadius: 0), // 去掉Slider默认上下边距间隙 inactiveTrackColor: Colors.white24, // 设置非活动进度条的颜色 activeTrackColor: Colors.white, // 设置活动进度条的颜色 thumbColor: Colors.white, // 设置滑块的颜色 overlayColor: Colors.transparent, // 设置滑块覆盖层的颜色 ), child: Slider( value: sliderValue, onChanged: (value) async { // debugPrint('当前视频播放时间$value'); setState(() { sliderValue = value; }); // 跳转播放时间 await player.seek(duration * value.clamp(0.0, 1.0)); }, onChangeEnd: (value) async { setState(() { sliderDraging = false; }); // 继续播放 if(!player.state.playing) { await player.play(); } }, ), ), onPointerMove: (e) { setState(() { sliderDraging = true; }); }, ), ), )
flutter3聊天模板
聊天编辑框支持多行文本、超过高度出现滚动条、光标位置插入emo表情,支持链接。
优化了类似微信按住说话、左滑取消、右滑转文字功能。
综上就是flutter3实战仿微信客户端聊天系统的一些知识分享,希望对大家有所帮助!💪
Electron38-Wechat电脑端聊天|vite7+electron38仿微信桌面端聊天系统
附上几个最新实例项目
Electron38-Vue3OS客户端OS系统|vite7+electron38+arco桌面os后台管理
Vite7网页版聊天|Vue3.5+Pinia3+ElementPlus仿微信网页端web聊天系统
Flutter3-MacOS桌面OS系统|flutter3.32+window_manager客户端OS模板
最新版Flutter3.32+Dart3.8跨平台仿微信app聊天界面|朋友圈
最新版uniapp+vue3+uv-ui跨三端短视频+直播+聊天【H5+小程序+App端】
Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板
vue3-webseek网页版AI问答|Vite6+DeepSeek+Arco流式ai聊天打字效果
Electron35-DeepSeek桌面端AI系统|vue3.5+electron+arco客户端ai模板
flutter3-dymall仿抖音直播商城|Flutter3.27短视频+直播+聊天App实例
tauri2.0-admin桌面端后台系统|Tauri2+Vite5+ElementPlus管理后台EXE程序