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

2026跨平台Flutter3+Dart3+Getx仿微信电脑端Exe聊天系统Flutter3-WinChat。

flutter3_winchat：基于最新跨平台框架flutter3.41+dart3.11+getx+bitsdojo_window+media_kit+system_tray搭建桌面客户端仿微信聊天exe实例。整合了聊天功能、联系人、收藏、朋友圈、小视频、我的等模块。

360截图20260508074440760

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

Flutter3-MacOS桌面OS系统|flutter3.32+window_manager客户端OS模板

最新版Flutter3.38+Dart3.10仿写抖音APP直播+短视频+聊天应用程序

Flutter3.41+DeepSeek智能AI应用|flutter3+getx+dio流式ai对话app模板

flutter3.41+deepseek+dio+getx纯手搓桌面客户端ai流式智能对话系统

Flutter3.41+Dart3.11+Get酒店预订app实例|flutter3旅行预约酒店模板

技术栈

  • 开发工具：Vscode
  • 技术框架：Flutter3.41.5+Dart3.11.3
  • 窗口管理：bitsdojo_window: ^0.1.6
  • 托盘图标：system_tray: ^2.0.3
  • 路由/状态管理：get: ^4.7.3
  • 本地存储：get_storage: ^2.1.1
  • 图片预览：photo_view: ^0.15.0
  • 网址预览：url_launcher: ^6.3.2
  • 视频组件：media_kit: ^1.2.6
  • 文件选择器：file_picker: ^11.0.2
  • 富文本编辑器：fleather: ^1.26.0

p1_1

p7

项目框架结构

360截图20260508075650372

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

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

001360截图20260507214742046

360截图20260508074213049

360截图20260508075152337

002360截图20260507221802461

003360截图20260507221900092

003360截图20260507221943291

003360截图20260507222329690

004360截图20260507222916267

004360截图20260507223742404

005360截图20260507224910897

005360截图20260507225156939

006360截图20260507225806112

006360截图20260507225346417

007360截图20260507230038048

008360截图20260507230137952

008360截图20260507230248544

009360截图20260507230358056

010360截图20260507230433625

011360截图20260507230724032

011360截图20260507230701055

011360截图20260508001958298

011360截图20260508001805116

011360截图20260508002110083

011360截图20260508003557233

011360截图20260508003830275

011360截图20260508003903736

011360截图20260508004012185

011360截图20260508004134537

011360截图20260508004205065

011360截图20260508004221856

011360截图20260508004251544

011360截图20260508004341400

012360截图20260508004414392

项目入口配置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公共布局

014360截图20260508004856692

项目整体布局分为菜单栏+侧边栏+右侧主区域三个模块。

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自定义无边框窗口

012360截图20260508004414392

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小视频模块

006360截图20260507225612873

006360截图20260507225948857

使用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聊天模板

360截图20260508075152337

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

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

011360截图20260508004251544

综上就是flutter3实战仿微信客户端聊天系统的一些知识分享，希望对大家有所帮助！💪

Electron38-Wechat电脑端聊天|vite7+electron38仿微信桌面端聊天系统

附上几个最新实例项目

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

Flutter3-MacOS桌面OS系统|flutter3.32+window_manager客户端OS模板

Electron38-Vue3OS客户端OS系统|vite7+electron38+arco桌面os后台管理

Vite7网页版聊天|Vue3.5+Pinia3+ElementPlus仿微信网页端web聊天系统

最新版uniapp+vue3+uv-ui跨三端短视频+直播+聊天【H5+小程序+App端】

uniapp+deepseek流式ai助理|uniapp+vue3对接deepseek三端Ai问答模板

Vite8+DeepSeek网页版AI助手|vue3+arco本地web版ai流式打字问答系统

Electron41+Vite8+DeepSeek-V4桌面端AI助手|electron+vue3流式ai系统

最新版Flutter3.38+Dart3.10仿写抖音APP直播+短视频+聊天应用程序

Tauri2.9+Vue3桌面版OS系统|vite7+tauri2+arcoDesign电脑端os后台模板

Tauri2-Vite7Admin客户端管理后台|tauri2.9+vue3+element-plus后台系统

Tauri2.8+Vue3聊天系统|vite7+tauri2+element-plus客户端仿微信聊天程序

最新版uni-app+vue3+uv-ui跨三端仿微信app聊天应用【h5+小程序+app端】

 

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