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

基于Flutter3+DeepSeek-V3+Markdown跨平臺流式ai打字輸出問答助手。

flutter3-deepseek-chat跨平臺ai流式實例，基于Flutter3.27+Dart3+Getx+Dio集成DeepSeek-V3對話模型，從0-1純擼仿DeepSeek智能ai聊天系統。實現流式輸出打字效果、代碼高亮、本地存儲會話等功能。

flutter3-winseek客戶端AI實例|Flutter3.32+DeepSeek流式ai對話模板Exe

Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板

Tauri2.0-DeepSeek電腦端Ai對話|tauri2+vite6+deepseek流式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
圖片預覽：easy_image_viewer^1.5.1
環境變量插件：flutter_dotenv^5.2.1

項目特征

Flutter3+DeepSeek流式輸出打字效果
基于Flutter3.27搭建項目，接入DeepSeek-V3，對話更絲滑
支持手機端/桌面端顯示
支持代碼塊高亮、多輪上下文會話、本地存儲對話
支持代碼塊橫向滾動、代碼復制
支持圖片寬度100%渲染、在線圖片預覽功能
支持鏈接跳轉、表格顯示功能

項目框架目錄結構

flutter3-deepseek基于 Flutter3.27 搭建項目框架，整合 DeepSeek-V3 API對話大模型。

Flutter3-DeepSeek跨平臺ai對話已經同步到我的作品鋪，感謝鼓勵與支持！

Flutter3+DeepSeek-V3跨平臺AI流式輸出聊天模板

flutter環境變量.env

注冊 DeepSeek 賬號并創建 API Key，建議將密鑰存儲在環境變量中（如 .env）

# 項目名稱
APP_NAME = 'Flutter3-DeepSeek'

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

配置入口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,
      ],
    );
  }
}

支持編譯運行到桌面windows端，以750px寬度展示布局。

項目布局結構

項目整體分為頂部導航欄+對話主區域+底部編輯框三大模塊。

@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+getx路由管理

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結構

項目中flutter3接入deepseek api流式輸出返回，使用 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');
          }
        }
      },
    );
  }
}

flutter3+dio調用deepseek實現流式sse輸出

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實戰跨平臺流式AI對話項目的一些分享知識，感謝大家的閱讀與支持~

Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板

Tauri2.0-DeepSeek電腦端Ai對話|tauri2+vite6+deepseek流式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端)

posted @ 2025-05-24 10:11 xiaoyan2017 閱讀(694) 評論(0) 收藏舉報

刷新頁面返回頂部

web前端項目案例實戰

交流分享前端(移動端|微信端|小程序)最新技術、知識、項目案例...

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

flutter3-winseek客戶端AI實例|Flutter3.32+DeepSeek流式ai對話模板Exe

Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板

Tauri2.0-DeepSeek電腦端Ai對話|tauri2+vite6+deepseek流式ai聊天系統

技術棧

項目特征

項目框架目錄結構

Flutter3-DeepSeek跨平臺ai對話已經同步到我的作品鋪，感謝鼓勵與支持！

flutter環境變量.env

配置入口main.dart

項目布局結構

flutter3+getx路由管理

flutter3解析流式markdown結構

flutter3+dio調用deepseek實現流式sse輸出

Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板

Tauri2.0-DeepSeek電腦端Ai對話|tauri2+vite6+deepseek流式ai聊天系統

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

vue3-webseek網頁版AI問答|Vite6+DeepSeek+Arco流式ai聊天打字效果

公告