Similarly, copy the iOS key (auto created by Firebase) and Browser key (auto created by Firebase) from the Google Developers console and paste them into the iOS API Key and Web API Key fields in FlutterFlow respectively.Paste the key under Android API Key field. Navigate to the Settings and Integrations > Google Maps (under Integrations). Under API Keys, click SHOW KEY beside Android key (auto created by Firebase), and copy the key.Enable Maps SDK for Android, Maps SDK for iOS, Maps JavaScript API (required for testing maps in Run-mode of FlutterFlow), and Directions API (for drawing the routes on the map).Īdd the required credentials to FlutterFlow for using the GoogleMap widget:.Select the Maps category from the left menu.Select the correct Firebase project from the dropdown present on the top.Go to the Google Developers Console page.You need to configure Google Maps inside FlutterFlow before using the widget to display maps in your app.Įnable the required Maps APIs by following these steps: You are ready to store ride information on the database! 🎉 Configuring Google Maps This page is used for logging in the existing users to the rider app.įor the ride collection delete rule, use Tagged Users with user_uid as the field. Let's have a quick walkthrough of the different screens you will need for this app. This blog focuses on integrating a live tracking experience with the rider side of the app.
#Flutter device price driver#
The driver version of the app will be covered in a separate article. In this article, we'll only focus on the Rider App. After accepting the booking, the cab driver would be able to see the user's location and navigate to the pickup spot.
#Flutter device price drivers#
Driver App: Using this app, drivers can see the list of currently available bookings and will be able to accept a booking.
Once a driver accepts the booking, real-time updates of the driver's location will be previewed.
#Flutter device price update#
Today, you will learn to build RouteViewStatic and RouteViewLive custom widgets along with helper custom action to update the current location to Firestore. Background knowledgeįlutterFlow already has a widget called GoogleMap that allows you to interact with the map by zooming and panning, point out nearby locations (restaurants, gas stations, etc.) using markers, show traffic on the map, and also allows you to preview the map in various types (terrain, hybrid, satellite) and styles (standard, night, retro).īut as of now, the GoogleMap widget does not allow you to draw a route on the map and update it in real-time according to the changes in location data.įear not, here comes one of the major advantages of using a low code platform - you can write your custom code and just add it to the FlutterFlow project. You must be at least on the Standard Plan of FlutterFlow, which is required for downloading the app's source code.
0 kommentar(er)
