Gemini Chat Playground

A Flutter application for experimenting with Google's Gemini AI, featuring multimodal chat capabilities with text and image inputs. Built with clean architecture using BLoC pattern, dependency injection, and environment configuration.

APP UX

ScreenRecording_08-14-2025.13-35-21_1.mov

Features

• Gemini AI Integration: Real-time chat with Google's Gemini AI model
• Multimodal Input: Send text messages with optional image attachments
• Image Analysis: Gemini can analyze and respond to images
• Clean Architecture: Feature-based folder structure with dependency injection
• Environment Configuration: Secure API key management with envied
• BLoC State Management: Reactive state management with flutter_bloc
• Modern UI: Material 3 design with light/dark theme support
• Typing Indicator: Animated indicator during AI response generation
• Message History: Persistent chat history during session

Architecture

Clean Architecture with Feature-Based Structure

lib/
├── core/                           # Shared application core
│   ├── config/
│   │   ├── env.dart               # Environment variables (generated)
│   │   ├── env.g.dart             # Generated environment config
│   │   └── app_config.dart        # Application configuration
│   ├── constants/
│   │   └── app_constants.dart     # App-wide constants
│   ├── di/
│   │   └── service_locator.dart   # GetIt dependency injection setup
│   └── theme/
│       └── app_theme.dart         # Material 3 theme configuration
├── features/                       # Feature-based modules
│   └── chat/
│       ├── bloc/                  # State management
│       │   ├── chat_bloc.dart     # BLoC implementation
│       │   ├── chat_event.dart    # Chat events
│       │   └── chat_state.dart    # Chat state model
│       ├── models/                # Data models
│       │   ├── message.dart       # Message entity
│       │   └── chat_state.dart    # Chat state model
│       ├── screens/               # UI screens
│       │   └── chat_screen.dart   # Main chat interface
│       ├── services/              # Business logic
│       │   └── message_service.dart # Gemini AI service
│       └── widgets/               # Reusable UI components
│           ├── chat_input.dart    # Message input with image picker
│           ├── message_bubble.dart # Message display component
│           └── message_list.dart  # Messages list with scroll
└── main.dart                      # App entry point & DI initialization

Key Architectural Patterns

• Feature-Based Organization: Each feature is self-contained with its own models, services, and UI
• Dependency Injection: GetIt service locator for singleton management
• Environment Configuration: Secure API key management with envied package
• BLoC Pattern: Reactive state management with clear separation of concerns
• Repository Pattern: Abstract service interfaces for testability

Dependencies

Core Dependencies

• flutter_gemini: Google Gemini AI SDK integration
• flutter_bloc: Reactive state management
• get_it: Dependency injection service locator
• envied: Environment variable management

Utilities

• equatable: Value equality for models
• file_picker: Image file selection
• uuid: Unique message ID generation
• intl: Date/time formatting

Development

• build_runner: Code generation
• envied_generator: Environment config generation

Getting Started

Prerequisites

• Flutter SDK 3.6.0+
• Google Gemini API key (Get one here)

Setup

1. Clone and install dependencies:

   git clone <repository-url>
   cd it_3263_multi_modal
   flutter pub get

2. Configure environment:

   # Copy the example environment file
   cp .env.example .env
   
   # Edit .env and add your Gemini API key
   GEMINI_API_KEY=your_actual_api_key_here

3. Generate environment configuration:

   dart run build_runner build

4. Run the app:

   flutter run

Usage

1. Text Chat: Type your message and tap send to chat with Gemini AI
2. Image Analysis: Tap the image icon to attach a photo for Gemini to analyze
3. Multimodal Queries: Combine text and images (e.g., "What's in this image?")
4. Remove Attachments: Tap the X on image previews to remove before sending
5. Real-time Responses: Watch the typing indicator while Gemini generates responses

Technical Details

State Management

• ChatBloc: Manages conversation state and AI interactions
• ChatEvent: Defines user actions (send message, attach image, etc.)
• ChatState: Immutable state with message history and loading states
• GetIt: Singleton service registration and dependency resolution

AI Integration

• GeminiMessageService: Handles communication with Gemini API
• Multimodal Support: Text + image processing
• Error Handling: Graceful degradation for API failures
• Rate Limiting: Built-in request management

Security

• Environment Variables: API keys stored securely in .env files
• Code Generation: Compile-time environment variable injection
• Git Ignored: Sensitive data excluded from version control

Customization

UI Customization

• Themes: Modify AppTheme in core/theme/app_theme.dart
• Colors: Update AppColors class for custom message styling
• Constants: Adjust UI constants in core/constants/app_constants.dart
• Material 3: Built-in light/dark theme support

AI Configuration

• Model Selection: Change Gemini model in GeminiMessageService
• Response Handling: Customize AI response processing
• Error Messages: Modify error handling and user feedback
• Rate Limiting: Adjust request timing and retry logic

Future Enhancements

AI Features

• Multiple Images: Support for multiple image attachments
• Voice Input: Speech-to-text integration
• Model Switching: Runtime selection of different Gemini models
• Conversation Memory: Persistent chat history across sessions

Technical Improvements

• Camera Integration: Direct photo capture
• Offline Support: Local message caching
• Performance: Image compression and optimization
• Testing: Unit and integration test coverage
• CI/CD: Automated build and deployment pipeline

User Experience

• Message Search: Find previous conversations
• Export Chat: Save conversations as text/PDF
• Accessibility: Screen reader and keyboard navigation support
• Internationalization: Multi-language support

📝 License

This project is licensed under the BSD-3-Clause license License - see the LICENSE file for details.

👥 Authors

Created by Oleksandr Kholiavko
Extrawest.com, 2025