UI/UX Overhaul for Existing Flutter LMS App – Modern Glassmorphism Style & Reusable Design System
Budget: $30 – $250 USD
Project Description:
We are looking for a talented Flutter UI/UX developer to redesign an existing Learning Management System (LMS) application. The app is fully functional and connected to a PHP backend, but the current design is traditional/outdated.
Our Goal: Transform the app into a High-End, Modern Glassmorphism Design (translucency, blur effects, vivid gradients) and create a Scalable UI Kit for future development.
Scope of Work:
1. The Design Style (Glassmorphism):
Move away from standard Material Design cards.
Implement frosted glass effects, vibrant background gradients, and modern typography.
Ensure the design is responsive and readable (Arabic RTL support is essential).
2. Scalability (The "CSS-like" Requirement):
Crucial: We do not just want hardcoded styles in every file.
You must create a Global App Theme and a Custom Widget Library (e.g., GlassContainer, GlassButton, GlassTextField, PrimaryHeader).
Goal: When we create a new page in the future, we should simply call your custom widgets (classes) to inherit the exact same design instantly, similar to how CSS classes work in web development.
3. The Redesign Task: You will apply this new design to approximately 30+ Screens. You need to refactor the build methods without breaking the existing business logic or API integrations.
Technical Overview (For Estimation):
Current Code Structure:
The app is built with Flutter.
State Management: Mostly setState and FutureBuilder.
Logic is currently mixed within the UI files (we expect you to clean up the UI part mainly).
Navigation: Standard Navigator.push.
Current Libraries (Dependencies): We are using standard libraries that you will need to style or maintain:
http (for API calls).
flutter_svg (for icons/images).
shimmer (for loading states).
flutter_staggered_animations (for list animations).
webview_flutter (for payment gateways).
video_player / chewie (implied for course player).
Screen Categories (Approx. 30 Screens):
Auth: Login, Register, Splash.
Dashboard: Home (Widgets + Timeline), Subject Dashboard, Notifications.
Learning: Course Details, Video Player, Homework Details, Pending Homeworks.
Exams: Exam List, Exam Start (Rules), Taking Exam (MCQ/Questions), Exam Results.
Communication: Conversations List, Private Chat, Group Chat, New Message.
Financial: Subscriptions List, Invoice Details, Payment Methods (Webview), Payment Proof Upload.
Profile: Account Details, Edit Profile.
Deliverables:
Source Code: Refactored .dart files with the new UI.
UI Kit Folder: A separate folder containing the reusable Glassmorphism widgets.
Assets: Any new fonts or images used.
Requirements:
Strong portfolio showcasing Glassmorphism or highly customized UI in Flutter.
Experience with Arabic (RTL) layouts.
Ability to separate UI code from Logic code.
We are looking for a talented Flutter UI/UX developer to redesign an existing Learning Management System (LMS) application. The app is fully functional and connected to a PHP backend, but the current design is traditional/outdated.
Our Goal: Transform the app into a High-End, Modern Glassmorphism Design (translucency, blur effects, vivid gradients) and create a Scalable UI Kit for future development.
Scope of Work:
1. The Design Style (Glassmorphism):
Move away from standard Material Design cards.
Implement frosted glass effects, vibrant background gradients, and modern typography.
Ensure the design is responsive and readable (Arabic RTL support is essential).
2. Scalability (The "CSS-like" Requirement):
Crucial: We do not just want hardcoded styles in every file.
You must create a Global App Theme and a Custom Widget Library (e.g., GlassContainer, GlassButton, GlassTextField, PrimaryHeader).
Goal: When we create a new page in the future, we should simply call your custom widgets (classes) to inherit the exact same design instantly, similar to how CSS classes work in web development.
3. The Redesign Task: You will apply this new design to approximately 30+ Screens. You need to refactor the build methods without breaking the existing business logic or API integrations.
Technical Overview (For Estimation):
Current Code Structure:
The app is built with Flutter.
State Management: Mostly setState and FutureBuilder.
Logic is currently mixed within the UI files (we expect you to clean up the UI part mainly).
Navigation: Standard Navigator.push.
Current Libraries (Dependencies): We are using standard libraries that you will need to style or maintain:
http (for API calls).
flutter_svg (for icons/images).
shimmer (for loading states).
flutter_staggered_animations (for list animations).
webview_flutter (for payment gateways).
video_player / chewie (implied for course player).
Screen Categories (Approx. 30 Screens):
Auth: Login, Register, Splash.
Dashboard: Home (Widgets + Timeline), Subject Dashboard, Notifications.
Learning: Course Details, Video Player, Homework Details, Pending Homeworks.
Exams: Exam List, Exam Start (Rules), Taking Exam (MCQ/Questions), Exam Results.
Communication: Conversations List, Private Chat, Group Chat, New Message.
Financial: Subscriptions List, Invoice Details, Payment Methods (Webview), Payment Proof Upload.
Profile: Account Details, Edit Profile.
Deliverables:
Source Code: Refactored .dart files with the new UI.
UI Kit Folder: A separate folder containing the reusable Glassmorphism widgets.
Assets: Any new fonts or images used.
Requirements:
Strong portfolio showcasing Glassmorphism or highly customized UI in Flutter.
Experience with Arabic (RTL) layouts.
Ability to separate UI code from Logic code.