头图

最新版Flutter3跨平台ai实战:基于flutter3.32+dart3.8+dio+window_manager集成deepseek-v3 api实战客户端ai流式输出对话模板。支持代码高亮、图片/链接/表格、对话本地存储等功能。

flutter3-deepseek流式AI模板|Flutter3.27+Dio+DeepSeeek聊天ai助手
Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板
vue3-webseek网页版AI问答|Vite6+DeepSeek+Arco流式ai聊天打字效果

https://www.bilibili.com/video/BV1xATPzpEbg/?aid=114633381843...

技术栈

  • 技术框架:flutter3.32.0+dart3.8.0
  • ai大模型:deepseek-v3
  • 流请求:dio^5.8.0+1
  • 窗口管理:window_manager^0.5.0
  • 托盘管理:system_tray^2.0.3
  • 路由/状态管理:get^4.7.2
  • 存储服务:get_storage^2.1.1
  • markdown解析:flutter_markdown^0.7.7
  • 高亮组件:flutter_highlight^0.7.0
  • 环境变量配置:flutter_dotenv^5.2.1

功能特征

  1. 支持侧边栏收缩/展开
  2. 支持上下文多轮对话、代码高亮、本地存储会话
  3. 支持代码块横向滚动、复制代码功能
  4. 支持图片100%宽度渲染、在线图片预览
  5. 支持网络链接跳转、表格功能
  6. 采用自定义无边框窗口、托盘图标

项目框架结构

flutter3_winseek电脑端ai流式对话项目已经同步到我的原创作品集。
flutter3.32+deepseek+dio客户端ai流式对话Exe

项目入口main.dart

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:get_storage/get_storage.dart';
import 'package:shirne_dialog/shirne_dialog.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:system_tray/system_tray.dart';
import 'package:window_manager/window_manager.dart';
import 'controller/app.dart';
import 'controller/chat.dart';
// 引入路由配置
import 'router/index.dart';

void main() async {
  await GetStorage.init();
  await dotenv.load(fileName: '.env');

  Get.put(AppStore());
  Get.put(ChatStore());

  // 初始化window_manager窗口
  WidgetsFlutterBinding.ensureInitialized();
  await windowManager.ensureInitialized();
  WindowOptions windowOptions = WindowOptions(
    size: Size(850, 620),
    center: true,
    backgroundColor: Colors.transparent,
    skipTaskbar: false,
    titleBarStyle: TitleBarStyle.hidden
  );
  windowManager.waitUntilReadyToShow(windowOptions, () async {
    windowManager.setAsFrameless();
    windowManager.setHasShadow(true);
    await windowManager.show();
    await windowManager.focus();
  });
  initSystemTray();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    final appStore = AppStore.to;

    return GetMaterialApp(
      title: 'FLUTTER3 WINSEEK',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Color(0xFF4F6BFE)),
        useMaterial3: true,
        fontFamily: Platform.isWindows ? 'Microsoft YaHei' : null,
      ),
      // 初始路由
      initialRoute: appStore.isLogin ? '/' : '/login',
      // 路由页面
      getPages: routePages,
      navigatorKey: MyDialog.navigatorKey,
      localizationsDelegates: [
        // Add your ShirneDialogLocalizations delegate here
        ShirneDialogLocalizations.delegate,
      ],
    );
  }
}

// 创建系统托盘图标
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: '打开主界面', image: 'assets/images/tray.ico', onClicked: (menuItem) async => await windowManager.show()),
    MenuItemLabel(label: '隐藏窗口', image: 'assets/images/tray.ico', onClicked: (menuItem) async => await windowManager.hide()),
    MenuItemLabel(label: '设置中心', image: 'assets/images/tray.ico', onClicked: (menuItem) => Get.toNamed('/setting')),
    MenuItemLabel(label: '锁屏', image: 'assets/images/tray.ico', onClicked: (menuItem) => {}),
    MenuItemLabel(label: '关闭程序并退出', image: 'assets/images/tray.ico', onClicked: (menuItem) async => await windowManager.destroy()),
  ]);
  await systemTray.setContextMenu(menu);

  // 右键事件
  systemTray.registerSystemTrayEventHandler((eventName) async {
    debugPrint('eventName: $eventName');
    if (eventName == kSystemTrayEventClick) {
      Platform.isWindows ? await windowManager.show() : systemTray.popUpContextMenu();
    } else if (eventName == kSystemTrayEventRightClick) {
      Platform.isWindows ? systemTray.popUpContextMenu() : await windowManager.show();
    }
  });
}

flutter3环境变量.env

b310d02077a18988971629e8445cfe66_1289798-20250605104151148-834204953.png

只需要去申请一个deepseek apikey,替换掉.env文件里的key即可体验deepseek流式对话功能。

# 项目名称
APP_NAME = 'Flutter3-WinSeek'

# DeepSeek API配置
DEEPSEEK_API_KEY = apikey
DEEPSEEK_BASE_URL = https://api.deepseek.com

项目公共布局

feb8691fabedab56acb5a30a5e9dd463_1289798-20250605105858927-1189439389.png

布局文件在layouts目录下。
5a70110313c5933c6066243181b30e59_1289798-20250605104750285-68659816.png

return Scaffold(
  backgroundColor: Colors.grey[50],
  body: DragToResizeArea(
    child: Row(
      children: [
        // 侧边栏
        AnimatedSize(
          duration: const Duration(milliseconds: 300),
          curve: Curves.easeInOut,
          child: Container(
            width: collapsed ? 0 : 260,
            decoration: BoxDecoration(
              border: Border(right: BorderSide(color: Colors.grey.withAlpha(50)))
            ),
            child: Material(
              color: Color(0xFFF3F3F3),
              child: Sidebar(),
            ),
          ),
        ),
        // 主体容器
        Expanded(
          child: Column(
            children: [
              // 自定义导航栏
              SizedBox(
                height: 30.0,
                child: Row(
                  children: [
                    IconButton(
                      onPressed: () {
                        setState(() {
                          collapsed = !collapsed;
                        });
                      },
                      icon: Icon(collapsed ? Icons.format_indent_increase : Icons.format_indent_decrease, size: 16.0,),
                      tooltip: collapsed ? '展开' : '收缩',
                    ),
                    Expanded(
                      child: DragToMoveArea(
                        child: SizedBox(
                          height: double.infinity,
                        ),
                      ),
                    ),
                    // 右上角操作按钮
                    WinBtns(
                      leading: Row(
                        children: [
                          ...
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              // 右侧主面板
              Expanded(
                child: Container(
                  child: widget.child,
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  ),
);

flutter+dio对接deepseek

在flutter中通过dio请求deepseek api实现流式输出效果。

final response = await dio.post(
  '$baseURL/v1/chat/completions',
  options: Options(
    // 响应超时
    receiveTimeout: const Duration(seconds: 60),
    headers: {
      "Content-Type": "application/json",
      "Authorization": "Bearer $apiKEY",
    },
    // 设置响应类型为流式响应
    responseType: ResponseType.stream,
  ),
  data: {
    // 多轮会话
    'messages': widget.multiConversation ? chatStore.historySession : [{'role': 'user', 'content': editorValue}],
    'model': 'deepseek-chat', // deepseek-chat对话模型 deepseek-reasoner推理模型
    'stream': true, // 流式输出
    'max_tokens': 8192, // 限制一次请求中模型生成 completion 的最大 token 数(默认使用 4096)
    'temperature': 0.4, // 严谨采样 越低越严谨(默认1)
  }
);

Ok,综上就是flutter3对接deepseek实战桌面端ai对话的一些分享,感谢阅读与支持!

热文推荐

uni-app+deepseek+vue3跨多端【小程序+H5+App端】流式输出AI
vue3.5接入deepseek-chat网页版ai流式聊天会话系统
基于vue3.5+deepseek-chat流式打字ai聊天会话助手
vite6+tauri2.0客户端仿MacOS桌面|tauri2+rust+vue3桌面os
tauri2.0-admin桌面端后台系统|Tauri2+Vite5+ElementPlus管理后台EXE程序
Vite5+Electron聊天室|electron31跨平台仿微信EXE客户端|vue3聊天程序
uniapp+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天语音/朋友圈


xiaoyan2017
779 声望332 粉丝

web前端开发爱好者,专注于前端h5、jquery、vue、react、angular等技术研发实战项目案例。