Scribd
Upload
2 views11 pages

Quickbook Presentation Now

The document presents a prototype for a taxi booking app developed using Flutter, integrating Google Map Services for real-time tracking and fare estimation. Key features include easy booking, multiple payment options, and safety features, with a focus on user feedback and agile development. The app's architecture utilizes Firebase for backend support and employs a reactive UI structure for efficient development across Android, iOS, and web platforms.

Uploaded by

Rao Atif Mahmood
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views11 pages

Quickbook Presentation Now

The document presents a prototype for a taxi booking app developed using Flutter, integrating Google Map Services for real-time tracking and fare estimation. Key features include easy booking, multiple payment options, and safety features, with a focus on user feedback and agile development. The app's architecture utilizes Firebase for backend support and employs a reactive UI structure for efficient development across Android, iOS, and web platforms.

Uploaded by

Rao Atif Mahmood
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 11

QuickBook

Taxi booking App


PRESENTATION BY RAO ATIF MAHMOOD
ROLL NO : 85-E2
Flutterbase Taxi Booking App
• A large variety of apps depend on map services. The purpose of this
project was to test Google Map Services in connection with Flutter on
Android, iOS and Web platforms. Here is what I got:
• The Real taxi app requires development of a scalable server/cloud
side storage and logic, authentication, payments, a much more
complex workflow/state management, automated testing and
deployment, etc. This is just a proof of concept – the sources of this
prototype were not used in the production code.
Functions
•Easy Booking: Quickly request a ride with a few taps.

•Real-time Tracking: Track your driver's location and ETA.

•Fare Estimation: Know the estimated fare before booking.

•Multiple Payment Options: Pay with card, cash, or digital wallets.

•Ride History: View past rides and receipts.

•Driver Ratings: Rate your driver and provide feedback.

•Safety Features: SOS button, in-app messaging with driver. (If


applicable)
Technology Stack
• Power Fluttered by:
• Flutter Framework: Cross- Platform development for IOS and Android.
• Backend : Firebase.
• Maps Integration: Google Maps or Mapbox for location service.
• For Payment Gateway: Creadit,Debit,jazzxcash or Other providers
• Development process :
• Agile Methodology.
• Iterative development with continuous testing
• Focus on user feedback.
Prototype
Web and App
• Create Google Cloud API key with the following APIs enabled:
• Maps Javascript API
• Places API
• Directions API
• Geocoding API
• Replace the FLUTTERBASETAXI_API_KEY text placeholder with your Google API key in the
following files:
• lib/api/google_api.dart
• web/index.html
• Google Places APIs and Directions API cannot be used in browsers due to the CORS rules
violation. As a workaround I deployed a simple CORS proxy server running in the google cloud.
Path to this server s sored in ‘prodApiProxy’ variable declared in the ‘lib/api/google_api.dart’
file.
Android & iOS

• Replace the FLUTTERBASETAXI_API_KEY text placeholder with your


Google API key in the /ios/* and /android/* project folders, make sure
the following APIs are enabled:
• Maps SDK for Android
• Maps SDK for iOS
• Places API
• Directions API
• Geocoding API
Data Flow Diagram
Application Structure
• The reason I love Flutter is the beauty of its reactive UI nature. Once
you’ve designed an application state correctly, you can design UI at the
speed nearly exceeding the speed of light. Altogether, it took me a few
days starting from scratch to completing this project.
• The recommended way of keeping application state in Flutter is the
Provider Pattern. Once the key application screens were defined in
Figma, the reactive app state structure became obvious.
• Application structure is fairly straightforward and includes: Providers for
the app state, simple wrappers around the Google REST APIs, the Flutter
GoogleMap widget and the standard Material UI.
Application Structure
Source Code Documentation

You might also like