Category responsive + fix scrollable

[mahmoudr80]

Description

This pull request fixes UI and usability issues in the CategoryScreen.

Fixed a critical issue where the ListView was not scrollable due to incorrect configuration (NeverScrollableScrollPhysics, shrinkWrap, and primary used together).
Improved layout responsiveness by removing hard-coded bottom padding (150.0) and replacing it with a centered layout for better adaptability across different screen sizes.

These changes improve user experience, ensure proper scrolling behavior, and make the UI responsive on all devices.

Fixes # (issue)

Type of change

Please delete options that are not relevant.

• [o] Bug fix (non-breaking CHANGE which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [o] Refactor (does not change functionality, e.g. code style improvements, linting)
• Documentation update

How Has This Been Tested?

Ran the application on emulator and verified:
The list of stories scrolls correctly.
No scrolling issues occur when the list is long.
Tested empty state:
Verified that the empty-state UI is properly centered on different screen sizes.
Tested on multiple screen sizes using responsive tools (flutter_screenutil).

Steps to reproduce:

Open the app
Navigate to CategoryScreen
Verify:
Stories list scrolls normally
Empty state appears centered when no data is available

Checklist:

• [o] My code follows the style guidelines of this project
• [o] I have performed a self-review of my own code
• [o] I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• [o] My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• [o] New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules
• [o] I have checked my code and corrected any misspellings

Maintainer Checklist

• [o] closes Category responsive + but scrollable #796
• Tag the PR with the appropriate labels

Summary by CodeRabbit

• New Features

  • App now initializes a global responsive scaling system for consistent layout across devices.

• Improvements

  • Enabled default back navigation and centered category screen titles.
  • Made list rendering more natural for story feeds.
  • Improved empty-state and loading visuals with responsive sizing and spacing.

[github-actions]

🎉 Welcome @mahmoudr80!
Thank you for your pull request! Our team will review it soon. 🔍

• Please ensure your PR follows the contribution guidelines. ✅
• All automated tests should pass before merging. 🔄
• If this PR fixes an issue, link it in the description. 🔗

We appreciate your contribution! 🚀

[coderabbitai]

Warning

Rate limit exceeded

@mahmoudr80 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 1 minutes and 25 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 97b87125-116a-4e32-898e-4aea777ecb36

📥 Commits

Reviewing files that changed from the base of the PR and between b4652bb and 210808f.

📒 Files selected for processing (1)

• lib/views/screens/category_screen.dart

📝 Walkthrough

Walkthrough

CategoryScreen and app entrypoint updated for responsive layout: added flutter_screenutil, wrapped GetMaterialApp with ScreenUtilInit, adjusted AppBar, enabled default back button, converted fixed sizes/paddings to ScreenUtil-scaled values, removed non-scrollable ListView constraints, and restructured the empty-state layout for centered, responsive presentation.

Changes

Cohort / File(s)	Summary
Category screen UI lib/views/screens/category_screen.dart	Enabled default back button and centered title on AppBar; replaced fixed sizes/paddings with flutter_screenutil scaled values (e.g., .h, .w); removed NeverScrollableScrollPhysics, shrinkWrap, and primary from the stories ListView to restore normal scrolling; refactored empty-state layout to Center + Column(mainAxisSize: MainAxisSize.min) and scaled image/spacers.
App initialization (ScreenUtil) lib/main.dart	Wrapped the app with ScreenUtilInit (set designSize, minTextAdapt, splitScreenMode) and moved the existing Obx/GetMaterialApp builder inside ScreenUtilInit's builder.
Dependency pubspec.yaml	Added flutter_screenutil: ^5.9.3 dependency to enable responsive sizing APIs used in the code.

Sequence Diagram(s)

(omitted)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐇✨ I hopped through pixels, nudged paddings light,
Freed lists to scroll on each morning and night.
With scaled little hops and a centered display,
Stories now bounce on devices that sway. 📱🥕

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main changes: making the category screen responsive and fixing the scrollable ListView issue.
Linked Issues check	✅ Passed	The pull request successfully addresses both issues #796 requirements: removes scrolling-disabling ListView configuration and implements responsive empty-state layout using flutter_screenutil.
Out of Scope Changes check	✅ Passed	All changes (flutter_screenutil dependency, responsive sizing, ListView fixes, ScreenUtilInit wrapper) are directly related to the stated objectives of fixing scrolling and improving responsiveness.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

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 58-63: The empty-state currently uses a fixed bottom padding
(EdgeInsets.only(bottom: 150.0.h)) and Column with mainAxisSize:
MainAxisSize.min which prevents true vertical centering; remove the hard-coded
bottom padding, set the Column's mainAxisSize to MainAxisSize.max (or wrap the
Column in a Center/SizedBox.expand), and keep mainAxisAlignment:
MainAxisAlignment.center so the children are vertically centered on all screen
sizes (update the Padding/Column usage shown around EdgeInsets.only(bottom:
150.0.h), Column, mainAxisAlignment and mainAxisSize).

In `@pubspec.yaml`:
- Line 32: The app root is not initializing ScreenUtil, so responsive extensions
(.w/.h) will be invalid; update the widget tree in main.dart by wrapping the
existing GetMaterialApp with ScreenUtilInit (from flutter_screenutil) and pass
an appropriate designSize (e.g., Size(375, 812) or your chosen mockup
dimensions) plus the builder that returns the GetMaterialApp so ScreenUtil is
available app-wide; ensure imports include flutter_screenutil and remove any
duplicate MaterialApp/GetMaterialApp instantiation if necessary.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 5db68514-323d-44a1-b93c-cbe7cfe9997f

📥 Commits

Reviewing files that changed from the base of the PR and between bf1dbe2 and b8523af.

📒 Files selected for processing (2)

• lib/views/screens/category_screen.dart
• pubspec.yaml