.
So...
What is that app about?
The app proposes sharing commute between drivers and passengers. A passenger can request a ride, and a driver can accept it. The app establishes this connection between the users, provides a map monitoring and calculates a ride price suggestion. It can be adapted to several contexts of use, as rides of families, friends and working colleagues.
.
Design & Develop time!What was used for developing Ride
.
In order to get some helpFlutter plugins used for developing Ride
.
Home.dart & SignUp.dartLogin & Sign up
.
Home.dart & SignUp.dart
Login & Sign up
_signUpNewUser is called if the form validation goes well, it saves the validated data on Firebase. It checks the user type and redirects to the corresponding panel using (used for login too).
.
Firebase
Users
Users stores email, name and user type of both passengers and drivers. An user ID is defined to each user, and it’s used to identify passenger and drivers in the requests.
.
DriverPanel.dart & Ride.dart
Passenger panel
.
PassengerPanel.dart & DrawerMenu.dart
Passenger panel
These two methods are called in the initState. They check if the user has an active request and the user position. The first one redirects the user to the correct screen, and the second gets geolocation information in real time.
.
PassengerPanel.dart & DrawerMenu.dart
Passenger panel
_StatusRideNotRequested is the default screen, that shows the user position and allows insert a destination address. When the passenger request a ride a dialog is shown to check if the place-mark address is correct.
.
Firebase
Requests
Passenger requests are stored with an ID. The request contains information about the origin and destination, and also the driver when the ride is accepted. A passenger can have more than one requests, but only one has status ‘waiting’, meaning active.
.
DriverPanel.dart & Ride.dart
Driver panel
.
DriverPanel.dart & Ride.dart
Driver panel
The driver panel uses de ID request to show requests with status waiting. After selecting a ride the _statusRideArriving is called, it updates the interface information and shows the position of both passenger and driver in the map.
.
DriverPanel.dart & Ride.dart
Driver panel
The users’ position are represented by markers, composed by a LatLng position, a BitmapDescriptor and a title. To center the visualization in a bounding box, the app check if the southwest.latitude <= northeast.latitude.
.
DriverPanel.dart & Ride.dart
Driver panel
When the driver arrives to the passenger position, the ride can be started and the origin position is set. At the destination, the ride can be finished and a suggestion of price is calculated based on the distance traveled.
.
Firebase
Active Requests
The active_requests_passengers contains the passengers requests, only requests with status waiting are presented in the driver’s panel. The request accepted by a driver is stored in active_requests_drivers during the ride.
.
Before goodbye
Demo & Final considerations
Flutter allowed me to achieve an aesthetic quality consistent with the chosen design language. As an UI designer, it was my favorite part of the project. Firebase was also a good choice because it was easy to configure in the project. As a first mobile project that I implemented, I believe I got a nice result for the first version of the app.
iOs emulator is running the Driver panel and Android emulator is running the Passenger panel
.
