首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >最新原创flutter3.27+bitsdojo_window客户端聊天Exe

最新原创flutter3.27+bitsdojo_window客户端聊天Exe

原创
作者头像
andy2018
发布2025-07-22 07:58:03
发布2025-07-22 07:58:03
2710
举报
文章被收录于专栏:h5h5

2025最新研发Flutter3.27+Dart3.6+Getx搭建仿微信桌面端聊天exe实例。

flutter3-winchat聊天项目包含了聊天功能、联系人、收藏、朋友圈、小视频、我的等模块。

使用技术

  • 技术框架: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

项目结构框架

入口配置main.dart

代码语言:actionscript
复制
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();
    }
  });
}

项目布局结构

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

代码语言:actionscript
复制
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,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

实现类似抖音短视频,支持点击暂停/播放、上下滑动切换功能。

代码语言:actionscript
复制
// 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聊天模块

自研新版Flutter3.32仿微信app聊天|朋友圈模板

基于uni-app+vue3实战短视频+聊天+直播app商城

基于uniapp+deepseek+vue3跨平台ai流式对话

electron35+deepseek桌面端ai模板

vue3.5+deepseek网页版ai流式对话

flutter3.27+getx仿抖音app短视频商城

Electron32桌面端os系统

electron31+vue3客户端聊天Exe实例

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 使用技术
  • 项目结构框架
  • 入口配置main.dart
  • 项目布局结构
  • flutter3聊天模块
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档