Flutter3.41实战AI：从零到一构建app版流式ai系统

原创

andy2018

发布于 2026-04-08 22:17:36

650

文章被收录于专栏：h5h5

基于flutter3.41+dart3+getx+dio+flutter_markdown集成deepseek智能ai流式输出开发实战。

项目技术点

编辑器：VScode
跨平台框架：Flutter3.41.5+Dart3.11
大模型框架：DeepSeek-V3.2
网络请求：dio^5.9.2
路由/状态管理：get^4.7.3
本地存储：get_storage^2.1.1
markdown解析：flutter_markdown_plus^1.0.7
高亮插件：flutter_highlight^0.7.0
latex插件：flutter_markdown_plus_latex^1.0.5
环境变量插件：flutter_dotenv^6.0.0

项目结构目录

使用最新跨平台技术Flutter3.41.5搭建项目，调用DeepSeek-Chat对话大模型。

flutter配置环境变量

在flutter中也可以像在vue3中一样，支持配置.env环境变量。通过flutter_dotenv插件。

自己去申请一个deepseek apikey，并替换掉项目根目录下.env文件里的key，即可实现流式对话功能。

# 项目名称
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: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,
        ],
      ),
    );
  }
}

支持运行到桌面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.32以上版本底部导航栏背景黑色

flutter build apk打包运行到手机，有些手机出现底部导航栏背景黑色。可以尝试如下方法修复。

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: ...
)

flutter3路由配置

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对接deepseek api实现流式输出

// 调用deepseek接口
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': chatStore.getSetting('thinkingEnabled') ? 'deepseek-reasoner' : 'deepseek-chat', // deepseek-chat对话模型 deepseek-reasoner推理模型
    'stream': true, // 流式输出
    'max_tokens': 8192, // 限制一次请求中模型生成 completion 的最大 token 数(默认使用 4096)
    'temperature': 0.4, // 严谨采样 越低越严谨(默认1)
  }
);