最新研发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电脑端聊天项目已经更新到我的原创作品集。

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

项目入口配置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程序

Tauri2.0+Vite5聊天室|vue3+tauri2+element-plus仿微信|tauri聊天应用

uniapp+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天语音/朋友圈

 

posted @ 2025-07-21 08:20  xiaoyan2017  阅读(301)  评论(1)    收藏  举报
友情链接： UP主小店B站