Al Sadat Delivery Rider App Frontend

Al Sadat Rider: Delivery Rider App for Al Sadat Super Mart Overview Al Sadat Rider is a mobile app for the delivery riders of Al Sadat Super Mart. It brings a rider’s whole working day into one app: identity verification, shift booking, order handling, cash collection, earnings and account status. I built the complete frontend in Flutter, including the interaction design and light and dark themes. Another developer built the backend and connected it to these screens.

My role: Frontend development, components and interaction design: screen implementation, interaction patterns, navigation, theming and the reusable component layer. Stack: Flutter (Dart) Scope: 20 screens covering the rider journey from login to payout, in light and dark themes

The challenge Riders use the app on the move and often one-handed. The workflow has many steps and rules: verify identity, accept an order, pick up, reach the customer, collect cash, prove delivery, get paid. The app had to keep each step clear and block costly mistakes like accidental acceptance or completing a delivery without proof.

Sign-in and verification: Rider ID login with validation, followed by face verification before a shift. The camera screen has a full-width circular guide, a retry flow and an attempts counter.

Home dashboard: Online/offline status, today’s earnings with a breakdown (trip pay, peak bonus, rain surge), a rain-mode surge banner, the active slot with its multiplier, weekly incentive progress and quick actions.

Slots and incentives: Weekly slot booking with Free, Peak and Booked states and earnings multipliers. Incentives are split into ongoing and completed, with per-goal progress.

Order flow: Incoming order with a countdown and slide-to-accept, order detail (items, customer contact, cash-on-delivery or paid-online banner), pickup confirmation, an en-route screen with distance to the customer, then drop-off with cash and change handling and a mandatory proof photo. A “customer not available” path guides the rider through calling, chat and WhatsApp.

Batch orders: Multiple orders handled in sequence, where each one unlocks only after the previous is picked.

Money and account: Wallet with a low-balance warning, payment history grouped by day, a trip earnings summary after each delivery, rider profile with document verification status, account restriction details, and an inbox with All, To Do and Alerts.

Slide-to-confirm on high-stakes actions (accepting an order, marking arrival) to prevent accidental taps.

Gated steps: arrival, proof photo and batch order sequence control when the next action unlocks.

Light and dark themes: a theme toggle on the home screen, with both themes carried across the app.

Consistent interface: one blue brand palette, a single rounded icon set, and focus feedback across buttons, cards, tabs, navigation and links.

Separation of UI and data: reusable widgets kept apart from screen logic, which made it straightforward for the backend developer to connect live data.