Build With Gemini — ChatBot in Flutter

5 min readMar 17, 2024

Disclaimer: In the spirit of building with Gemini, parts of this article have been written in conjunction with prompts from the LLM.

Introduction

What is Gemini?
Gemini is a large language model (LLM) developed by Google DeepMind. It was announced in December 2023 as a successor to previous Google AI models like LaMDA and PaLM 2. The Gemini ecosystem represents
Google’s most capable AI.

Gemini models
Gemini comes in 3 main model sizes each optimised for different purposes. (These are just the initial versions of Gemini, and future iterations may introduce new sizes or variations tailored for specific needs.)

Ultra: This is the largest and most capable model designed for tackling highly complex tasks. It has the greatest power and performance within the Gemini family.
Pro: This is considered the best all-rounder, offering a balanced blend of capability and efficiency. It is suitable for a wide range of tasks and can scale effectively across various applications.
Nano: This is the most efficient model, specifically designed for running on devices with limited resources, like smartphones. It prioritises efficiency while maintaining functionality for on-device tasks. Additionally, there are two versions of Gemini Nano.

Nano-1: This version has 1.8 billion parameters, making it even more lightweight and suitable for devices with very limited resources.
Nano-2: This version has 3.25 billion parameters, offering a bit more capability compared to Nano-1 while still prioritising efficiency.

Gemini key capabilities

Multimodality
Gemini is able to process and understand various data types. Unlike traditional LLMs that primarily focus on text, Gemini can handle text, code, images, audio, and video. This allows it to comprehend information more comprehensively and potentially perform tasks requiring different input formats. In this article, we’ll be looking at creating a chatbot.
Performance
Gemini has advanced reasoning and problem-solving capabilities. It excels in complex reasoning tasks, demonstrating state-of-the-art performance on various benchmarks in areas like question answering and code generation.
Code interpretation and generation
Gemini can understand and even generate code, potentially assisting in software development tasks.
Accessibility
Multiple versions/model sizes for Gemini exist to cater for the diverse user needs. It comes in the three main versions discussed above.

Using Gemini in Flutter

Before calling the Gemini API, you need to properly set up your Flutter project. This will include setting up your API key, adding the SDK to your pub dependencies, and initialising the model.

API Key
To use the Gemini API, you’ll need an API key. If you don’t already have one, create a key in Google AI Studio. N.B: Use your API keys securely. Do not share them or embed them in code the public can view. So, don’t add files with these keys on GitHub or any other version control software.

Install the Package
Add the google_generative_ai package to your Flutter app: flutter pub add google_generative_ai

Initialise the Generative AI model
Before you can make any API calls, you need to import and initialise the Generative Model.

import 'package:google_generative_ai/google_generative_ai.dart';

static const apiKey = 'Insert your API Key here'; // Recommended: Set the API key in your environment variables and access it e.g., final apiKey = Platform.environment['API_KEY'];

final model = GenerativeModel(model: 'gemini-pro', apiKey: apiKey);

When initialising a model, it is important to use the model that is specific to your use case scenario. In the above snippet, we’re going to use gemini-pro as we are only interested in text input and output. The model gemini-pro-vision on the other hand, is for multimodal input — i.e., text, images etc.

Generate Text From a Prompt
After specifying the gemini-pro model, you can now be able to generate a response using the generateContent method.

final prompt = [Content.text('Hello, Gemini')];
final response = await model.generateContent(content);
print(response.text);

To generate text from text and image input (multi-modal), read the quickstart docs here.

Creating our Chat Bot
With the components above, we can easily create a chat bot with the Gemini API and Flutter. We’ll only modify the prompt to fetch the text that the user will input in the TextField and instead of printing the response on the console, we’ll add them to a chat bubble list view.

body: Column(
  mainAxisAlignment: MainAxisAlignment.end,
  children: [
    Expanded(
      child: ListView.builder(  // List view to display the entire chat
        itemCount: _messages.length,
        itemBuilder: (context, index) {
          final msg = _messages[index];
          return Messages(
            message: msg.message,
          );
        },
      ),
    ),
    Padding( // TextFormField to type in user prompt
      padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 15.0),
      child: Row(
        children: [
          Expanded(
            child: TextFormField(
              controller: _userMessage,
              decoration: InputDecoration(
                border: OutlineInputBorder(borderRadius: BorderRadius.circular(25)),
                label: const Text('Chat with Gemini'),
              ),
            ),
          ),
          IconButton(
            onPressed: sendPrompt, // function to call the API with user prompt
            padding: const EdgeInsets.all(15),
            icon: const Icon(Icons.send),
            iconSize: 30,
          )
        ],
      ),
    ),
  ],
),

The sendPrompt function will look something like this.

final TextEditingController _userPrompt = TextEditingController();
final List<Message> _messages = [];

... 

Future<void> sendPrompt() async {
  final message = _userPrompt.text;
  _userPrompt.clear();
  
  setState(() {
    _messages.add(Message(message: message));
  });
  
  final prompt = [Content.text(message)];
  final response = await model.generateContent(prompt);
  
  setState(() {
    _messages.add(Message(message: response.text ?? ''));
  });
}

Just like the initial example above, we’re using the generateContent to get the response from the model based on the user prompt. We’re adding both the user prompt message and the response to a List which will be used to populate the ListView builder.

And that’s it!

See the model in action below.

Have you tried using the Gemini API in your apps? How did it go? My experience with it was pretty amazing. I didn’t encounter any challenges at all. The docs have everything!

“Every technology shift is an opportunity to advance scientific discovery, accelerate human progress, and improve lives. I believe the transition we are seeing right now with AI will be the most profound in our lifetimes, far bigger than the shift to mobile or to the web before it.”
— Sundar Pichai, Google and Alphabet CEO

As always, thank you for reading! ❤

References:
1. https://medium.com/flutter/harness-the-gemini-api-in-your-dart-and-flutter-apps-00573e560381
2. https://ai.google.dev/tutorials/dart_quickstart
3. https://danielherresan.medium.com/lleva-tus-aplicaciones-flutter-al-siguiente-nivel-con-gemini-edf275abdc21
4. https://deepmind.google/technologies/gemini/

Build With Gemini — ChatBot in Flutter

Written by Jackie Moraa