Build Real-Time AI Assistants in Flutter with Gemini & GenAI

Install flutter on Windows by downloading the flutter sdk, extracting it, adding the flutter bin path to the environment variables, and verifying with flutter doctor.

Install Android Studio and configure Flutter by installing the Dart and Flutter plugins, set up the Android SDK command line tools, accept licenses, and verify readiness with Flutter doctor.

Learn to create and launch an Android virtual device in Android Studio, selecting a device, downloading Android 14, and testing apps on the emulator.

Build a Flutter chatbot UI from a new project, using a stateful chatbot screen with scaffold, app bar, text field, send button, and a center-aligned results area.

Explain how an api enables two programs to communicate, using a weather app to fetch city weather by hitting a platform's url and displaying the result.

Explore API call components like endpoint, parameter, header, and body, and learn how HTTP methods such as get, post, put, and delete drive weather data requests.

Explore Google AI Studio to access Gemini models and implement direct API calls in Flutter, using Dart code without Firebase AI libraries, with JSON post requests and API key authentication.

Make a post request from a Flutter app to the Gemini API using the HTTP library and a URI endpoint, sending the user question in JSON and printing the response.

Build a real-time q&a chatbot in Flutter by capturing user input with a text editing controller, calling Google Gemini, parsing the JSON response, and displaying the answer in the UI.

Learn GUI and logic improvements in Flutter by clearing input after sending, wrapping the scaffold in a safe area to keep UI visible, and displaying error messages with status codes.

Switch Gemini models in a Flutter app by updating the model name (Gemini 2.5, flash, flash lite, or pro) in your API call and rerun to compare responses.

Explore Gemini API docs on text generation and thinking feature; 2.5 flash and Pro models enable thinking by default, and you can disable it by setting a zero thinking budget.

Learn to use system instructions to configure a Flutter app's Gemini-based chatbot, teaching it to act as a financial assistant that answers only finance questions.

Center the app bar title in white, and redesign the bar as a white rounded card with margins and padding, while hiding the text field border and adding hint text.

Learn to build a professional Flutter chat GUI using the dash chat library to display sent prompts and Gemini model responses, with a messages list and setState.

Display received messages in the correct order in a Flutter chat app by distinguishing Gemini model messages and inserting at the start so the latest appears at the bottom.

Learn to add a real-time chat feature in a Flutter app that uses Google Gemini and GenAI, enabling the assistant to reference prior conversations for more contextual follow-ups.

Enable a chat feature in a Flutter app by implementing multi-turn conversations with Google Gemini, passing dynamic chat history to the API to preserve context.

Refactor Flutter app by creating a chat service to handle Google Gemini API calls, moving network code out of the chat screen and using chat history as a parameter.

Add a text-to-speech feature to the flutter chat app using the flutter tts library, configure min sdk 21 and Kotlin 1.9.10+, and declare the TTS service in the Android manifest.

Learn to integrate text-to-speech in a Flutter chat app by adding the flutter_tts library, creating a tts object, invoking speak on responses, and testing on a real device.

Enable and disable Flutter text-to-speech in a chat app by tapping a new app bar icon, using a boolean toggle to control playback and stop ongoing speech when disabled.

Explore multi-language text-to-speech in the flutter gemini app by listing available languages, switching languages with set language, and selecting male or female voices for English, Urdu, and Turkish.

Explore customizing the chatbot voice in a Flutter Gemini app by listing and selecting English US TTS voices, checking network requirements, and applying a voice with the set voice method.

Learn to generate images in a Flutter chatbot by calling Google Gemini's image generation API with a text prompt, handling base64 output, and displaying the image.

Combine text and image generation in flutter by extracting a base64 image from the response, converting it for display, and using 'generate image' to show media in the chat.

Display generated images by converting base64 strings to image files and passing them as media in the dash chat widget using path_provider.

Generate and display images in a Flutter chat using Google Gemini by sending a user prompt to an API, returning a base64 image, and rendering it as a media message.

Select an image from the gallery in a flutter app using image picker, then edit it with a JNI model guided by a user prompt and display the edited image.

Learn to display a selected image in a Flutter app and send the image with a prompt to a Gemini GenAI model to edit or generate images, streamlining the workflow.

Learn to edit images with the api by sending a prompt and a base64-encoded image to the image editing endpoint, including api key authentication and converting file data to base64.

Convert an image file to Base64 by reading bytes and encoding, detect mime type with a library, defaulting to image/jpeg, then send and render the edited Base64 image in Flutter.

Dynamically extract image data from a parts array in a flutter gemini app, using for loops and first(where:) to support variable indices in text, image generation, and editing.

Display a circular progress indicator in a Flutter Gemini app to show loading during image or text generation, toggled by isLoading and centered in a stack.

Demonstrate image understanding in Flutter apps with Gemini, letting users pick a gallery image and ask questions about it, such as describing the scene or a recipe.

Set up a gui bar with image, document, audio, and video icons in the Flutter Gemini app to enable file selection and pass prompts and media to the model.

Build a real-time image understanding workflow in Flutter with Gemini, letting users pick an image, ask questions or captions, and receive text responses from a base64 image API.

Implement a new image understanding feature in Flutter to pass an image and prompt to Google Gemini, receive a text response, and update the chat with the image understanding result.

Learn to implement document understanding in a flutter app with Gemini, open PDFs on your device (even thousand-page PDFs), and ask questions to receive model-provided insights from documents.

Learn how to add a document understanding feature in a flutter gemini app by using a file picker to select PDFs, convert to base64, and query with a prompt.

Learn to pass selected pdfs to Google Gemini in a Flutter app, and use understand documents to answer prompts, including pdf mime types and base64 encoding.

Demonstrate adding audio understanding in a Flutter app using Gemini and GenAI, allowing users to select audio files, ask questions, and obtain details about content and sections.

Set up audio understanding in flutter using Google Gemini by letting users pick audio files, send them with prompts to a JNI model, and receive generated responses.

Learn to implement audio transcription and understanding in Flutter by uploading audio files to Google server, obtaining a uri, and calling the Gemini api to transcribe, describe, or summarize audio.

Learn to upload audio to the Google Gemini Audio API in Flutter apps by creating sessions, determining mime types, fetching upload url, and sending prompts with file data.