A pixel-inspired, non-commercial Flutter clone of the Uber rider app UI.
This is NOT an official Uber product. It is a personal project built for learning and portfolio purposes only.
I have always been impressed by how clean and restrained the Uber rider app feels, so I decided to study it properly. Instead of only looking at screenshots, I rebuilt the interface screen by screen in Flutter and treated every color, spacing value, and typeface choice as a small design exercise.
The result is not a one-to-one copy. Some screens were simplified, some flows were reimagined, and everything runs on local mock data. What matters is that each screen stays faithful to the original look while the code underneath stays simple enough to read and learn from.
Disclaimer: This project is intended solely for educational and portfolio purposes. It is not affiliated with, endorsed by, or connected to Uber Technologies Inc. in any way. No real data, API, or backend services from Uber are used. All trademarks, logos, icons, and visual assets belong to their respective owners.
The project recreates 8 screens, all shown below:
- Splash
- Welcome
- Login
- Home
- Services
- Activity
- Activity Filters (bottom sheet)
- Account
| Splash | Welcome | Login | Home |
 |
 |
 |
 |
| Services | Activity | Activity Filters | Account |
 |
 |
 |
 |
- Splash screen with a branded launch sequence into the welcome flow
- Welcome screen presenting the sign-in entry point
- Login screen with a country selector (flag emoji and dialing code) and phone number input
- Home tab with search bar, service circles, and promo banner
- Services tab
- Activity tab with ride history cards
- Activity filter bottom sheet in a dark theme
- Account tab with action grid, Uber One card, CO2 savings card, and the settings menu list
- Floating pill bottom navigation (Accueil, Services, Activité, Compte) with an animated active indicator
- Custom typography using the Uber Move and Uber Move Text families, from Light up to Bold
- Light and dark surface tokens carefully matched against the original app
The codebase follows a feature-first structure. Shared building blocks live under core/, and every product area lives in its own feature folder with its own pages, widgets, models, and controllers. This keeps each screen self-contained and makes it easy to find exactly where a UI piece is implemented.
lib/
├── core/
│ ├── constants/ # All UI strings centralized (French locale)
│ ├── theme/
│ │ ├── app_colors.dart # Color tokens for light and dark surfaces
│ │ ├── app_typography.dart # Type scale built on Uber Move fonts
│ │ └── app_theme.dart # Global MaterialApp theme
│ └── widgets/
│ ├── uber_button.dart # Primary / secondary button variants
│ ├── uber_input.dart # Phone and boxed input styles
│ └── or_divider.dart # "ou" separator used on auth screens
├── features/
│ ├── auth/
│ │ ├── controller/ # AuthController (ChangeNotifier form state)
│ │ ├── data/ # Country dataset (name, ISO code, dial code)
│ │ ├── models/ # Plain Dart models
│ │ ├── pages/ # Auth flow pages plus the logged-in home shell
│ │ └── widgets/ # Login building blocks (country picker, phone input)
│ └── tabs/ # Home, services, activity, account tabs
└── main.dart # App entry point and auth flow wiring
- State management: plain Flutter. A lightweight
AuthControllerextendsChangeNotifierand handles phone field validation plus continue hooks. No external state library is needed at this scale. - Navigation: the splash, welcome, and login screens are wired as a small step machine inside
AuthFlow. Once authenticated,pushAndRemoveUntilswaps the stack for the logged-in home shell, and logging out pops back and resets form state. - Tab shell: the four main tabs live in one
PageViewdriven by the floating pill bar, with swiping disabled throughNeverScrollableScrollPhysics. The pill indicator animates with a short delay after the page settles, and the whole bar hides on scroll down and reappears on scroll up through scroll notifications. - Design tokens: colors and text styles have a single home in
core/theme, keeping the shared surfaces consistent across screens instead of scattering values through the widget tree. - Country picker: flags are generated at runtime from ISO 3166 alpha-2 codes using regional indicator symbols, so no flag artwork is bundled at all.
- Centralized strings: the auth flow labels live in
core/constants/app_strings.dart, keeping the French locale consistent across the sign-in experience. - SVG rendering through
flutter_svgkeeps icons crisp at every density without bundling raster assets.
| Technology | Purpose |
|---|---|
| Flutter | Cross-platform UI framework |
| Dart | Programming language |
| ChangeNotifier | Built-in state management for the auth flow |
| flutter_svg | SVG rendering |
| url_launcher | Opening external links |
| Uber Move fonts | Custom typography matching the original app |
- Flutter SDK 3.x or later
- An Android emulator, or a physical device
- Android Studio or VS Code with the Flutter extensions
# Clone the repository
git clone https://github.com/abidiahmedcom/uber-ui-practice.git
# Navigate to the project directory
cd uber_ui
# Install dependencies
flutter pub get
# Run the app
flutter runThis is a UI-only project with no backend integration. Here is where it differs:
| Aspect | Original Uber | This Clone |
|---|---|---|
| Backend / API | Full production backend | Not present, static UI only |
| Payments | Real payment processing | Not implemented |
| Live tracking | Real-time driver tracking | Not implemented |
| Authentication | Real phone and email auth | UI only, fake-data bypass |
| Data | Live trip and account data | Static mock data |
| Screens | 100+ screens | 8 key screens recreated |
Feedback and ideas are always welcome. If you spot something that could match the original app better, feel free to open an issue or a pull request.
- Fork the project
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
Source code is released under the MIT License. The bundled visual assets (icons, images, fonts) are not covered by this license and remain the property of their respective owners.
- Uber for the design inspiration
- Flutter for the framework
- flutter_svg for SVG support
Made with Flutter, for learning purposes only. Not affiliated with Uber.