#精品长文创作季#

在结束了长达半个多月的爆肝开发，我的新项目flutter3-winchat终于完结了。

目前已经完成的功能有聊天部分、通讯录、收藏、朋友圈、小视频及我的几个大页面模块。

项目整体分为左侧功能按钮区、侧边栏、右侧内容区三大模块。

使用技术

• bitsdojo_window: ^0.1.6 窗口管理器
• system_tray: ^2.0.3 托盘图标
• get: ^4.6.6 路由+状态管理
• photo_view: ^0.14.0
• url_launcher: ^6.2.4
• get_storage: ^2.1.1
• media_kit: ^1.1.10+1 短视频插件
• media_kit_video: ^1.2.4
• media_kit_libs_video: ^1.0.4
• file_picker: ^6.1.1

在开发的过程中，的确 遇到了不少问题，不过最后都解决了。

通过这个项目的开发，旨在探索flutter3在桌面端开发的更多可能性，让更多的flutter开发爱好者参与其中，推动flutter跨端开发。

项目结构

预览图

主入口main.dart

/// flutter主窗口

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/index.dart';

// 引入公共样式
import 'styles/index.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(
        primaryColor: FStyle.primaryColor,
        useMaterial3: true,
        // 修正windows端字体粗细不一致
        fontFamily: Platform.isWindows ? 'Microsoft YaHei' : null,
      ),
      home: const Layout(),
      // 初始路由
      initialRoute: Utils.isLogin() ? '/index' :'/login',
      // 路由页面
      getPages: routes,
      onInit: () {},
      onReady: () {},
    );
  }
}

// 创建系统托盘图标
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: 'show', onClicked: (menuItem) => appWindow.show()),
    MenuItemLabel(label: 'hide', onClicked: (menuItem) => appWindow.hide()),
    MenuItemLabel(label: 'close', 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();
    }
  });
}

聊天页面采用全新的UI设计，表情弹窗/选择弹窗采用定位方式。

语音支持按住说话/左滑撤销/右滑转文字全屏功能。

OK，今天的分享就到这里吧，感谢大家的阅读与支持。