Flutter AI 工具包

您好，欢迎使用 Flutter AI 工具包！

AI 工具包是一组与 AI 聊天相关的组件，可以轻松地将 AI 聊天窗口添加到您的 Flutter 应用程序中。AI 工具包围绕一个抽象的 LLM 提供程序 API 组织，以便轻松切换您希望聊天提供程序使用的 LLM 提供程序。开箱即用，它支持 Firebase AI Logic。

• 多轮对话：在多次交互中保持上下文。
• 流式响应：在生成时实时显示 AI 响应。
• 富文本显示：支持聊天消息中的格式化文本。
• 语音输入：允许用户使用语音输入提示。
• 多媒体附件：支持发送和接收各种媒体类型。
• 函数调用：支持对 LLM 提供程序的工具调用。
• 自定义样式：提供广泛的自定义选项以匹配您的应用程序设计。
• 聊天序列化/反序列化：存储和检索应用程序会话之间的对话。
• 自定义响应组件：引入专门的 UI 组件来呈现 LLM 响应。
• 可插拔 LLM 支持：实现一个简单的接口来插入您自己的 LLM。
• 跨平台支持：与 Android、iOS、Web 和 macOS 平台兼容。

以下是托管 AI 工具包的演示示例的外观

此演示的源代码可在 GitHub 仓库中找到。

或者，您可以在 Firebase Studio 中打开它，Firebase Studio 是 Google 的全栈 AI 工作区和云端 IDE

1. 安装

   将以下依赖项添加到您的 pubspec.yaml 文件

   yaml

   dependencies:
     flutter_ai_toolkit: ^latest_version
     firebase_ai: ^latest_version
     firebase_core: ^latest_version
   

   content_copy
2. 配置

   AI 工具包支持 Gemini 端点（用于原型设计）和 Vertex 端点（用于生产）。两者都需要 Firebase 项目和 firebase_core 包进行初始化，如 使用 Firebase AI Logic SDKs 开始使用 Gemini API 文档中所述。

   完成此操作后，使用 flutterfire CLI 工具将新的 Firebase 项目集成到您的 Flutter 应用程序中，如 将 Firebase 添加到您的 Flutter 应用程序 文档中所述。

   遵循这些说明后，您就可以使用 Firebase 将 AI 集成到您的 Flutter 应用程序中。首先初始化 Firebase

   dart

   import 'package:firebase_core/firebase_core.dart';
   import 'package:firebase_ai/firebase_ai.dart';
   import 'package:flutter_ai_toolkit/flutter_ai_toolkit.dart';
   ​
   // ... other imports
   ​
   import 'firebase_options.dart'; // from `flutterfire config`
   ​
   void main() async {
     WidgetsFlutterBinding.ensureInitialized();
     await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
     runApp(const App());
   }
   ​
   // ...app stuff here
   

   content_copy

   在 Flutter 应用程序中正确初始化 Firebase 后，您现在可以创建 Firebase 提供程序的实例。您可以通过两种方式执行此操作。对于原型设计，请考虑 Gemini AI 端点

   dart

   import 'package:firebase_ai/firebase_ai.dart';
   import 'package:flutter_ai_toolkit/flutter_ai_toolkit.dart';
   ​
   // ... app stuff here
   ​
   class ChatPage extends StatelessWidget {
     const ChatPage({super.key});
   ​
     @override
     Widget build(BuildContext context) => Scaffold(
           appBar: AppBar(title: const Text(App.title)),
           // create the chat view, passing in the Firebase provider
           body: LlmChatView(
             provider: FirebaseProvider(
               // Use the Google AI endpoint
               model: FirebaseAI.googleAI().generativeModel(
                 model: 'gemini-2.5-flash',
               ),
             ),
           ),
         );
   }
   

   content_copy

   FirebaseProvider 类将 Firebase AI Logic SDK 暴露给 LlmChatView。请注意，您提供了一个模型名称（您可以从多个选项中选择），但您不提供 API 密钥。所有这些都作为 Firebase 项目的一部分进行处理。

   对于生产工作负载，很容易切换到 Firebase Logic AI 端点

   dart

   class ChatPage extends StatelessWidget {
     const ChatPage({super.key});
   ​
     @override
     Widget build(BuildContext context) => Scaffold(
           appBar: AppBar(title: const Text(App.title)),
           body: LlmChatView(
             provider: FirebaseProvider(
               // Use the Vertex AI endpoint
               model: FirebaseAI.vertexAI().generativeModel(
                 model: 'gemini-2.5-flash',
               ),
             ),
           ),
         );
   }
   

   content_copy

   有关完整示例，请查看 gemini.dart 和 vertex.dart 示例。

3. 设置设备权限

   为了让您的用户充分利用语音输入和媒体附件等功能，请确保您的应用程序具有必要的权限

   • 网络访问：要在 macOS 上启用网络访问，请将以下内容添加到您的 *.entitlements 文件中

     xml

     <plist version="1.0">
       <dict>
         ...
         <key>com.apple.security.network.client</key>
         <true/>
       </dict>
     </plist>
     

     content_copy

     要在 Android 上启用网络访问，请确保您的 AndroidManifest.xml 文件包含以下内容

     xml

     <manifest xmlns:android="http://schemas.android.com/apk/res/android">
         ...
         <uses-permission android:name="android.permission.INTERNET"/>
     </manifest>
     

     content_copy

   • 麦克风访问：根据 record 包的权限设置说明 进行配置。

   • 文件选择：遵循 file_selector 插件的说明。

   • 图像选择：要在或从他们的设备上拍摄照片或选择照片，请参阅 image_picker 插件的安装说明。

   • Web 照片：要在 Web 上拍摄照片，请根据 camera 插件的设置说明 配置应用程序。

firebase_options.dart

要使用 Vertex AI 示例应用程序，请将您的 Firebase 配置详细信息放入 example/lib/firebase_options.dart 文件中。您可以使用 flutterfire CLI 工具执行此操作，如 将 Firebase 添加到您的 Flutter 应用程序 文档中所述 从 example 目录中。

::: note 请小心不要将 firebase_options.dart 文件签入您的 git 仓库。 ::

在使用此包的过程中，请 记录问题和功能请求 以及提交您想要贡献的任何 代码。我们希望您的反馈和贡献，以确保 AI 工具包对您的实际应用程序来说尽可能地健壮和有用。