Mist - Car Wash On-Demand Home Service App

About Mist

Mist is a modern Flutter UI Kit for a Car Wash & Bike Care booking app, featuring 30+ polished screens that cover the complete booking journey—from location and vehicle selection to service browsing, booking, checkout, and profile management. The template includes Google Maps integration to display the user’s current location and is built with clean, modular code using MobX for state management.

This is a frontend UI Kit — no backend, database, or live API is included. All screens use static sample data for demonstration purposes. You can easily connect your own backend (REST API, Firebase, or any custom service) to make the application fully functional.

Key Features

• 30+ modern and well-organized Flutter screens
• Light & Dark theme support
• Current location detection using Geolocator
• Google Maps integration
• Location, city & vehicle selection flow
• Home screen with service categories
• Service listing and detailed service pages
• Ratings, reviews and FAQs UI
• Cart, coupons, slot booking and payment UI
• Booking history and address management
• Profile management and premium membership screens
• Responsive UI for Android & iOS
• Flutter Null Safety support
• Clean architecture and reusable widgets

Technology Stack

• Flutter
• Dart
• MobX for state management
• Google Maps Flutter
• Geolocator
• Modular project structure (screens, services, network, models, stores and utilities)

Technical Requirements

• Flutter 3.29.3 or later
• Dart 3.7.2 or later
• Android Studio or Visual Studio Code with Flutter & Dart plugins
• Xcode 14 or later (for iOS builds)
• Android minSdkVersion 21+
• iOS 12.0+

Google Maps Configuration

This template uses Google Maps to display the user’s current location. Before running the project, create your own Google Maps API key and replace the placeholder API key in both the Android and iOS projects.

Step 1: Create a Google Maps API Key

1. Create or select a project in Google Cloud Console.
2. Enable Maps SDK for Android and Maps SDK for iOS.
3. Create an API key from APIs & Services > Credentials.

Android

Replace the placeholder API key in:

iOS

Replace the placeholder API key in:

Location Permission

The application requests the user’s location only while the app is in use to display the current position on Google Maps. The required iOS location permission (NSLocationWhenInUseUsageDescription) is already configured in the project.

Background location tracking is not used, so no additional background location permissions are required.

Optional Firebase Usage

Firebase is not configured by default. If you choose to integrate Firebase (Authentication, Firestore, Cloud Messaging, Storage, etc.), additional configuration is required. Depending on your usage, Firebase services may incur charges beyond the free tier.

What’s Included

• Complete Flutter source code
• Well-organized project structure
• Documentation for setup and customization
• Google Maps configuration guide
• API integration examples
• Reusable widgets and components