Skip to content

Fix CategoryScreen UI and scrolling issues #795

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mahmoudr80 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fix CategoryScreen UI and scrolling issues #795

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 51 additions & 49 deletions lib/views/screens/category_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,66 +19,68 @@ class CategoryScreen extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
automaticallyImplyLeading: true,//back button for user experience
centerTitle: true,
backgroundColor: Theme.of(context).colorScheme.surface,
elevation: 0,
title: Text(capitalizeFirstLetter(categoryName)),
),
body: Obx(
() => exploreStoryController.isLoadingCategoryPage.value
() => exploreStoryController.isLoadingCategoryPage.value
? Center(
child: SizedBox(
height: 200,
width: 200,
child: LoadingIndicator(
indicatorType: Indicator.ballRotate,
colors: [Theme.of(context).colorScheme.primary],
),
),
)
child: SizedBox(
height: 200,
width: 200,
child: LoadingIndicator(
indicatorType: Indicator.ballRotate,
colors: [Theme.of(context).colorScheme.primary],
),
),
)
: exploreStoryController.openedCategotyStories.isNotEmpty
? Padding(
padding: const EdgeInsets.only(top: 20.0),
child: ListView.builder(
physics: const NeverScrollableScrollPhysics(),
scrollDirection: Axis.vertical,
padding: EdgeInsets.zero,
shrinkWrap: true,
primary: true,
itemCount:
exploreStoryController.openedCategotyStories.length,
itemBuilder: (context, index) {
final int storyIndex = index;
return StoryListTile(
story: exploreStoryController
.openedCategotyStories[storyIndex],
);
},
),
)
padding: const EdgeInsets.only(top: 20.0),
child: ListView.builder(
physics: const NeverScrollableScrollPhysics(),
scrollDirection: Axis.vertical,
padding: EdgeInsets.zero,
shrinkWrap: true,
primary: true,
itemCount:
Comment on lines +44 to +49
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Mar 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 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.

exploreStoryController.openedCategotyStories.length,
itemBuilder: (context, index) {
final int storyIndex = index;
return StoryListTile(
story: exploreStoryController
.openedCategotyStories[storyIndex],
);
},
),
)
: Padding(
padding: const EdgeInsets.only(bottom: 150.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
height: 200,
width: 200,
AppImages.emptyBoxImage,
),
const SizedBox(height: 20),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 30.0),
child: Text(
AppLocalizations.of(context)!.noStoriesInCategory(
capitalizeFirstLetter(categoryName),
),
textAlign: TextAlign.center,
),
),
],
padding: const EdgeInsets.only(bottom: 150.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,// take the least size needed
Comment on lines +61 to +64
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Mar 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

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.

Suggested change
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.

children: [
Image.asset(
height: 200,
width: 200,
AppImages.emptyBoxImage,
),
const SizedBox(height: 20),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 30.0),
child: Text(
AppLocalizations.of(context)!.noStoriesInCategory(
capitalizeFirstLetter(categoryName),
),
textAlign: TextAlign.center,
),
),
],
),
),
),
);
}
Expand Down
Loading