flutter3.27接入deepseek-v3跨平台ai流式聊天问答系统

本文涉及的产品
容器镜像服务 ACR,镜像仓库100个 不限时长
应用实时监控服务-可观测链路OpenTelemetry版,每月50GB免费额度
云原生网关 MSE Higress,422元/月
简介: 原创基于flutter3.27整合接入deepseek搭建一款高颜值跨平台流式输出ai对话小助手。支持代码高亮、本地会话存储、支持手机端/桌面端显示。支持markdown代码块高亮、代码块横向滚动、表格边框线、图片100%宽度渲染、图片预览、链接跳转。

经过二十几天爆肝研发,原创新作flutter3+deepseek+dio+getx+markdown搭建流式ai对话系统。


未标题-b.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


未标题-1.png

p3.gif

特性

  1. 支持手机端/桌面端显示
  2. 支持代码块高亮、多轮上下文会话、本地存储对话
  3. 支持代码块横向滚动、代码复制
  4. 支持图片宽度100%渲染、在线图片预览功能
  5. 支持链接跳转
  6. 支持表格显示功能


未标题-d.png

未标题-3.png

项目结构目录

使用最新版跨平台框架Flutter3.27搭建项目模板,接入DeepSeek-V3大模型。


360截图20250523213807374.png

001360截图20250522215745701.png

002360截图20250522220345436.png

002360截图20250522215856401.png

002360截图20250522220014461.png

002360截图20250522220428280.png

003360截图20250522221513693.png

003360截图20250522222305449.png

003360截图20250522223826901.png

004360截图20250522225726466.png

003360截图20250522225233589.png

003360截图20250522224758837.png

007360截图20250522232504342.png

007360截图20250522233245183.png

008360截图20250522233538086.png

008360截图20250522233444039.png

008360截图20250522234252862.png

008360截图20250522234339744.png

配置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

27f665416a19713ca22a40186280af2c_1289798-20250524090516038-1427204845.png

未标题-8.png

布局模板配置

07d571759835d82eb608b6ef958c57f9_1289798-20250524092637499-691060066.png

@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(),
    ),
  );
}

p3-1.gif

flutter3解析Markdown结构


通过flutter和flutter_markdown插件来封装流返回的markdown结构解析。

5b8373aa91d43961f59042511664bcf7_1289798-20250524094230511-841161850.png


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流式对话模板的一些分享,希望对大家有所帮助!


目录
相关文章
|
9天前
|
人工智能 安全 架构师
不只是聊天:从提示词工程看AI助手的优化策略
不只是聊天:从提示词工程看AI助手的优化策略
205 119
|
12天前
|
人工智能 数据处理 API
阿里云、Ververica、Confluent 与 LinkedIn 携手推进流式创新,共筑基于 Apache Flink Agents 的智能体 AI 未来
Apache Flink Agents 是由阿里云、Ververica、Confluent 与 LinkedIn 联合推出的开源子项目,旨在基于 Flink 构建可扩展、事件驱动的生产级 AI 智能体框架,实现数据与智能的实时融合。
149 6
阿里云、Ververica、Confluent 与 LinkedIn 携手推进流式创新,共筑基于 Apache Flink Agents 的智能体 AI 未来
|
22天前
|
人工智能 定位技术 API
智能体(Agent):AI不再只是聊天,而是能替你干活
智能体(Agent):AI不再只是聊天,而是能替你干活
668 99
|
3月前
|
人工智能 自然语言处理 监控
掌握这6大环节,设计懂你所问的AI智能问答系统
三桥君深入解析企业智能化升级核心——AI大脑的构建路径。从RPA流程自动化、AI能力、AI中台到IoT平台,结合行业解决方案,助力企业实现智能运营,提升竞争力
315 5
|
2月前
|
存储 人工智能 自然语言处理
RAG:让AI聊天不再"张口就来"
想让你的AI助手不再一本正经地胡说八道?RAG技术就是那个神奇的'外挂'!通过一个智能客服的真实场景,轻松学会如何让AI既博学又靠谱,告别AI幻觉,拥抱真实世界的知识!
|
9天前
|
人工智能 自然语言处理 供应链
超越聊天:AI代理——下一代人机交互的雏形
超越聊天:AI代理——下一代人机交互的雏形
86 22
|
1月前
|
存储 消息中间件 人工智能
【08】AI辅助编程完整的安卓二次商业实战-修改消息聊天框背景色-触发聊天让程序异常终止bug牵涉更多聊天消息发送优化处理-优雅草卓伊凡
【08】AI辅助编程完整的安卓二次商业实战-修改消息聊天框背景色-触发聊天让程序异常终止bug牵涉更多聊天消息发送优化处理-优雅草卓伊凡
154 10
【08】AI辅助编程完整的安卓二次商业实战-修改消息聊天框背景色-触发聊天让程序异常终止bug牵涉更多聊天消息发送优化处理-优雅草卓伊凡
|
2月前
|
数据采集 人工智能 搜索推荐
完蛋啦,爆火Github项目,用微信聊天记录打造专属AI数字分身,我都不敢相信!!
WeClone 是一个基于微信或 Telegram 聊天记录微调大语言模型的开源项目,可打造专属 AI 数字分身。支持文本、图片等多模态数据,具备语言风格迁移和语音克隆功能,实现“说话像你”的AI角色。项目提供完整训练流程,支持本地部署,保护隐私,适用于个人数字分身、纪念机器人、客服助手等场景。
337 0
|
4月前
|
人工智能 自然语言处理 运维
AI agent跨平台云资源智能管理终端是什么
随着多云架构和混合IT环境的普及,企业面临跨平台资源协同效率低、操作复杂等问题。为此,跨平台云资源智能管理终端应运而生。它通过模块化架构与自动化引擎,将异构云环境中的资源统一管理,并提供对话式交互、批量操作与智能策略编排能力。典型产品如Chaterm,支持自然语言指令输入,实现从任务规划到执行反馈的闭环体验。其应用场景涵盖大规模服务器集群管理、跨云资源调度、复杂环境自动化配置等,显著提升效率与可靠性。实施时需关注兼容性、扩展性及安全性,建议从试点入手逐步推广,优化企业运维流程。
240 5