{"slug": "building-ai-powered-flutter-apps-with-gemini", "title": "Building AI-Powered Flutter Apps with Gemini", "summary": "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.", "body_md": "Generative AI can be integrated into Flutter applications for chat, summarization, classification, content generation, document processing, and intelligent assistants.\n\nA production application should avoid putting sensitive API credentials directly in the mobile application.\n\nA safer architecture is:\n\n```\nFlutter App\n    |\n    | HTTPS\n    v\nBackend API\n    |\n    v\nGemini API\n    |\n    v\nAI Response\n```\n\nEmbedding a production AI API key directly in an APK makes it possible for attackers to extract the key.\n\nInstead:\n\n``` php\nFlutter -> FastAPI/Node/Laravel -> Gemini\n```\n\nThe backend can implement:\n\nA simple chat screen can contain:\n\n```\nfinal controller = TextEditingController();\n\nTextField(\n  controller: controller,\n  decoration: const InputDecoration(\n    hintText: 'Ask something...',\n  ),\n)\n```\n\nSend the message through a repository:\n\n```\nclass AiRepository {\n  Future<String> generate(String prompt) async {\n    // Call your backend here.\n    throw UnimplementedError();\n  }\n}\n```\n\nA scalable Flutter AI application can use:\n\n```\nPresentation\n    |\nBLoC / Cubit\n    |\nAI Repository\n    |\nAPI Client\n    |\nBackend\n    |\nGemini\n```\n\nThis makes it possible to replace Gemini later without rewriting the UI.\n\nInstall dependencies:\n\n```\npip install fastapi uvicorn google-genai\n```\n\nExample:\n\n``` python\nimport os\n\nfrom fastapi import FastAPI\nfrom pydantic import BaseModel\nfrom google import genai\n\napp = FastAPI()\n\nclient = genai.Client(\n    api_key=os.environ[\"GEMINI_API_KEY\"]\n)\n\nclass ChatRequest(BaseModel):\n    message: str\n\n@app.post(\"/chat\")\nasync def chat(request: ChatRequest):\n    response = client.models.generate_content(\n        model=\"gemini-2.5-flash\",\n        contents=request.message,\n    )\n\n    return {\"response\": response.text}\n```\n\nKeep the API key in an environment variable:\n\n```\nexport GEMINI_API_KEY=\"your-key\"\n```\n\nNever commit it to Git.\n\nUsing the `http`\n\npackage:\n\n```\nimport 'dart:convert';\nimport 'package:http/http.dart' as http;\n\nclass AiApi {\n  final String baseUrl;\n\n  AiApi(this.baseUrl);\n\n  Future<String> chat(String message) async {\n    final response = await http.post(\n      Uri.parse('$baseUrl/chat'),\n      headers: {\n        'Content-Type': 'application/json',\n      },\n      body: jsonEncode({\n        'message': message,\n      }),\n    );\n\n    if (response.statusCode != 200) {\n      throw Exception('AI request failed');\n    }\n\n    final data = jsonDecode(response.body);\n\n    return data['response'] as String;\n  }\n}\n```\n\nAI requests are asynchronous, so explicitly represent:\n\n```\nIdle\n  ↓\nLoading\n  ↓\nSuccess\n\nor\n\nLoading\n  ↓\nFailure\n```\n\nWith BLoC:\n\n```\nsealed class AiState {}\n\nclass AiInitial extends AiState {}\n\nclass AiLoading extends AiState {}\n\nclass AiSuccess extends AiState {\n  final String response;\n\n  AiSuccess(this.response);\n}\n\nclass AiFailure extends AiState {\n  final String message;\n\n  AiFailure(this.message);\n}\n```\n\nInstead of:\n\n```\nExplain this.\n```\n\nUse structured instructions:\n\n```\nYou are an assistant for a Flutter developer.\n\nTask:\nExplain the following Dart error.\n\nRequirements:\n1. Identify the root cause.\n2. Provide corrected code.\n3. Keep the explanation concise.\n\nError:\n{{error}}\n```\n\nStructured prompts make application behavior more predictable.\n\nFor chat applications, streaming can improve perceived responsiveness:\n\n```\nUser message\n     |\n     v\nBackend\n     |\n     +---- token\n     +---- token\n     +---- token\n     +---- token\n     |\nFlutter renders progressively\n```\n\nConsider Server-Sent Events or WebSockets depending on your backend architecture.\n\nNever expose:\n\nAdd:\n\nFlutter 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.\n\nSDK Flutter: [https://github.com/v-modal/vmodal_sdk_flutter](https://github.com/v-modal/vmodal_sdk_flutter)\n\nSDK Android: [https://github.com/v-modal/vmodal_sdk_android](https://github.com/v-modal/vmodal_sdk_android)\n\nDiscord: [https://discord.gg/K72z28KUx](https://discord.gg/K72z28KUx)", "url": "https://wpnews.pro/news/building-ai-powered-flutter-apps-with-gemini", "canonical_source": "https://dev.to/vmodal_ai/building-ai-powered-flutter-apps-with-gemini-10gj", "published_at": "2026-08-11 18:02:59+00:00", "updated_at": "2026-08-11 18:20:35.093225+00:00", "lang": "en", "topics": ["generative-ai", "large-language-models", "developer-tools", "ai-products"], "entities": ["Google", "Gemini", "Flutter", "FastAPI", "BLoC"], "alternates": {"html": "https://wpnews.pro/news/building-ai-powered-flutter-apps-with-gemini", "markdown": "https://wpnews.pro/news/building-ai-powered-flutter-apps-with-gemini.md", "text": "https://wpnews.pro/news/building-ai-powered-flutter-apps-with-gemini.txt", "jsonld": "https://wpnews.pro/news/building-ai-powered-flutter-apps-with-gemini.jsonld"}}