Asia/Kabul
UI-Kits
Flutter
Blog
About
HomeUI KitsRideKit: Flutter Carpooling & Ride-Sharing UI Kit | 40+ Screens with Mapbox
Projects

RideKit: Flutter Carpooling & Ride-Sharing UI Kit | 40+ Screens with Mapbox

RideKit: Flutter Carpooling & Ride-Sharing UI Kit | 40+ Screens with Mapbox
Noor Mohammad RahmaniJune 13, 2026
Production-ready carpooling & ride-sharing Flutter UI kit with 40+ handcrafted screens across 8 feature modules. Wise-inspired bright-green design language with a full token-based design system, Light & Dark themes, Mapbox maps, ride search & booking, publish-a-ride flow, chat, driver profiles, vehicle management, and a reusable Rk* component library. Built with Riverpod and GoRouter.

Complete Carpooling & Ride-Sharing Platform

RideKit is a comprehensive, production-ready Flutter UI kit purpose-built for carpooling, ride-sharing, and intercity ride-booking applications. With 40+ professionally crafted screens across 8 feature modules, RideKit gives you everything needed to launch a premium, sellable ride-sharing app in record time. Built with Riverpod state management, GoRouter navigation, and Mapbox Maps integration, RideKit delivers a complete ride-sharing ecosystem — from animated onboarding through ride search, booking, publishing, chat, and driver/vehicle management. Every screen follows a Wise-inspired design language: bright green on forest, dark-on-bright pill buttons, clean neutral greys, flat surfaces with 1px borders and no shadows.
40+Handcrafted Screens
8Feature Modules
33Named Routes
Purchase Now

🎯 What Makes RideKit Different

1. Wise-Inspired Premium Design Language

A bright green (#9FE870) fill on forest green (#163300) for text and interactive elements. Dark-on-bright pill CTAs, clean cool-neutral greys, flat surfaces with 1px borders and zero shadows. Modern, confident, and built to sell.

2. Token-Based Design System

Every color, type style, and spacing value is centralized in lib/core/constants. One edit re-themes the whole app. Theme-aware getters like AppColors.interactiveOf(context) keep bright green a fill color while text and icons use the correct readable accent in both Light and Dark mode.

3. Light & Dark Themes Out of the Box

A premium charcoal dark theme where bright green stays an accent pop, plus a clean white light theme — both fully wired in app_theme.dart with theme-aware color getters across every screen.

4. Interactive Mapbox Integration

Ride detail, booking detail, and a full-screen location picker use Mapbox with origin/destination routes. Each ride carries originLat/Lng + destLat/Lng. A styled map placeholder ships by default, so the kit runs out of the box before you add your token.

5. Complete Ride Lifecycle

End-to-end flows for both riders and drivers: search rides, view ride details, confirm a booking, publish your own ride, manage published rides, and chat with co-travelers — a full two-sided carpooling foundation.

6. Custom-Painted Brand Mark

The RideKit logo is a custom CustomPainter (RkLogo) — scales crisply at any size with no raster assets to bundle or export.

📱 Complete Feature Breakdown (40+ Screens)

🔐 Authentication & Onboarding (6 screens)

  • ✓ Splash Screen - Animated brand launch with custom-painted logo
  • ✓ Onboarding - Multi-slide intro carousel with pill CTAs
  • ✓ Login Screen - Email/password sign-in with social options
  • ✓ Register Screen - Account creation with validation
  • ✓ OTP Verification - Code entry with countdown timer
  • ✓ Forgot Password - Password recovery flow

🏠 Home & Navigation (5 screens)

  • ✓ Home Shell - 4-tab bottom nav (Home, Search, Messages, Profile) with center "Publish Ride" FAB
  • ✓ Home Tab - Greeting, quick search, recommended & upcoming rides
  • ✓ Search Tab - Discover rides entry point
  • ✓ Messages Tab - Conversations overview
  • ✓ Notifications - Grouped activity feed with ride & booking alerts

🔎 Search & Discovery (4 screens)

  • ✓ Search Screen - Origin/destination, date, seats with chip filters
  • ✓ Search Results - Ride list with price, time, driver & seat availability
  • ✓ Location Search - Searchable place picker for origin/destination
  • ✓ Ride Detail - Full ride info with Mapbox route, driver card, seats & price

🚗 Publish a Ride (4 screens)

  • ✓ Post Ride - Create a ride: route, date/time, seats, price, preferences
  • ✓ Ride Published - Success confirmation with shareable summary
  • ✓ My Rides - Driver's published rides (active / completed / cancelled)
  • ✓ Ride Manage - Manage a published ride, passengers & requests

🎫 Booking (3 screens)

  • ✓ Booking Confirm - Seat selection, price breakdown & confirm CTA
  • ✓ Booking Success - Animated confirmation with booking summary
  • ✓ Booking Detail - Booking info with Mapbox route, driver & status

💬 Chat (2 screens)

  • ✓ Chat List - Conversations with co-travelers and unread badges
  • ✓ Chat Conversation - Messaging interface with ride context header

👤 Profile & Vehicles (8 screens)

  • ✓ Profile - User overview, stats, verification & quick links
  • ✓ Edit Profile - Update name, photo, bio & contact details
  • ✓ Driver Profile - Public driver page with ratings & ride history
  • ✓ My Vehicles - Garage list of registered vehicles
  • ✓ Add Vehicle - Vehicle form: make, model, color, plate, seats
  • ✓ Vehicle Detail - Vehicle info and edit
  • ✓ Verify Profile - Identity & document verification flow
  • ✓ Reviews - Ratings and written reviews list

⚙️ Settings (2 screens)

  • ✓ Settings - Theme toggle, notifications & account preferences
  • ✓ Help & Support - FAQ and contact options

🗺 Maps (2 screens)

  • ✓ Location Picker - Full-screen Mapbox picker for pickup/dropoff
  • ✓ Route Map - Origin → destination route preview
All screens feature consistent flat styling, theme-aware Light/Dark colors, empty-state handling, and reusable widget patterns. Maps gracefully fall back to a styled placeholder until your Mapbox token is set, so the kit runs out of the box.

👥 Perfect For

🚗 Carpooling Apps
Build BlaBlaCar-style intercity carpooling platforms with ride search, publishing, seat booking, and co-traveler chat. 🚕 Ride-Sharing Services
Launch ride-sharing apps with driver profiles, vehicle management, live route maps, and booking flows. 🛣️ Intercity Ride Marketplaces
Create two-sided marketplaces connecting drivers with empty seats to passengers heading the same way. 🏢 Corporate & Campus Commute
Adapt for employee or campus ride-share programs with verified profiles and trusted ride networks.

⚙️ Technical Stack & Architecture

Framework & Language
  • Flutter SDK ^3.9.2 | Dart 3.x
  • Feature-first modular architecture
  • Light & Dark theme support
State Management
  • flutter_riverpod (v2.6.1) - Reactive state management
  • Theme provider for runtime Light/Dark switching
  • Clean separation of UI and data
Navigation & Routing
  • go_router (v14.8.1) - Declarative routing with deep linking
  • 33 named routes with path parameters (/ride/:rideId, /booking/:bookingId, /driver/:driverId)
  • Centralized route configuration in rk_router.dart
Maps & Location
  • mapbox_maps_flutter (v2.5.0) - Interactive ride & route maps
  • http (v1.6.0) - Mapbox Directions & Geocoding APIs
  • Location picker for pickup/dropoff
  • Styled map placeholder fallback until token is set
UI Components & Icons
  • hugeicons (v0.0.4) - Premium stroke icon pack
  • google_fonts (v6.2.1) - Inter typography, loaded at runtime (no asset bundling)
  • flutter_animate (v4.5.2) - Smooth micro-interactions
  • Custom-painted RkLogo brand mark
  • Reusable Rk* widget library
Image Handling
  • cached_network_image (v3.4.1) - Efficient image loading & caching
Utilities
  • intl (v0.20.2) - Date/time & currency formatting
  • device_preview (v1.2.0) - Multi-device testing
Platform Support
  • iOS 12.0+ | Android API 21+ (5.0)
  • Web (Chrome, Firefox, Safari, Edge)
  • Responsive across all screen sizes
Code Quality: Feature-first architecture with 8 modules, centralized design tokens in lib/core/constants, theme-aware color getters, GoRouter with 33 named routes, and zero backend dependency. Runs out of the box with mock data.

🎨 Design System

Color Palette (Wise-inspired)
  • Primary / Fill (#9FE870) - Bright green: buttons, selected states, FAB
  • Forest (#163300) - Text, icons, links & interactive foreground (light)
  • On-Primary (#163300) - Dark-on-bright button labels
  • Primary Light (#E9FAD9) - Tinted highlights & badges
  • Surface Light (#FFFFFF) - Card backgrounds
  • Scaffold Light (#F2F4F6) - Screen background
  • Surface Dark (#15181A) / Scaffold Dark (#090A0A) - Charcoal dark theme
  • Cool Neutral Ramp (neutral50 → neutral900)
  • Success (#2F8F4E) · Error (#A8200D) · Warning (#C8870E)
  • Star (#EDC843) · Seat Available (#9FE870) · Seat Booked (#A8200D)
Color Rule
Bright green is a fill color (buttons, selected states, FAB). Text, icons, and links use forest green (light) / bright green (dark) via AppColors.interactiveOf(context).
Typography (Inter)
  • Single neutral grotesque family — confident display sizes down to clean body & caption
  • Loaded at runtime via google_fonts, no asset bundling required
Spacing System
  • xs - 4px · sm - 8px · md - 12px · lg - 16px
  • xl - 20px · xxl - 24px · xxxl - 32px
  • Pill / fully-rounded buttons, flat surfaces, 1px borders, no shadows
Tokens live in: app_colors.dart, app_typography.dart, app_spacing.dart, app_theme.dart Shared Widget Library (Rk*)
  • RkButton — pill primary/outlined/text variants with loading state
  • RkTextField — styled input with icons & validation
  • RkRideCard / RkBookingCard / RkChatCard / RkReviewCard / RkUserCard — content cards
  • RkChip — filter & selection chips
  • RkAppBar / RkBottomNav / RkLayout — navigation & layout shells
  • RkMap — Mapbox wrapper with route rendering & placeholder fallback
  • RkLogo — custom-painted brand mark

🖼️ Screenshots

RideKit Flutter carpooling & ride-sharing UI kit showing ride search, ride detail with map, booking flow, publish ride, chat, and driver profile interfaces

Frequently Asked Questions

Is this a complete ride-sharing app?
RideKit includes 40+ production-ready UI screens across 8 feature modules with Riverpod state management and GoRouter navigation. This is a comprehensive UI/UX foundation. You'll need to integrate your backend API, authentication, Mapbox configuration, payment gateway, and real-time messaging.
Does it include dark mode?
Yes! Light and Dark themes are both fully wired in app_theme.dart with theme-aware color getters across every screen. Switch at runtime via the included theme provider. The dark theme uses a premium charcoal palette with bright green as an accent pop.
Does Mapbox require a paid account?
Mapbox offers a generous free tier perfect for MVP and early-stage apps. RideKit ships with a styled map placeholder so it runs out of the box. Add your public token in app_config.dart (or via --dart-define) to enable real maps for ride detail, booking detail, and the location picker.
Can I customize the bright green color scheme?
Absolutely! Edit the brand colors in app_colors.dart. The entire app uses a centralized token system, so one change re-themes all screens automatically while keeping the dark-on-bright design rule consistent.
Can I change the fonts?
Yes! RideKit uses Inter via google_fonts, loaded at runtime with no asset bundling. Swap the family in app_typography.dart and app_theme.dart to rebrand the typography instantly.
Can I use a different state management?
RideKit is built with Riverpod, but the clean feature-first architecture makes it easy to adapt. Replace Riverpod with Bloc, Provider, GetX, or any solution you prefer without UI refactoring.
Does it support publishing a ride, not just booking?
Yes! RideKit is two-sided. Drivers can publish a ride (route, date/time, seats, price, preferences), see a published confirmation, view My Rides, and manage passengers — alongside the full rider search and booking flow.
Is vehicle and driver management included?
Yes! There are dedicated screens for My Vehicles, Add Vehicle, Vehicle Detail, a public Driver Profile with ratings, profile verification, and a reviews list.
Can I change the demo cities and currency?
Yes! Demo data is US-based (cities, names, USD) in lib/data/mock/mock_data.dart. Each ride carries originLat/Lng + destLat/Lng for maps. Edit the mock file to localize cities, names, and currency.
Do I get future updates?
Yes! All future updates, new screens, features, bug fixes, and Flutter version upgrades are included with your one-time purchase. No subscription fees.

📦 Package Includes

✅ Complete Source Code
40+ handcrafted screens across authentication, home, search, publish-a-ride, booking, chat, profile/vehicles, and settings modules. ✅ Full Token-Based Design System
Centralized colors, Inter typography, and spacing tokens in lib/core/constants with theme-aware getters — re-theme the whole app from one place. ✅ Light & Dark Themes
Premium charcoal dark theme and clean light theme, fully wired with runtime switching via the included theme provider. ✅ Mapbox Integration
Interactive ride & route maps, a full-screen location picker, Directions/Geocoding wiring, and a styled placeholder fallback so it runs out of the box. ✅ Complete Ride Lifecycle
Search → ride detail → booking confirm → success, plus publish ride → published → my rides → manage, and co-traveler chat. ✅ Riverpod + GoRouter
Reactive state management and declarative routing with 33 named routes and deep-linkable path parameters. ✅ Reusable Rk* Components
RkButton, RkTextField, RkRideCard, RkBookingCard, RkChatCard, RkReviewCard, RkUserCard, RkChip, RkAppBar, RkBottomNav, RkMap, and the custom-painted RkLogo. ✅ Custom-Painted Brand Mark
RkLogo scales crisply at any size — no raster assets to bundle. ✅ Lifetime Updates
All future screens, components, features, bug fixes, and Flutter version upgrades included forever. ✅ Email Support
Setup assistance and integration guidance via Email ([email protected]).

🚀 Get Started Today

Purchase Now
Launch your carpooling platform in days, not months. RideKit provides 40+ handcrafted screens, a full token-based design system, Light & Dark themes, Mapbox maps, complete ride search, booking & publishing flows, chat, and vehicle management across 8 feature modules. Focus on your backend and business logic — the UI is ready. Start building today!