基于Flutter3.27+DeepSeek+Dio+Markdown跨平台流式输出AI模板

xiaoyan2015 的个人博客 / 20 / 0 / 创建于 1天前

2025跨平台ai实战：flutter3+dio+getx整合对接deepseek-v3搭建跨端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

特性

Flutter3+DeepSeek流式输出打字效果
支持手机端/桌面端显示
支持代码块高亮、多轮上下文会话、本地存储对话
支持代码块横向滚动、代码复制
支持图片宽度100%渲染、在线图片预览功能
支持链接跳转
支持表格显示功能

项目结构目录

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

flutter3-deepseek-chat跨平台ai项目已经更新到我的原创作品集。
Flutter3+DeepSeek-V3跨平台AI流式输出聊天模板

flutter3入口配置

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

在项目根目录下新建一个.env配置文件。

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

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

项目布局模板

@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,
          crossAxisAlignment: CrossAxisAlignment.start,
          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+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)
  }
);

往期热文

flutter3-deepseek flutter3仿deepseek flutter3跨平台ai flutter3+dio流式 flutter3流式输出ai

本作品采用《CC 协议》，转载必须注明作者和本文链接

本文为原创文章，未经作者允许不得转载，欢迎大家一起交流 QQ（282310962） wx（xy190310）

xiaoyan2015

385 声望

暂无个人描述~

0 人点赞

讨论数量: 0

(=￣ω￣=)··· 暂无内容！

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助

基于Flutter3.27+DeepSeek+Dio+Markdown跨平台流式输出AI模板

使用技术

特性

项目结构目录

flutter3-deepseek-chat跨平台ai项目已经更新到我的原创作品集。

flutter3入口配置

flutter3环境变量.env

项目布局模板

flutter3+dio对接deepseek api流式

往期热文

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

基于Flutter3.27+DeepSeek+Dio+Markdown跨平台流式输出AI模板

使用技术

特性

项目结构目录

flutter3-deepseek-chat跨平台ai项目已经更新到我的原创作品集。

flutter3入口配置

flutter3环境变量.env

项目布局模板

flutter3+dio对接deepseek api流式

往期热文

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录