🚀 Ejemplo para utilizar Gemini en Flutter.
Tabla de Contenido
Introducción
Paquete para integrar nuestro proyecto Flutter con Gemini API. SDK que brinda Google para utilizar Gemini API en Flutter. Nos permite interactuar con una Inteligencia Artificial a la cual podemos realizar preguntas, que nos puedan ayudar con ciertas tareas para realizarlas más rápido.
Generar API key para utilizar Gemini
Para utilizar este paquete de Flutter, primero debemos obtener un API key de Gemini API, que tiene un plan gratuito para realizar consultas, esto lo podemos lograr realizar los siguientes pasos:
-
Ir al sitio web de Google AI Studio .
-
Allí podemos ingresar con un correo de gmail, o se puede crear uno en caso de no tener.
-
Luego damos clic en la opción de Sign in to Google AI Studio.
-
Ingresamos a nuestra cuenta de gmail en caso de no estarlo y dar clic en Siguiente.
-
Ahora ingresamos la clave del correo y clic en Siguiente.
-
Ingresamos al dashboard de Google AI Studio y vamos a la opción Get API key.
-
Aquí está la opción de Crear clave de API, al seleccionar aparece un mensaje
Generando clave de API.
-
Luego ya tenemos la clave y la podemos copiar el API key.
-
Podemos probar el API por medio del CURL que nos dan de ejemplo.
curl --request POST \
--url 'https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=API_KEY' \
--header 'content-type: application/json' \
--data '{
"contents": [
{
"parts": [
{
"text": "Qué es Flutter?"
}
]
}
]
}'
Con esto aseguramos que el API key es correcto y lo podemos utilizar en Flutter.
Instalar google_generative_ai
Ahora vamos a utilizar el SDK google_generative_ai en una aplicación básica de Flutter.
- Inicialmente, debemos crear un proyecto Flutter con el siguiente comando.
flutter create flutter_generative_ai_app
- ahora, debemos instalar el paquete de
google_generative_ai. Tenemos varias opciones, podemos verlo aquí .
dart pub add google_generative_ai
flutter pub add google_generative_ai
dependencies:
google_generative_ai: ^0.4.6
Luego de esto basta con ejecutar dart pub get o flutter pub get para terminar la instalación.
También nos dan un ejemplo básico para utilizar el SDK.
import 'package:google_generative_ai/google_generative_ai.dart';
const apiKey = ...;
void main() async {
final model = GenerativeModel(
model: 'gemini-1.5-flash-latest',
apiKey: apiKey,
);
final prompt = 'Escribe algo aquí.';
final content = [Content.text(prompt)];
final response = await model.generateContent(content);
print(response.text);
};
Crear App Flutter + google_generative_ai
En este ejemplo vamos a tener un campo de texto y un botón para enviar un consultas a Gemini API.
Opciones para configurar API key
- Para configurar el
API keyvamos a agregarlo al archivobashrc,zsho donde se configure las variables de entorno, dependiendo del Sistema Operativo utilizado. En este caso vamos a usarbashrc.
open ~/.bashrc
A continuación, configuramos el API KEY agregándolo al archivo con este comando.
export API_KEY=<API_KEY>
Por último, guardar el archivo para que tome los cambios, con el siguiente comando:
source ~/.bashrc
-
Podemos configurar con el paquete flutter_dotenv .
-
Para pruebas se puede colocar el
API keydirectamente en el código, pero es recomendable manejarlo en variables de entorno. También se puede revisar las recomendaciones que da Google al respecto, aquí .
Para este ejemplo podemos utilizar esta última para un ejemplo básico.
Ejemplo
import 'package:flutter/material.dart';
import 'package:google_generative_ai/google_generative_ai.dart';
String? apiKey = 'API_KEY';
void main() async {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
),
home: const MyHomePage(title: 'Flutter Generative AI'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool _isLoading = false;
late GenerativeModel _model;
String? _text = '';
final TextEditingController _textController = TextEditingController();
void _generateContent() async {
final content = [Content.text(_textController.text)];
setState(() {
_isLoading = true;
});
final response = await _model.generateContent(content);
_text = response.text;
_textController.clear();
setState(() {
_isLoading = false;
});
}
@override
void initState() {
super.initState();
_model = GenerativeModel(
model: 'gemini-1.5-flash-latest',
apiKey: apiKey!,
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: SafeArea(
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Align(
alignment: Alignment.centerLeft,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Text(
'Escribe algo...',
),
SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
flex: 3,
child: TextField(
controller: _textController,
decoration:
InputDecoration(border: OutlineInputBorder()),
),
),
Expanded(
child: IconButton(
onPressed: _generateContent,
icon: Icon(Icons.send),
),
),
],
),
SizedBox(
height: 20,
),
_isLoading
? Center(child: CircularProgressIndicator())
: Text(
'$_text',
),
],
),
),
),
),
),
);
}
}
Vista
Ejemplo completo en GitHub
Conclusión
En conclusión, google_generative_ai nos brinda la posibilidad de poder utilizar Gemini API que da una generosa capa gratuita para realizar consultas a una inteligencia artificial.
¡Gracias por leer!
