登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 业界 ›flutter3-deepseek流式AI模板|Flutter3.27+Dio+DeepSeee ...

flutter3-deepseek流式AI模板|Flutter3.27+Dio+DeepSeeek聊天ai助手

谷江雪 2025-6-3 00:18:03
基于Flutter3+DeepSeek-V3+Markdown跨平台流式ai打字输出问答助手。
flutter3-deepseek-chat跨平台ai流式实例，基于Flutter3.27+Dart3+Getx+Dio集成DeepSeek-V3对话模型，从0-1纯撸仿DeepSeek智能ai聊天系统。实现流式输出打字效果、代码高亮、本地存储会话等功能。
1.png

技术栈


  • 开发工具：VScode
  • 技术框架：flutter3.27.1+dart3.6.0
  • AI对话模型：deepseek-v3
  • 网络请求：dio^5.8.0+1
  • 路由/状态管理：get^4.7.2
  • 本地存储：get_storage^2.1.1
  • markdown解析：flutter_markdown^0.7.7
  • 高亮插件：flutter_highlight^0.7.0
  • 弹框组件：shirne_dialog^4.8.3
  • 图片预览：easy_image_viewer^1.5.1
  • 环境变量插件：flutter_dotenv^5.2.1
2.png

3.gif

4.gif

项目特征


  • Flutter3+DeepSeek流式输出打字效果
  • 基于Flutter3.27搭建项目，接入DeepSeek-V3，对话更丝滑
  • 支持手机端/桌面端显示
  • 支持代码块高亮、多轮上下文会话、本地存储对话
  • 支持代码块横向滚动、代码复制
  • 支持图片宽度100%渲染、在线图片预览功能
  • 支持链接跳转、表格显示功能
5.gif

项目框架目录结构

flutter3-deepseek基于 Flutter3.27 搭建项目框架，整合 DeepSeek-V3 API对话大模型。

Flutter3-DeepSeek跨平台ai对话已经同步到我的作品铺，感谢鼓励与支持！

Flutter3+DeepSeek-V3跨平台AI流式输出聊天模板
flutter环境变量.env

注册 DeepSeek 账号并创建 API Key，建议将密钥存储在环境变量中（如 .env）
7.png
  1. # 项目名称
  2. APP_NAME = 'Flutter3-DeepSeek'
  4. # DeepSeek API配置
  5. DEEPSEEK_API_KEY = your apikey
  6. DEEPSEEK_BASE_URL = https://api.deepseek.com
复制代码
配置入口main.dart
  1. import 'dart:io';
  2. import 'package:flutter/material.dart';
  3. import 'package:get/get.dart';
  4. import 'package:get_storage/get_storage.dart';
  5. import 'package:shirne_dialog/shirne_dialog.dart';
  6. import 'package:flutter_dotenv/flutter_dotenv.dart';
  8. import 'controller/app.dart';
  9. import 'controller/chat.dart';
  11. // 引入路由配置
  12. import 'router/index.dart';
  14. void main() async {
  15.   // 初始化存储服务
  16.   await GetStorage.init();
  18.   // 将.env文件内容加载到dotenv中
  19.   await dotenv.load(fileName: '.env');
  21.   // 注册GetxController
  22.   Get.put(AppStore());
  23.   Get.put(ChatStore());
  25.   runApp(const MyApp());
  26. }
  28. class MyApp extends StatelessWidget {
  29.   const MyApp({super.key});
  31.   @override
  32.   Widget build(BuildContext context) {
  33.     // 获取AppStore实例
  34.     final appStore = AppStore.to;
  35.    
  36.     return GetMaterialApp(
  37.       title: 'Flutter3 DeepSeek',
  38.       debugShowCheckedModeBanner: false,
  39.       theme: ThemeData(
  40.         colorScheme: ColorScheme.fromSeed(seedColor: Color(0xFF4F6BFE)),
  41.         useMaterial3: true,
  42.         fontFamily: Platform.isWindows ? 'Microsoft YaHei' : null,
  43.       ),
  44.       // 初始路由
  45.       initialRoute: appStore.isLogin ? '/' : '/login',
  46.       // 路由页面
  47.       getPages: routePages,
  48.       navigatorKey: MyDialog.navigatorKey,
  49.       localizationsDelegates: [
  50.         ShirneDialogLocalizations.delegate,
  51.       ],
  52.     );
  53.   }
  54. }
复制代码
8.png

支持编译运行到桌面windows端，以750px宽度展示布局。
9.png

10.png

11.png

12.png

13.png

项目布局结构

14.png

项目整体分为顶部导航栏+对话主区域+底部编辑框三大模块。
  1. @override
  2. Widget build(BuildContext context) {
  3.   return Scaffold(
  4.     key: scaffoldKey,
  5.     backgroundColor: Colors.white,
  6.     appBar: AppBar(
  7.       ...
  8.       actions: [
  9.         IconButton(icon: Icon(Icons.try_sms_star_outlined), onPressed: () => handleCreate(),),
  10.       ],
  11.     ),
  12.     body: Center(
  13.       child: ConstrainedBox(
  14.         constraints: BoxConstraints(
  15.           maxWidth: 750.0,
  16.         ),
  17.         child: Flex(
  18.           direction: Axis.vertical,
  19.           crossAxisAlignment: CrossAxisAlignment.start,
  20.           children: [
  21.             Expanded(
  22.               child: Stack(
  23.                 children: [
  24.                   GestureDetector(
  25.                     child: ScrollConfiguration(
  26.                       behavior: CustomScrollBehavior().copyWith(scrollbars: false),
  27.                       // GetBuilder响应流式输出
  28.                       child: Obx(() {
  29.                         if (chatStore.currentMessages.isEmpty) {
  30.                           // 欢迎信息
  31.                           return Welcome(
  32.                             onChanged: (value) {
  33.                               textEditingController.text = value;
  34.                             },
  35.                           );
  36.                         }
  37.                         return ListView.builder(
  38.                           keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag, // 当滚动时候隐藏键盘
  39.                           controller: scrollController,
  40.                           padding: EdgeInsets.all(10.0),
  41.                           reverse: true,
  42.                           shrinkWrap: true,
  43.                           itemCount: chatStore.currentMessages.length,
  44.                           itemBuilder: (context, index) {
  45.                             ...
  46.                           }
  47.                         );
  48.                       }),
  49.                     ),
  50.                     onTap: () {
  51.                       focusNode.unfocus();
  52.                     },
  53.                   ),
  54.                   // 滚动到底部
  55.                   AnimatedPositioned(
  56.                     ...
  57.                   ),
  58.                 ],
  59.               ),
  60.             ),
  61.             // 底部编辑器区域
  62.             ChatEditor(controller: textEditingController),
  63.           ]
  64.         ),
  65.       ),
  66.     ),
  67.     // 侧边栏
  68.     drawer: Drawer(
  69.       child: Sidebar(),
  70.     ),
  71.   );
  72. }
复制代码
15.gif

flutter3+getx路由管理
  1. import 'package:flutter/material.dart';
  2. import 'package:get/get.dart';
  4. import '../controller/app.dart';
  6. /* 引入路由页面 */
  7. import '../pages/auth/login.dart';
  8. import '../pages/auth/register.dart';
  9. import '../pages/index/index.dart';
  10. import '../pages/aihub/index.dart';
  11. import '../pages/setting/index.dart';
  13. // 路由地址集合
  14. final Map<String, Widget> routes = {
  15.   '/': Home(),
  16.   '/aihub': Aihub(),
  17.   '/setting': Setting(),
  18. };
  20. final List<GetPage> routeList = routes.entries.map((e) => GetPage(
  21.   name: e.key, // 路由名称
  22.   page: () => e.value, // 路由页面
  23.   transition: Transition.rightToLeftWithFade, // 跳转路由动画
  24.   middlewares: [RouteMiddleware()], // 路由中间件
  25. )).toList();
  27. final List<GetPage> routePages = [
  28.   GetPage(name: '/login', page: () => const Login()),
  29.   GetPage(name: '/register', page: () => const Register()),
  30.   ...routeList,
  31. ];
  33. // 路由中间件拦截验证
  34. class RouteMiddleware extends GetMiddleware {
  35.   final appStore = AppStore.to;
  37.   @override
  38.   RouteSettings? redirect(String? route) {
  39.     return appStore.isLogin ? null : const RouteSettings(name: '/login');
  40.   }
  41. }
复制代码
16.png

17.png

18.png

19.png

20.png

21.png

22.png

23.png

24.png

25.png

26.png

27.png

28.png

29.png

30.png

31.png

32.png

33.png

flutter3解析流式markdown结构

项目中flutter3接入deepseek api流式输出返回，使用 flutter_markdown 组件来解析markdown语法结构。使用 flutter_highlight 组件来高亮代码块。
34.png

特性

  • 支持代码块横向滚动
  • 支持代码块、行内代码高亮
  • 支持代码块复制功能
  • 支持表格渲染功能
  • 支持网络图片100%宽度渲染及预览
  • 支持网络链接跳转功能
  1. import 'package:flutter/material.dart';
  2. import 'package:flutter/services.dart';
  3. import 'package:get/get.dart';
  4. import 'package:flutter_markdown/flutter_markdown.dart';
  5. import 'package:flutter_highlight/flutter_highlight.dart';
  6. import 'package:flutter_highlight/themes/github.dart';
  7. import 'package:url_launcher/url_launcher.dart';
  8. import 'package:easy_image_viewer/easy_image_viewer.dart';
  9. import 'package:markdown/markdown.dart' as md;
  11. class FMarkdown extends StatefulWidget {
  12.   const FMarkdown({
  13.     super.key,
  14.     required this.data,
  15.   });
  17.   final String data;
  19.   @override
  20.   State<FMarkdown> createState() => _FMarkdownState();
  21. }
  23. class _FMarkdownState extends State<FMarkdown> {
  24.   @override
  25.   Widget build(BuildContext context) {
  26.     return MarkdownBody(
  27.       data: widget.data,
  28.       fitContent: false,
  29.       styleSheet: MarkdownStyleSheet(
  30.         blockSpacing: 12.0,
  31.         // 表格
  32.         tableBorder: TableBorder.all(color: Colors.black12),
  33.         // 水平线
  34.         horizontalRuleDecoration: BoxDecoration(
  35.           border: Border(top: BorderSide(color: Colors.black12, width: 1.0)),
  36.         ),
  37.         // 代码块
  38.         codeblockDecoration: BoxDecoration(
  39.           color: Color(0xfff8f8f8),
  40.           borderRadius: BorderRadius.circular(10.0),
  41.         ),
  42.         // 引用
  43.         blockquotePadding: EdgeInsets.only(left: 16.0, top: 8.0, bottom: 8.0),
  44.         blockquoteDecoration: BoxDecoration(
  45.           border: Border(left: BorderSide(color: Colors.black12, width: 4.0)),
  46.         )
  47.       ),
  48.       builders: {
  49.         // 自定义代码/代码块构建
  50.         'code': CustomCodeBuilder(),
  51.       },
  52.       // 自定义图片构建
  53.       sizedImageBuilder: (config) => ImageBuilderWidget(config: config),
  54.       // 点击链接
  55.       onTapLink: (text, href, title) async {
  56.         if (href != null) {
  57.           if(await canLaunchUrl(Uri.parse(href))) {
  58.             await launchUrl(Uri.parse(href));
  59.           }else {
  60.             debugPrint('无法访问 $href');
  61.           }
  62.         }
  63.       },
  64.     );
  65.   }
  66. }
复制代码
35.png

flutter3+dio调用deepseek实现流式sse输出
  1. final response = await dio.post(
  2.   '$baseURL/v1/chat/completions',
  3.   options: Options(
  4.     // 响应超时
  5.     receiveTimeout: const Duration(seconds: 60),
  6.     headers: {
  7.       "Content-Type": "application/json",
  8.       "Authorization": "Bearer $apiKEY",
  9.     },
  10.     // 设置响应类型为流式响应
  11.     responseType: ResponseType.stream,
  12.   ),
  13.   data: {
  14.     // 多轮会话
  15.     'messages': widget.multiConversation ? chatStore.historySession : [{'role': 'user', 'content': editorValue}],
  16.     'model': 'deepseek-chat', // deepseek-chat对话模型 deepseek-reasoner推理模型
  17.     'stream': true, // 流式输出
  18.     'max_tokens': 8192, // 限制一次请求中模型生成 completion 的最大 token 数(默认使用 4096)
  19.     'temperature': 0.4, // 严谨采样 越低越严谨(默认1)
  20.   }
  21. );
复制代码
36.png

综上就是Flutter3+DeepSeek实战跨平台流式AI对话项目的一些分享知识，感谢大家的阅读与支持~
Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板

Electron35-DeepSeek桌面端AI系统|vue3.5+electron+arco客户端ai模板

vue3-webseek网页版AI问答|Vite6+DeepSeek+Arco流式ai聊天打字效果

附上几个最新项目实例
Vue3-DeepSeek-Chat流式AI对话|vite6+vant4+deepseek智能ai聊天助手
flutter3-dymall仿抖音直播商城|Flutter3.27短视频+直播+聊天App实例
Tauri2.0+Vite5聊天室|vue3+tauri2+element-plus仿微信|tauri聊天应用
Electron32-ViteOS桌面版os系统|vue3+electron+arco客户端OS管理模板
Electron31-Vue3Admin管理系统|vite5+electron+pinia桌面端后台Exe
uniapp+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天语音/朋友圈
uniapp+vue3酒店预订|vite5+uniapp预约订房系统模板(h5+小程序+App端)
37.gif

 

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

使用道具 举报
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
谷江雪
2025-6-3 00:18:03

0

粉丝关注

14

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫