经过二十几天爆肝研发，原创新作flutter3+deepseek+dio+getx+markdown搭建流式ai对话系统。
技术栈
- 编辑器：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
特性
- 支持手机端/桌面端显示
- 支持代码块高亮、多轮上下文会话、本地存储对话
- 支持代码块横向滚动、代码复制
- 支持图片宽度100%渲染、在线图片预览功能
- 支持链接跳转
- 支持表格显示功能
项目结构目录
使用最新版跨平台框架Flutter3.27搭建项目模板，接入DeepSeek-V3大模型。
配置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 'controller/app.dart'; import 'controller/chat.dart'; // 引入路由配置 import 'router/index.dart'; void main() async { // 初始化存储服务 await GetStorage.init(); // 将.env文件内容加载到dotenv中 await dotenv.load(fileName: '.env'); // 注册GetxController Get.put(AppStore()); Get.put(ChatStore()); runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { // 获取AppStore实例 final appStore = AppStore.to; return GetMaterialApp( title: 'Flutter3 DeepSeek', 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: [ ShirneDialogLocalizations.delegate, ], ); } }
flutter3设置环境变量.env
布局模板配置
@override Widget build(BuildContext context) { return Scaffold( key: scaffoldKey, backgroundColor: Colors.white, appBar: AppBar( actions: [ IconButton(icon: Icon(Icons.try_sms_star_outlined), onPressed: () => handleCreate(),), ], ), body: Center( child: ConstrainedBox( constraints: BoxConstraints( maxWidth: 750.0, ), child: Flex( direction: Axis.vertical, children: [ Expanded( child: Stack( children: [ GestureDetector( child: ScrollConfiguration( behavior: CustomScrollBehavior().copyWith(scrollbars: false), // GetBuilder响应流式输出 child: Obx(() { if (chatStore.currentMessages.isEmpty) { // 欢迎信息 return Welcome( onChanged: (value) { textEditingController.text = value; }, ); } return ListView.builder( keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag, // 当滚动时候隐藏键盘 controller: scrollController, padding: EdgeInsets.all(10.0), reverse: true, shrinkWrap: true, itemCount: chatStore.currentMessages.length, itemBuilder: (context, index) { } ); }), ), onTap: () { focusNode.unfocus(); }, ), // 滚动到底部 AnimatedPositioned( ), ], ), ), // 底部编辑器区域 ChatEditor(controller: textEditingController), ] ), ), ), // 侧边栏 drawer: Drawer( child: Sidebar(), ), ); }
flutter3解析Markdown结构
通过flutter和flutter_markdown插件来封装流返回的markdown结构解析。
import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:get/get.dart'; import 'package:flutter_markdown/flutter_markdown.dart'; import 'package:flutter_highlight/flutter_highlight.dart'; import 'package:flutter_highlight/themes/github.dart'; import 'package:url_launcher/url_launcher.dart'; import 'package:easy_image_viewer/easy_image_viewer.dart'; import 'package:markdown/markdown.dart' as md; class FMarkdown extends StatefulWidget { const FMarkdown({ super.key, required this.data, }); final String data; @override State<FMarkdown> createState() => _FMarkdownState(); } class _FMarkdownState extends State<FMarkdown> { @override Widget build(BuildContext context) { return MarkdownBody( data: widget.data, fitContent: false, styleSheet: MarkdownStyleSheet( blockSpacing: 12.0, // 表格 tableBorder: TableBorder.all(color: Colors.black12), // 水平线 horizontalRuleDecoration: BoxDecoration( border: Border(top: BorderSide(color: Colors.black12, width: 1.0)), ), // 代码块 codeblockDecoration: BoxDecoration( color: Color(0xfff8f8f8), borderRadius: BorderRadius.circular(10.0), ), // 引用 blockquotePadding: EdgeInsets.only(left: 16.0, top: 8.0, bottom: 8.0), blockquoteDecoration: BoxDecoration( border: Border(left: BorderSide(color: Colors.black12, width: 4.0)), ) ), builders: { // 自定义代码/代码块构建 'code': CustomCodeBuilder(), }, // 自定义图片构建 sizedImageBuilder: (config) => ImageBuilderWidget(config: config), // 点击链接 onTapLink: (text, href, title) async { if (href != null) { if(await canLaunchUrl(Uri.parse(href))) { await launchUrl(Uri.parse(href)); }else { debugPrint('无法访问 $href'); } } }, ); } }
综上就是flutter3集成deepseek api搭建跨平台ai流式对话模板的一些分享，希望对大家有所帮助！
