最新研發(fā)flutter3.27+bitsdojo_window+getx客戶端仿微信聊天Exe應用

2025跨平臺Flutter3+Dart3+Getx仿微信電腦端Exe聊天系統(tǒng)Flutter3-WinChat。

flutter3_winchat：基于最新跨平臺框架flutter3.27+dart3.6+getx+bitsdojo_window+media_kit+system_tray搭建桌面客戶端仿微信聊天exe實例。整合了聊天功能、聯(lián)系人、收藏、朋友圈、小視頻、我的等模塊。

技術棧

開發(fā)工具：Vscode
技術框架：Flutter3.27.1+Dart3.6.0
窗口管理：bitsdojo_window: ^0.1.6
托盤圖標：system_tray: ^2.0.3
路由/狀態(tài)管理：get: ^4.7.2
本地存儲：get_storage: ^2.1.1
圖片預覽：photo_view: ^0.15.0
網(wǎng)址預覽：url_launcher: ^6.3.1
視頻組件：media_kit: ^1.2.0
文件選擇器：file_picker: ^10.2.0
富文本編輯器：fleather: ^1.22.0

項目框架結構

flutter3-winchat電腦端聊天項目已經(jīng)更新到我的原創(chuàng)作品集。

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,
    );
  }
}

// 創(chuàng)建系統(tǒng)托盤圖標
Future<void> initSystemTray() async {
  String trayIco = 'assets/images/tray.ico';
  SystemTray systemTray = SystemTray();

  // 初始化系統(tǒng)托盤
  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 插件進行窗口管理。支持無邊框窗口，窗口尺寸大小，自定義系統(tǒng)操作按鈕(最大化/最小化/關閉)。

https://pub-web.flutter-io.cn/packages/bitsdojo_window

使用 system_tray 插件管理系統(tǒng)托盤圖標。

https://pub-web.flutter-io.cn/packages/system_tray

flutter3公共布局

項目整體布局分為菜單欄+側邊欄+右側主區(qū)域三個模塊。

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; // 右側內容區(qū)域
  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(
                        // ...
                      ),
                    ],
                  ),
                ),
                // 內容區(qū)域
                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,
      ),
    ],
  );
}

// 監(jiān)聽窗口尺寸變化
@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('退出系統(tǒng)', style: TextStyle(color: Colors.red),)
          ),
        ],
      );
    }
  );
}

flutter3小視頻模塊

使用media_kit視頻套件實現(xiàn)類似抖音短視頻，支持點擊暫停/播放、上下滑動切換功能。

底部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;
            });
            // 繼續(xù)播放
            if(!player.state.playing) {
              await player.play();
            }
          },
        ),
      ),
      onPointerMove: (e) {
        setState(() {
          sliderDraging = true;
        });
      },
    ),
  ),
)

flutter3聊天模板

聊天編輯框支持多行文本、超過高度出現(xiàn)滾動條、光標位置插入emo表情，支持鏈接。

優(yōu)化了類似微信按住說話、左滑取消、右滑轉文字功能。

綜上就是flutter3實戰(zhàn)仿微信客戶端聊天系統(tǒng)的一些知識分享，希望對大家有所幫助！??

Electron38-Wechat電腦端聊天|vite7+electron38仿微信桌面端聊天系統(tǒng)

附上幾個最新實例項目

Electron38-Vue3OS客戶端OS系統(tǒng)|vite7+electron38+arco桌面os后臺管理

Vite7網(wǎng)頁版聊天|Vue3.5+Pinia3+ElementPlus仿微信網(wǎng)頁端web聊天系統(tǒng)

Flutter3-MacOS桌面OS系統(tǒng)|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網(wǎng)頁版AI問答|Vite6+DeepSeek+Arco流式ai聊天打字效果

Electron35-DeepSeek桌面端AI系統(tǒng)|vue3.5+electron+arco客戶端ai模板

flutter3-dymall仿抖音直播商城|Flutter3.27短視頻+直播+聊天App實例

tauri2.0-admin桌面端后臺系統(tǒng)|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 閱讀(322) 評論(1) 收藏舉報

刷新頁面返回頂部

web前端項目案例實戰(zhàn)

交流分享前端(移動端|微信端|小程序)最新技術、知識、項目案例...