In this tutorial, you will learn how to integrate Gemini AI into your Flutter app. We are going to use the Interactions API provided by Gemini.
Let’s start.
https://youtu.be/MCPtycmRKLE
Flutter Gemini API Integration In 10 Minutes
Okay… Let’s make a simple Flutter project named **`flutter_gemini_api`** using the `flutter create` command.
If you don’t know how to make a Flutter project read this command guide and Flutter Android Studio setup guide.
After that, open the project in your IDE and open `lib/main.dart`. Remove everything and create a MaterialApp template using `mateapp` (it only works if you are using the Awesome Flutter Snippets extension).
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
void main() => runApp(GeminiApiIntegration());
class GeminiApiIntegration extends StatefulWidget {
GeminiApiIntegration({super.key});
@override
State createState() => _GeminiApiIntegrationState();
}
class _GeminiApiIntegrationState extends State {
final TextEditingController _searchController = TextEditingController();
String _response = "";
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Gemini Api Integration',
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text('Gemini Api Integration'),
),
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
TextField(
decoration: InputDecoration(hintText: "Ask something..."),
controller: _searchController,
),
const SizedBox(height: 16),
SizedBox(
width: double.infinity,
child: OutlinedButton(
onPressed: () async {},
child: Text("Ask"))),
const SizedBox(height: 16),
Text(_response),
],
),
),
)),
);
}
}
This is the UI, and you can test it using an emulator. Check that everything works fine.
After that, we need to get a Gemini API key and work on the integration.
Documentation: Gemini AI Documentation
Go to this URL: Gemini AI Studio – API Keys.
Open the pubspec.yaml file and add the `http` package.
http: ^1.6.0
Now, add the API integration code.
bool loading = false;
static const _apiKey =
"YOUR_API_KEY";
static const _url =
"https://generativelanguage.googleapis.com/v1/interactions";
Future _generateContent(String prompt) async {
try {
final response = await http.post(Uri.parse(_url),
headers: {
'Content-Type': 'application/json',
'x-goog-api-key': _apiKey,
},
body: jsonEncode({
"model": "gemini-2.5-flash",
"input": prompt,
}));
if (response.statusCode == 200) {
final data = jsonDecode(response.body);
return data['steps'][1]['content'][0]['text'];
} else {
return "Error: ${response.statusCode} - ${response.reasonPhrase}";
}
} catch (e) {
print(e);
return "Error: $e";
}
}
Here, you can see that I have used the Interactions API and sent a POST request with the `gemini-2.5-flash` model. You can also use the latest free-tier model.
Check the status code carefully, as it may be useful. The status code may change due to model overload or if the model has been deprecated.
It works only if the status code is `200`.
The most important parameters are the API key, model, and input.
You can also try it in Postman. It has a web version, so there’s no need to download or install it.
bool loading = false;
loading
? CircularProgressIndicator()
: SizedBox(
width: double.infinity,
child: OutlinedButton(
onPressed: () async {
setState(() {
loading = true;
_response = "";
});
final response = await _generateContent(
_searchController.text);
setState(() {
loading = false;
_response = response;
});
},
child: Text("Ask"))),
- You need to add a loading variable with an initial value of
false. - Replace the button UI with the following code.
- When the button is clicked, set the
loadingvariable totrue. This will rebuild the UI usingsetStateand display aCircularProgressIndicator. Once the API integration is complete, set it back tofalseand rebuild the UI again usingsetState.
Full Source Code
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
void main() => runApp(GeminiApiIntegration());
class GeminiApiIntegration extends StatefulWidget {
GeminiApiIntegration({super.key});
@override
State createState() => _GeminiApiIntegrationState();
}
class _GeminiApiIntegrationState extends State {
final TextEditingController _searchController = TextEditingController();
String _response = "";
bool loading = false;
static const _apiKey =
"YOUR_API_KEY";
static const _url =
"https://generativelanguage.googleapis.com/v1/interactions";
Future _generateContent(String prompt) async {
try {
final response = await http.post(Uri.parse(_url),
headers: {
'Content-Type': 'application/json',
'x-goog-api-key': _apiKey,
},
body: jsonEncode({
"model": "gemini-2.5-flash",
"input": prompt,
}));
if (response.statusCode == 200) {
final data = jsonDecode(response.body);
return data['steps'][1]['content'][0]['text'];
} else {
return "Error: ${response.statusCode} - ${response.reasonPhrase}";
}
} catch (e) {
print(e);
return "Error: $e";
}
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Gemini Api Integration',
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text('Gemini Api Integration'),
),
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
TextField(
decoration: InputDecoration(hintText: "Ask something..."),
controller: _searchController,
),
const SizedBox(height: 16),
loading
? CircularProgressIndicator()
: SizedBox(
width: double.infinity,
child: OutlinedButton(
onPressed: () async {
setState(() {
loading = true;
_response = "";
});
final response = await _generateContent(
_searchController.text);
setState(() {
loading = false;
_response = response;
});
},
child: Text("Ask"))),
const SizedBox(height: 16),
Text(_response),
],
),
),
)),
);
}
}