极客前沿

AI 入门:从零搭建 Flutter 应用,第一次跑通 Gemini

2026-05-13 01:30
freeCodeCamp
查看原文

从零开始,学会安装 Flutter 和 Firebase,并编写第一个调用 Gemini AI 的 Flutter 应用。

准备开发环境

首先,你需要在电脑上安装 Flutter(一套用于构建跨平台应用的框架)。访问 flutter.dev,根据你的操作系统下载并安装 Flutter SDK。安装后,在终端运行 flutter doctor 检查是否成功。接着,安装 Android StudioVS Code(代码编辑器),并添加 Flutter 插件。

Tutorial Image

创建 Flutter 项目并添加 Firebase

打开终端,运行 flutter create my_ai_app 创建一个新项目。然后,你需要将 Firebase(Google 的后端服务平台)集成到项目中。访问 Firebase 控制台,创建一个新项目,并按照指引添加 Android 或 iOS 应用。使用 FlutterFire CLI(一个命令行工具)自动配置:运行 flutterfire configure,选择你的 Firebase 项目,它会自动生成配置文件。

Tutorial Image

安装 Gemini 相关包

在项目根目录打开 pubspec.yaml,在 dependencies 下添加:

Tutorial Image
dependencies:
  firebase_ai: ^0.1.0
  firebase_core: ^2.0.0

保存后,在终端运行 flutter pub get 安装。注意:firebase_ai 包是 Google 推出的新包,旧版 google_generative_ai 已废弃,请勿使用。

Tutorial Image

编写你的第一个 AI 调用

打开 lib/main.dart,用以下代码替换原有内容:

Tutorial Image
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_ai/firebase_ai.dart';
import 'firebase_options.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('AI 入门')),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              final ai = FirebaseAI.instance;
              final response = await ai.generateContent('介绍一下 Flutter');
              print(response.text);
            },
            child: Text('调用 AI'),
          ),
        ),
      ),
    );
  }
}

注意:你需要先在 Firebase 控制台中启用 Vertex AI for Firebase(Gemini 的后端服务)。运行应用,点击按钮,查看控制台输出。如果看到 AI 回复,说明你已成功跑通第一个 AI 功能!

常见坑与下一步

常见坑: 如果报错 MissingPluginException,请确保已运行 flutter pub get 并重启应用;如果 API 调用失败,检查 Firebase 控制台中的 Vertex AI 是否已启用,以及 API 密钥是否配置正确(无需手动配置,FlutterFire CLI 会自动处理)。

下一步: 你可以尝试修改提示词,或使用 streamGenerateContent 实现流式输出(AI 逐字显示结果)。更多功能请查阅 firebase_ai 官方文档

内容来源

freeCodeCamp

发布时间

2026-05-13 01:30

返回 AI技术