🤖 AI Chatbot Flutter UI Kit

The AI Chatbot Flutter UI Kit is a professionally designed mobile app template built with Flutter. This package focuses purely on the user interface (UI) using example/mock data, making it ideal for connecting to your own AI backend (such as OpenAI, Bard, or custom APIs).

Featuring premium UI/UX design, animated onboarding screens, dynamic theme support, and clean architectural separation, this template helps you save time while building a modern chatbot app.

.

Download Test App: Click and Download the App

.

💡 No real AI backend included – mock conversation data only. Easily integrate your own API using the pre-defined ChatService.

 

✅ Features

• ✨ Modern and stunning UI/UX
• 🎨 Dark and light theme toggle
• 💬 Prebuilt chatbot UI with mock conversation flow
• 🧑‍🏫 Animated onboarding screens
• 📱 Fully responsive across device sizes
• 🔄 Typing animation, timestamps, and message bubbles
• 🧩 Clean architecture using Provider for state management
• 🔧 Easy backend integration support (OpenAI, Bard, etc.)

📦 Project Info

📁 Folder Structure

lib/
├── main.dart                     # Entry point
├── models/
│   └── message.dart             # Message model with mock data
├── providers/
│   ├── app_provider.dart       # Theme and global state
│   ├── chat_provider.dart      # Handles mock messages
│   └── theme_provider.dart     # Theme switching
├── screens/
│   ├── splash_screen.dart      # Animated splash screen
│   ├── onboarding_screen.dart  # Onboarding UI
│   ├── home_screen.dart        # Main chat UI (mock only)
│   └── profile_screen.dart     # Profile/settings placeholder
├── services/
│   └── chat_service.dart       # Placeholder for real backend
├── utils/
│   ├── app_colors.dart         # Color constants
│   └── app_theme.dart          # Theme setup (light/dark)
└── widgets/
    ├── message_bubble.dart     # Chat bubble widget
    └── typing_indicator.dart   # Animated typing indicator

📋 Dependencies (pubspec.yaml)

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.1.1
  flutter_screenutil: ^5.9.0
  shared_preferences: ^2.2.2
  http: ^1.1.0
  google_fonts: ^6.1.0
  animated_text_kit: ^4.2.2
  flutter_svg: ^2.0.9
  lottie: ^2.7.0

🛠️ How to Use

1. Clone the project
2. Run flutter pub get
3. Run flutter run
4. Start customizing with your own backend!