Enhance Home Page UI #413 #415
Conversation
❌ Deploy Preview for aquamarine-kheer-83feda failed. Why did it fail? →
|
|
Thank you for submitting your pull request! We'll review it as soon as possible. |
There was a problem hiding this comment.
Pull Request Overview
This PR enhances the home page UI to create a more modern and visually appealing interface. The changes focus on improving design clarity, visual hierarchy, and user experience while maintaining existing functionality.
Key changes include:
- Added gradient header banner with rounded corners and introductory text
- Redesigned program option cards with gradient borders and improved styling
- Updated AppBar and FloatingActionButton styling with consistent white backgrounds and black accents
- Improved code formatting and removed excessive blank lines
Reviewed Changes
Copilot reviewed 3 out of 17 changed files in this pull request and generated 7 comments.
| File | Description |
|---|---|
| lib/home_page.dart | Major UI redesign with new header banner, gradient styling, and improved layout structure |
| lib/ChatBotPage.dart | Added white background to AppBar for consistency |
| .gradle/buildOutputCleanup/cache.properties | Updated build timestamp |
| final double appTextFontSize = ScreenUtil().setSp(20); | ||
| final double SizedSize = ScreenUtil().setHeight(20); | ||
| return Scaffold( | ||
| backgroundColor: Colors.white, |
There was a problem hiding this comment.
Hard-coded white background color doesn't respect the app's theme system. Consider using Theme.of(context).scaffoldBackgroundColor or a theme-aware color that adapts to dark/light mode.
| backgroundColor: Colors.white, | |
| backgroundColor: Theme.of(context).scaffoldBackgroundColor, |
| backgroundColor: Colors.white, | ||
| appBar: AppBar( | ||
| centerTitle: true, | ||
| backgroundColor: Colors.white, |
There was a problem hiding this comment.
Hard-coded white background color for AppBar doesn't respect the app's theme system. Consider using theme-aware colors that adapt to dark/light mode.
| backgroundColor: Colors.white, | |
| backgroundColor: Theme.of(context).appBarTheme.backgroundColor, |
| color: Colors.white, | ||
| ), | ||
| ), | ||
| Text('Find, learn, and contribute to global open-source initiatives.'), |
There was a problem hiding this comment.
This text lacks styling and color specification. Since it's inside a colored container, it should have explicit color styling to ensure readability, especially in different theme modes.
| Text('Find, learn, and contribute to global open-source initiatives.'), | |
| Text( | |
| 'Find, learn, and contribute to global open-source initiatives.', | |
| style: TextStyle( | |
| fontSize: ScreenUtil().setSp(14), | |
| color: Colors.white, | |
| ), | |
| ), |
| vertical: ScreenUtil().setHeight(12), | ||
| ), | ||
| decoration: BoxDecoration( | ||
| color: Colors.orange, // or any color you like |
There was a problem hiding this comment.
Hard-coded orange color doesn't follow theme-aware design. Consider using theme colors or defining this color in a theme/constants file for consistency and maintainability.
| color: Colors.orange, // or any color you like | |
| color: Theme.of(context).colorScheme.primary, // Use theme-aware color |
| padding: EdgeInsets.all(2), // Border thickness | ||
| decoration: BoxDecoration( | ||
| gradient: LinearGradient( | ||
| colors: [Colors.deepOrange, Colors.amber], |
There was a problem hiding this comment.
Hard-coded gradient colors don't follow theme-aware design. Consider defining these colors in a theme or constants file, and ensure they work well in both light and dark modes.
| colors: [Colors.deepOrange, Colors.amber], | |
| colors: isDarkMode | |
| ? [Colors.deepOrange.shade700, Colors.amber.shade700] | |
| : [Colors.deepOrange, Colors.amber], |
| child: Container( | ||
| padding: EdgeInsets.all(ScreenUtil().setWidth(10)), | ||
| decoration: BoxDecoration( | ||
| color: Colors.white, // Inner background (or transparent) |
There was a problem hiding this comment.
Hard-coded white background color doesn't respect the app's theme system. This will likely cause visibility issues in dark mode.
| color: Colors.white, // Inner background (or transparent) | |
| color: Theme.of(context).colorScheme.surface, // Inner background (theme-aware) |
| } | ||
|
|
||
|
|
||
| void navigateToScreen(BuildContext context, Program program) { |
There was a problem hiding this comment.
[nitpick] Extra whitespace after the opening brace should be removed for consistency with the rest of the codebase formatting.
1 participant
Summary
Revamps the UI of home_page.dart to deliver a more modern, engaging, and structured home screen. This update focuses on design clarity, usability, and visual polish, making the app's entry point more compelling.
Motivation
The previous layout was functionally sound but visually plain. This revamp aims to:
Create a stronger first impression
Improve UI consistency and spacing
Enhance accessibility and discoverability of features
Make the app feel more refined and production-ready
Key Changes
🔹 Added a gradient header banner with rounded corners and white text.
🔹 Introduced section subtitles and spacing for better visual grouping.
🔹 Improved ProgramOption cards with optional gradient borders.
🔹 Integrated ScreenUtil for responsive sizing across devices.
🔹 Maintained existing navigation logic with no functional regressions.
🔹 Updated search UX: optional AppBar search or preserved delegated search.