最新版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
功能特征
- 支持侧边栏收缩/展开
- 支持上下文多轮对话、代码高亮、本地存储会话
- 支持代码块横向滚动、复制代码功能
- 支持图片100%宽度渲染、在线图片预览
- 支持网络链接跳转、表格功能
- 采用自定义无边框窗口、托盘图标
项目框架结构
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
只需要去申请一个deepseek apikey,替换掉.env文件里的key即可体验deepseek流式对话功能。
# 项目名称
APP_NAME = 'Flutter3-WinSeek'
# DeepSeek API配置
DEEPSEEK_API_KEY = apikey
DEEPSEEK_BASE_URL = https://api.deepseek.com
项目公共布局
布局文件在layouts目录下。
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聊天语音/朋友圈
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。