Building AI-Powered Flutter Apps with Gemini

A developer outlines an architecture for integrating Google's Gemini generative AI into Flutter mobile apps, emphasizing a backend proxy to protect API keys and enable scalable, maintainable design. The approach uses FastAPI or similar backends to call Gemini, with Flutter handling the UI and state management via BLoC, and includes code examples for chat, streaming, and structured prompts.

Generative AI can be integrated into Flutter applications for chat, summarization, classification, content generation, document processing, and intelligent assistants. A production application should avoid putting sensitive API credentials directly in the mobile application. A safer architecture is: Flutter App | | HTTPS v Backend API | v Gemini API | v AI Response Embedding a production AI API key directly in an APK makes it possible for attackers to extract the key. Instead: php Flutter - FastAPI/Node/Laravel - Gemini The backend can implement: A simple chat screen can contain: final controller = TextEditingController ; TextField controller: controller, decoration: const InputDecoration hintText: 'Ask something...', , Send the message through a repository: class AiRepository { Future<String generate String prompt async { // Call your backend here. throw UnimplementedError ; } } A scalable Flutter AI application can use: Presentation | BLoC / Cubit | AI Repository | API Client | Backend | Gemini This makes it possible to replace Gemini later without rewriting the UI. Install dependencies: pip install fastapi uvicorn google-genai Example: python import os from fastapi import FastAPI from pydantic import BaseModel from google import genai app = FastAPI client = genai.Client api key=os.environ "GEMINI API KEY" class ChatRequest BaseModel : message: str @app.post "/chat" async def chat request: ChatRequest : response = client.models.generate content model="gemini-2.5-flash", contents=request.message, return {"response": response.text} Keep the API key in an environment variable: export GEMINI API KEY="your-key" Never commit it to Git. Using the http package: import 'dart:convert'; import 'package:http/http.dart' as http; class AiApi { final String baseUrl; AiApi this.baseUrl ; Future<String chat String message async { final response = await http.post Uri.parse '$baseUrl/chat' , headers: { 'Content-Type': 'application/json', }, body: jsonEncode { 'message': message, } , ; if response.statusCode = 200 { throw Exception 'AI request failed' ; } final data = jsonDecode response.body ; return data 'response' as String; } } AI requests are asynchronous, so explicitly represent: Idle ↓ Loading ↓ Success or Loading ↓ Failure With BLoC: sealed class AiState {} class AiInitial extends AiState {} class AiLoading extends AiState {} class AiSuccess extends AiState { final String response; AiSuccess this.response ; } class AiFailure extends AiState { final String message; AiFailure this.message ; } Instead of: Explain this. Use structured instructions: You are an assistant for a Flutter developer. Task: Explain the following Dart error. Requirements: 1. Identify the root cause. 2. Provide corrected code. 3. Keep the explanation concise. Error: {{error}} Structured prompts make application behavior more predictable. For chat applications, streaming can improve perceived responsiveness: User message | v Backend | +---- token +---- token +---- token +---- token | Flutter renders progressively Consider Server-Sent Events or WebSockets depending on your backend architecture. Never expose: Add: Flutter is an excellent client platform for AI applications, but a maintainable architecture separates the UI from the AI provider. A backend gives you control over security, prompts, model selection, cost, and business logic. SDK Flutter: https://github.com/v-modal/vmodal sdk flutter https://github.com/v-modal/vmodal sdk flutter SDK Android: https://github.com/v-modal/vmodal sdk android https://github.com/v-modal/vmodal sdk android Discord: https://discord.gg/K72z28KUx https://discord.gg/K72z28KUx