Cab booking, Taxi and Self Drive Car Renting Application

Thrifty Cab! Flutter UI Kit for Cab booking, Taxi and Self Drive Car Renting Application Documentation by Thriftysoft

  • Version: 1.6
  • Author: Thriftysoft
  • Created: 10 December, 2021
  • Update: 24th Feb, 2024

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email us at admin@thriftysoft.tech. You can also contact us via Skype Thanks so much!

Introduction

Thrifty Cab– This is a well-documented and coded UI kit for Online Cab booking / fleet Manager application, which can be used as a Taxi booking application, Fleet Manager Application, Cab Booking app and Self Drive Car Renting Application. It has more than 50 screens, widgets, empty states are given with different animations like Hero Animation, fade-in, pop-up, slide, etc. you can customize it as per your requirement. there are two application Included with the UI Kit – User Application & Driver application Since it is written in Flutter (Dart Language), so no need to write it separately for Android and IOS. The same code will be used for both platforms. The same code is used for iOS and Android.

This UI Kit is built with Flutter 2.12, which is an open-source mobile application development framework created by Google. It is used to develop applications for Android and iOS.

Features

  • Thrifty cab – Flutter App UI Kit can be connected easily with REST APIs or Firebase
  • It can be customized to Fleet manager applications, Cab booking Applications, Self-drive Renting Applications, etc.
  • Fully Responsive Screens
  • Ready to use UI for Android & iOS
  • It support Multilingual functionality, and hence can be translated into any language. just need to add a JSON File for the translation.
  • Entities and Models are ready to use.
  • Clean,organized and well documented Dart Language code.
  • Easy to restyle and change theme, as we have used global themes
  • Animations like Hero Animations,bounce and fade animations, Sliding and Swiping animations are integrated
  • Support skeleton Screens

Screens Included in ThriftyCab UI Kit

User Application

  • Splash Screen
  • Login Screen
  • Signup
  • Reset Password
  • OTP Verification
  • Select Option – Self Drive / Taxi Booking
  • Self Drive: Plan my Trip screen
  • Self Drive: Vehicle List
  • Self Drive: Vehicle Info Popup
  • Self Drive: Vehicle Detail Page
  • Self Drive: Booking Information
  • Self Drive: Personal Detail
  • Self Drive: Checkout Page
  • Self Drive: Booking success screen
  • Self Drive: Booking History
  • Self Drive: Booking History – Popup
  • Self Drive: Cancel Booking
  • Self Drive: Update Booking
  • Local Taxi Booking : Choose Pickup & Drop Location
  • Local Taxi Booking : Confirm Location
  • Local Taxi Booking : Choose your Cab
  • Local Taxi Booking : Searching for Cab
  • Local Taxi Booking : Driver & Cab Assigned
  • Outstation Taxi Booking : Choose your Cab & Date
  • Outstation Taxi Booking : Oneway & round Trip
  • Outstation Taxi Booking : Checkout
  • Taxi : Booking Detail Page
  • Taxi : My Trips with Filters
  • Post Review
  • Report Issue
  • View Report History
  • Track Vehicle
  • Account Section
  • My Profile
  • Edit Profile
  • Change password
  • Change Language
  • Terms and Condition
  • Privacy policy
  • About Us
  • Contact Us
  • Logout-popup
  • Empty State for No booking
  • Empty State for No Vehicle
  • Success Screen – For Post Feedback

Driver Application

  • Splash Screen
  • Login
  • Reset Password
  • Reset Password – Complete
  • Upcoming Ride
  • New Ride Popup
  • Ride Detail Page
  • Cancel Ride Popup
  • Start Ride with OTP
  • Complete ride
  • Ride History Page with Filters
  • Account Setting
  • Profile Setting
  • Personal information
  • KYC Information
  • Assigned Cab Detail
  • Terms and Condition
  • Privacy Policy
  • Change password
  • Logout

Installation

Thrifty Cab – This is a well-documented and coded UI kit for Online Cab booking / fleet Manager application, which can be used as a Taxi booking application,Fleet Manager Application, Cab Booking app and Self Drive Car Renting Application. It has more than 50 screens, widgets, empty states are given with different animations like Hero Animation, fade-in, pop-up, slide, etc. you can customize it as per your requirement. there are two application Included with the UI Kit – User Application & Driver application Since it is written in Flutter (Dart Language), so no need to write it separately for Android and IOS. The same code will be used for both platforms. The same code is used for iOS and Android.

Setting up Flutter Environment

Follow base on the operating system on which you are installing Flutter:

Getting Started

  • Download and unzip the package. You will find three folders i,e documentation, thriftycab-ui-kit and thriftycab-driver-ui-kit.
  • Use preferred IDE (Android Studio / Visual Code / IntelliJ) to open the project thriftycab-ui-kit and thriftycab-driver-ui-kit folder.
  • Update the API key ( Google Map API) in thriftycab-ui-kit/android/app/src/main/Androidmanifest.xml in Line 12.
  • Click to Get the dependencies or Packages to install the libraries from pubspecs.yaml file.
  • Open the simulator to run iOS or Android (as the step above)
  • Then press the run button to start project.

How to use

Read the details given below to know how you can reuse this UI kit in your own project. In the thriftycab-ui-kit directory you will find subdirectories lib and assets.


  1. Main File (thriftycab-ui-kit/lib/main.dart)

    2. The main file should contains global configuration (Title / Themes / Font Family / Colors...) of the App and initiates the initial route of the app. As of now, we have called some provider in mail.dart file,to show the mock data in the application. you can remove that when working on your application



  2. Models (thriftycab-ui-kit/lib/models)

    3. In this directory thriftycab-ui-kit/lib/models You will find all models used in the App.


    Vehicle Model

    vehicle_model.dart> This model has a sample class with variables to form a model for a Vehicle. It is reusable and scalable.

    HTML Structure
  3. Provider (thriftycab-ui-kit/lib/provider)

    4. This directory hold some common provider, used in the Application like auth_provider, booking_provider>, home_provider, track_provider, These are used to fetch the data from the mock json files (thriftycab-ui-kit/assets/json), and show to the pages. you can Add API calls to integrate it with your backend

    HTML Structure
  4. Service.dart (thriftycab-ui-kit/lib/service.dart)

    5. This directory hold service file, where right now, we have fetched data from local JSON, but if you want to integrate your own backend, you can use API calls

    HTML Structure
  5. Screens (thriftycab-ui-kit/lib/screens)

    6. These are the Screen available in thriftycab-ui-kit/lib/screens, ready to be used in your app. these includes login, signup, reset password, choose city and address, list of taxi, taxi detail page, book cab, book fleet, checkout, personal info page, booking history, booking detail page etc and much more.

    HTML Structure

    home_page.dart

    This file provides a class which holds an impressive Homepage ui, which has the list of Vehicles ( Cabs).


  6. Additional Components

    7. In the directory thriftycab-ui-kit/assets/icons there are all svg icons used inside the UI KIT.

    HTML Structure

    In the directory thriftycab-ui-kit/assets/images there are all Images and Illustrstions used inside the UI KIT. These assets are subject to copyright and only for demonstration purposes, Use your own assets in production

    HTML Structure

    In the directory thriftycab-ui-kit/assets/json there are all Dummmy Data, we have saved in the form of JSON, to give better experience to the UI Kit. You can remove these JSONs, when integrating with backend

    HTML Structure

    In the directory thriftycab-ui-kit/assets/logo this directory contains logo of the application

    HTML Structure

    In the directory thriftycab-ui-kit/assets/sounds this directory contains sounds effect which is included in the UI kit. you can add more sounds as per your need. These assets are subject to copyright and only for demonstration purposes, Use your own assets in production

    HTML Structure

    In the directory thriftycab-ui-kit/assets/translations this directory contains the translation of the labels used inside the application. right now application is translated in two language, but anytime you can create as many as you need.

    HTML Structure

Build & Install the App

  1. After you make all your changes and customizations save the project.
  2. Open Console, navigate to your project folder
  3. In thriftycab-ui-kit/lib/utils/, create a new file name api_keys.dart and copy the content of api_keys_example.dart. and Replace API Keys Value ( For Google Maps, Razorpay etc)
  4. Run flutter pub get to install all dependencies
  5. Run flutter build apk --release you should get the apk file in the /output folder
  6. Run flutter install to install your application on your connected device

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Changelog

See what's new added, changed, fixed, improved or updated in the latest versions.

Version 1.0 (22 Jan, 2022) 

- Initial Release

Version 1.1 (14 Feb, 2022) 

 
- Additional Screen in User Application
- Local & Outstation Taxi Booking
- Driver Application UI Kit Included

Version 1.2 (11 May,2022) 

 
- Bug Fixes
- Android Manifest Bug Fix

Version 1.3 (07 August,2022) 

 
- Package Version Issue Fix
- UI Fix

Version 1.4 (4th February,2023) 

 
- All package updated
- Dart version updated
- Enhanced compatibility with android 13
- Autofill for various text fields
- Resolved issue with documents in profile (Customer UI Kit)
- User can now directly call the driver by clicking call button(Customer UI Kit)
- User can now access full details of the driver's car(Customer UI Kit)
- Loading shimmers for images (Driver UI Kit)
- Driver will now get a qr on ride completion to accept payment on his id if the payment mode is cash(Driver UI Kit)
- Lazy loading for rides and trips (Driver UI Kit)

Version 1.5 (12th July,2023) 

 
- Fixed gradle version, kotlin issues
- Package upgrades
- Added pull to refresh in my trips page
- Fixed instant logout issue
- Added Null safety dummy content for variables(if the values are null)
- Issue of routing after cancelling the booking fixed
- Added on user interaction validation of text fields
- Added tooltips for icons

Version 1.6 (24th Feb,2024) 

 
- Flutter version upgrade to 3.16.4
- Dart version upgrade to 3.2.3
- All package upgrade
- Replaced deprecated memeber use for SVG package
- Upgrade the app to material 3
- Added the color to know which filter is selected in My Trips page
- Added Shimmer on pull to refresh
- Added Image compression in uploading documents
- Added the option to copy booking id from the booking details
- Added the button to give customer option to track the ride from the detail page
- Improved the Text field validations and error handling

For any query & customization, reach out us at admin@thriftysoft.tech

Backend Available

Admin Poster

Thrifty Software Offer Complete Backend Solution for Cab Booking Application, built with Nodejs, Mongdb and MVC Architecture. On request, we can also provide the same solution in PHP and Firebase.

Deliverable

  1. Complete Backend Source code in Nodejs ( REST API + Admin Panel with UI)
  2. Mobile App ( User & Driver) - Integrated with REST APIs
  3. Application reskinning ( Changing Logo, font, Color)
  4. Crashlytics & Publishing on Playstore
  5. Crashlytics & Publishing on Appstore

We can also do Customization as per user's requirement . Please contact us at admin@thriftysoft.tech. or ping us here skype