纯原生Flutter3 + Dio 实战 DeepSeek V4.1 SSE流式对话 – yxybox

最新 2026 年: 使用 Flutter3.41 + ディオ アクセス ディープシーク V4.1 ：ストリーミングAI対話アプリ開発実践。

プロジェクトテクノロジースタックの概要📦

特徴✨

プロジェクト構造ディレクトリ

Flutter プロジェクトの環境変数

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

# DeepSeek API配置
DEEPSEEK_API_KEY = your apikey
DEEPSEEK_BASE_URL = 

main.dartの設定

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/services.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 AnnotatedRegion(
      value: SystemUiOverlayStyle(
        /**
         * 修复flutter3.32以上会出现底部导航栏背景黑色
         * The bottom navigation bar is always black from flutter: 3.32.1.
         * It's working fine on flutter: 3.29.3
        */
        systemNavigationBarColor: Colors.transparent,
        systemNavigationBarIconBrightness: Brightness.dark,
      ),
      child: GetMaterialApp(
        title: 'Flutter3-DeepSeek',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Color(0xFF5842F2)),
          useMaterial3: true,
          fontFamily: Platform.isWindows ? 'Microsoft YaHei' : null,
        ),
        // 初始路由
        initialRoute: appStore.isLogin ? '/' : '/login',
        // 路由页面
        getPages: routePages,
        // 初始弹窗key
        navigatorKey: MyDialog.navigatorKey,
        localizationsDelegates: [
          // Add your ShirneDialogLocalizations delegate here
          ShirneDialogLocalizations.delegate,
        ],
      ),
    );
  }
}

全体的なレイアウト構造

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

この時点で、最初からのビルドは完了です フラッター3.41 + ダーツ3統合 DeepSeek-V4.1クロスプラットフォームのAIストリーミング会話アプリケーション。

この計画は通過しました SSEストリーミング応答と GetX 状態管理滑らかなタイプライタースタイルの会話インタラクションを可能にし、拡張性を高めます。 深い思考、LaTeX 数式、マーメイド チャート、コードのハイライト表示、画像プレビューおよびその他の機能により、Flutter は AI アプリケーション シナリオにおいてより完全な表現力を得ることができます。