Flutter3-DeepSeek：重磅新作flutter3+dio对接deepseek流式ai输出效果。

原创自研flutter3.27+getx+dio集成接入deepseek-v3对话大模型，搭建一款跨平台ai流式输出模板。实现流式打字输出效果、支持代码高亮、表格/图片/链接、本地存储会话等功能。

基于uni-app+vue3+deepseek+uv-ui仿DeepSeek流式AI聊天模板

electron35+vue3.5+deepseek+arco实战桌面端AI流式对话

基于Vite6+Deepseek+ArcoDesign+Markdown构建Web网页版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

项目框架结构

使用最新版跨平台框架Flutter3.27搭建项目模板，集成DeepSeek-V3对话大模型。

flutter3-deepseek流式输出ai项目已经更新到我的原创作品集，感谢大家鼓励与支持！
Flutter3+DeepSeek-V3跨平台AI流式输出聊天模板

同样运行到桌面windows端，以750px宽度展示布局。

入口配置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环境变量控制

申请一个deepseek API Key，替换掉.env文件里的key就可以体验流式对话了。

# 项目名称
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+Get路由配置

import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../controller/app.dart';

/* 引入路由页面 */
import '../pages/auth/login.dart';
import '../pages/auth/register.dart';
import '../pages/index/index.dart';
import '../pages/aihub/index.dart';
import '../pages/setting/index.dart';

// 路由地址集合
final Map<String, Widget> routes = {
  '/': Home(),
  '/aihub': Aihub(),
  '/setting': Setting(),
};

final List<GetPage> routeList = routes.entries.map((e) => GetPage(
  name: e.key, // 路由名称
  page: () => e.value, // 路由页面
  transition: Transition.rightToLeftWithFade, // 跳转路由动画
  middlewares: [RouteMiddleware()], // 路由中间件
)).toList();

final List<GetPage> routePages = [
  GetPage(name: '/login', page: () => const Login()),
  GetPage(name: '/register', page: () => const Register()),
  ...routeList,
];

// 路由中间件拦截验证
class RouteMiddleware extends GetMiddleware {
  final appStore = AppStore.to;

  @override
  RouteSettings? redirect(String? route) {
    return appStore.isLogin ? null : const RouteSettings(name: '/login');
  }
}

flutter3封装markdown

使用 flutter_markdown 组件来解析markdown语法结构。使用 flutter_highlight 组件来高亮代码块。

• 支持代码块横向滚动
• 支持代码块、行内代码高亮
• 支持代码块复制功能
• 支持表格渲染功能
• 支持网络图片100%宽度渲染及预览
• 支持网络链接跳转功能

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

OK，综上就是Flutter3接入DeepSeek实战流式对话的一些分享知识，希望对大家有所帮助！

推荐热文

uniapp-vue3-deepseek基于uni-app对接deepseek跨三端流式ai输出模板

基于Vite6+Deepseek+ArcoDesign+Markdown构建网页版AI流式

flutter3.27实战抖音app商城|flutter3+getx仿抖音直播+短视频+聊天

Electron32-Vue3OS桌面管理os模板|vite5+electron32+arco后台

uniapp-vue3-wechat：基于uniapp+vue3仿微信app聊天实例

原创自研electron31+vite5+pinia2仿微信客户端Exe聊天实例

Electron31-ViteAdmin桌面端后台|electron31+element-plus客户端后台

自研tauri2.0-vue3-os桌面端仿macos管理系统

原创uniapp+vue3+pinia2跨三端(H5+App+小程序)酒店预订模板