Fix CategoryScreen UI and scrolling issues#795
Fix CategoryScreen UI and scrolling issues#795mahmoudr80 wants to merge 1 commit intoAOSSIE-Org:masterfrom
Conversation
|
🎉 Welcome @mahmoudr80!
We appreciate your contribution! 🚀 |
📝 WalkthroughWalkthroughUpdated CategoryScreen's AppBar to display the back button and center the title, restructured the Obx builder's conditional logic formatting, and adjusted the empty-state Column layout by adding mainAxisSize sizing constraints for improved UX. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@lib/views/screens/category_screen.dart`:
- Around line 61-64: Replace the fixed Padding bottom: 150.0 used around the
Column with a responsive layout: remove the hard-coded EdgeInsets.only(bottom:
150.0) and instead wrap the Column (the widget using mainAxisAlignment:
MainAxisAlignment.center and mainAxisSize: MainAxisSize.min) in a Center and/or
SafeArea, or use Expanded/Spacer inside a parent Column or a
LayoutBuilder/MediaQuery-driven padding so empty-state content is vertically
centered on all screen sizes; update the widget (the Padding/Column in
category_screen.dart) to use one of these responsive approaches rather than a
fixed bottom offset.
- Around line 44-49: The ListView in CategoryScreen currently disables user
scrolling by using physics: NeverScrollableScrollPhysics() and also sets
shrinkWrap: true and primary: true which together prevent proper scrolling;
update the ListView configuration in the CategoryScreen widget by removing or
changing the physics to allow user scrolling (e.g., null or a scrollable
physics), set primary to false (or remove it) and remove or set shrinkWrap to
false so the list can scroll normally; adjust only the ListView properties
(physics, shrinkWrap, primary) in the build method where itemCount is defined.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 9d8dad22-4317-4b7e-b6fe-a07bccc6fcdf
📒 Files selected for processing (1)
lib/views/screens/category_screen.dart
| physics: const NeverScrollableScrollPhysics(), | ||
| scrollDirection: Axis.vertical, | ||
| padding: EdgeInsets.zero, | ||
| shrinkWrap: true, | ||
| primary: true, | ||
| itemCount: |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify whether CategoryScreen still disables primary list scrolling.
fd category_screen.dart --exec rg -n -C2 'NeverScrollableScrollPhysics|shrinkWrap:\s*true|primary:\s*true' {}Repository: AOSSIE-Org/Resonate
Length of output: 463
Story list is configured to not scroll and will prevent scrolling regressions from being fixed.
Line 44 sets NeverScrollableScrollPhysics(), which disables user scrolling on this ListView. Combined with shrinkWrap: true and primary: true (lines 47-48), this configuration prevents the list from scrolling even if the parent container allows it. This directly conflicts with fixing scrolling regressions.
Suggested fix
- child: ListView.builder(
- physics: const NeverScrollableScrollPhysics(),
+ child: ListView.builder(
scrollDirection: Axis.vertical,
padding: EdgeInsets.zero,
- shrinkWrap: true,
- primary: true,
+ // default scroll behavior for primary content list
itemCount:
exploreStoryController.openedCategotyStories.length,🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@lib/views/screens/category_screen.dart` around lines 44 - 49, The ListView in
CategoryScreen currently disables user scrolling by using physics:
NeverScrollableScrollPhysics() and also sets shrinkWrap: true and primary: true
which together prevent proper scrolling; update the ListView configuration in
the CategoryScreen widget by removing or changing the physics to allow user
scrolling (e.g., null or a scrollable physics), set primary to false (or remove
it) and remove or set shrinkWrap to false so the list can scroll normally;
adjust only the ListView properties (physics, shrinkWrap, primary) in the build
method where itemCount is defined.
| padding: const EdgeInsets.only(bottom: 150.0), | ||
| child: Column( | ||
| mainAxisAlignment: MainAxisAlignment.center, | ||
| mainAxisSize: MainAxisSize.min,// take the least size needed |
There was a problem hiding this comment.
Avoid fixed bottom: 150 for empty-state positioning.
Line 61 hard-codes vertical offset, which can look misaligned on smaller/larger screens. Use centering/safe-area-driven layout instead for responsive behavior.
Suggested fix
- : Padding(
- padding: const EdgeInsets.only(bottom: 150.0),
- child: Column(
+ : Center(
+ child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,// take the least size needed
children: [📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| padding: const EdgeInsets.only(bottom: 150.0), | |
| child: Column( | |
| mainAxisAlignment: MainAxisAlignment.center, | |
| mainAxisSize: MainAxisSize.min,// take the least size needed | |
| : Center( | |
| child: Column( | |
| mainAxisAlignment: MainAxisAlignment.center, | |
| mainAxisSize: MainAxisSize.min,// take the least size needed |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@lib/views/screens/category_screen.dart` around lines 61 - 64, Replace the
fixed Padding bottom: 150.0 used around the Column with a responsive layout:
remove the hard-coded EdgeInsets.only(bottom: 150.0) and instead wrap the Column
(the widget using mainAxisAlignment: MainAxisAlignment.center and mainAxisSize:
MainAxisSize.min) in a Center and/or SafeArea, or use Expanded/Spacer inside a
parent Column or a LayoutBuilder/MediaQuery-driven padding so empty-state
content is vertically centered on all screen sizes; update the widget (the
Padding/Column in category_screen.dart) to use one of these responsive
approaches rather than a fixed bottom offset.
1 participant
Description
Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.
Fixes # (issue)
Type of change
Please delete options that are not relevant.
How Has This Been Tested?
Result
All test cases passed successfully. UI behaves as expected across different screen sizes.
Please include screenshots below if applicable.
Checklist:
Maintainer Checklist
Summary by CodeRabbit
UI/Style
Bug Fixes