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.
Clone the flutterbase taxi application source code repository:
git clone https://github.com/SoftwareArchitect9817/flutterbase-taxi
cd flutterbase-taxi
Install Flutter dependencies
flutter pub get
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.
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
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.
After the state design was finalized, I had most pleasant time coding in Dart language :)
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. That's it. Source code is self explanatory, please refer to standard Flutter documentation. All components are well documented by the Flutter community.
Entire UI workflow fitted in just few lines of code located in the 'main.dart' file
// Get Current Location Provider
final locProvider = LocationProvider.of(context);
// Get Current Trip Provider
final currentTrip = TripProvider.of(context);
// if Current location is not known
if (!locProvider.isDemoLocationFixed)
// show Location Selection screen
return LocationScaffold();
// else if there is an Active Trip
if (currentTrip.isActive) {
// and if this trip is finished
return tripIsFinished(currentTrip.activeTrip!.status)
// show Rate the Trip screen
? tripFinishedScaffold(context)
// if not finished - show the trip in progress screen
: ActiveTrip();
}
// else if there is no active trip - display UI for new trip creation
return NewTrip();Below are some hints that might be helpful if you decide to go further:
Make sure you can efficiently handle GEO queries on the server side. Google Firestore requires some workarounds to use it properly.
Most payment gateways require user authorization on the native bank web UI. Test if you can integrate it with the Flutter Web View or Flutter deep links callback.
I would like to thank the entire Flutter team and its community for building such an amazing technology for developers. I really enjoy working with Flutter & Dart.
Calling all Flutter enthusiasts - connect me on LinkedIn :)