Skip to content

Integrating Google Generative AI with Flutter: A Comprehensive Guide

Welcome, developers! In today’s post, we will explore how to integrate Google’s state-of-the-art generative AI models, specifically the Gemini models, into your Flutter application using the google_generative_ai package. This guide will cover everything from setting up your project and securing your API key to implementing common use cases like text generation, multimodal input, and multi-turn conversations.

Getting Started with the Google AI Dart SDK

Prerequisites

To follow along with this tutorial, ensure your development environment meets the following requirements:

  • Dart SDK version 3.2.0 or higher
  • Familiarity with building Flutter applications

Get an API Key

Using the Google AI Dart SDK requires an API key. Follow the instructions at Google AI Studio to create one.

Adding the google_generative_ai Package

First, let’s add the google_generative_ai package to your Flutter project. Open your terminal and navigate to your project directory. Then, run:

flutter pub add google_generative_ai

Alternatively, add the dependency directly in your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  google_generative_ai: ^0.4.3

After adding the dependency, don’t forget to fetch the packages:

flutter pub get

Securing Your API Key

It is crucial to keep your API key secure. Avoid embedding it directly in your code. Instead, use environment variables. For Flutter, you can pass the API key at runtime using the --dart-define option:

flutter run --dart-define=API_KEY=your_api_key

Implementing the Generative Model

Let’s create a simple Flutter app that uses the Google AI SDK to generate text content.

1. Initialize the Model

Create a new Dart file main.dart and add the following code to initialize the generative model:

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:google_generative_ai/google_generative_ai.dart';

void main() async {
  runApp(MyApp());

  // Access your API key as an environment variable
  final apiKey = Platform.environment['API_KEY'];
  if (apiKey == null) {
    print('No \$API_KEY environment variable');
    exit(1);
  }

  // Initialize the generative model
  final model = GenerativeModel(
    model: 'gemini-1.5-flash-latest',
    apiKey: apiKey,
  );

  final prompt = 'Write a story about a magic backpack.';
  final content = [Content.text(prompt)];
  final response = await model.generateContent(content);

  print(response.text);
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Google Generative AI with Flutter'),
        ),
        body: Center(
          child: Text('Check the console for generated content.'),
        ),
      ),
    );
  }
}

This code sets up a basic Flutter app and initializes the generative model using an environment variable for the API key. The generateContent method is used to generate text from a text-only prompt.

Using the API for Various Use Cases

2. Text Generation

You can generate text content using the generateContent method. Here’s an example:

final prompt = 'Write a poem about the ocean.';
final content = [Content.text(prompt)];
final response = await model.generateContent(content);

print(response.text);

3. Multimodal Input (Text and Image)

To handle multimodal inputs, use the generateContent method with both text and images:

final (firstImage, secondImage) = await (
  File('image0.jpg').readAsBytes(),
  File('image1.jpg').readAsBytes()
).wait;
final prompt = TextPart("What's different between these pictures?");
final imageParts = [
  DataPart('image/jpeg', firstImage),
  DataPart('image/jpeg', secondImage),
];
final response = await model.generateContent([
  Content.multi([prompt, ...imageParts])
]);

print(response.text);

4. Multi-turn Conversations (Chat)

To build multi-turn conversations, use the startChat and sendMessage methods:

final chat = model.startChat(history: [
  Content.text('Hello, I have 2 dogs in my house.'),
  Content.model([TextPart('Great to meet you. What would you like to know?')])
]);
var content = Content.text('How many paws are in my house?');
var response = await chat.sendMessage(content);

print(response.text);

Advanced Use Cases

Embeddings

Embedding is a technique used to represent text as a vector. Here’s how to generate embeddings:

final model = GenerativeModel(model: 'embedding-001', apiKey: apiKey);
final content = Content.text('The quick brown fox jumps over the lazy dog.');
final result = await model.embedContent(content);

print(result.embedding.values);

Counting Tokens

To count tokens in a prompt, use the countTokens method:

final tokenCount = await model.countTokens(Content.text(prompt));
print('Token count: ${tokenCount.totalTokens}');

Controlling Content Generation

You can control the content generation by setting model parameters and safety settings:

final generationConfig = GenerationConfig(
  stopSequences: ["red"],
  maxOutputTokens: 200,
  temperature: 0.9,
  topP: 0.1,
  topK: 16,
);
final model = GenerativeModel(
  model: 'gemini-1.5-flash',
  apiKey: apiKey,
  generationConfig: generationConfig,
);

final safetySettings = [
  SafetySetting(HarmCategory.harassment, HarmBlockThreshold.high),
  SafetySetting(HarmCategory.hateSpeech, HarmBlockThreshold.high),
];

Conclusion

Integrating Google Generative AI into your Flutter app opens up a world of possibilities for creating AI-powered features. Whether you are generating text, handling multimodal inputs, or building interactive chatbots, the google_generative_ai package provides a powerful and flexible solution.

Resources

Thank you for following along! If you have any questions or run into any issues, feel free to leave a comment below. Happy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *