Skip to content

Fix flutter screen util#798

Open
mahmoudr80 wants to merge 6 commits intoAOSSIE-Org:masterfrom
mahmoudr80:fix_flutter_screen_util
Open

Fix flutter screen util#798
mahmoudr80 wants to merge 6 commits intoAOSSIE-Org:masterfrom
mahmoudr80:fix_flutter_screen_util

Conversation

@mahmoudr80
Copy link
Copy Markdown

@mahmoudr80 mahmoudr80 commented Mar 26, 2026

Description

make CategoryScreen responsive.
use package flutter_screenutil correctly for responsiveness
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).

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

Summary by CodeRabbit

  • New Features

    • Implemented responsive design system to optimize app layout across various screen sizes and orientations.
  • UI/UX Improvements

    • Added back button to category screen navigation bar and centered the title for better usability.
    • Enhanced spacing and sizing consistency throughout the interface using adaptive scaling for different devices.

@mahmoudr80 mahmoudr80 requested a review from M4dhav as a code owner March 26, 2026 04:49
@github-actions
Copy link
Copy Markdown
Contributor

🎉 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
Copy link
Copy Markdown

coderabbitai bot commented Mar 26, 2026

Warning

Rate limit exceeded

@mahmoudr80 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 11 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: 6a2154e5-0f08-4db7-8829-7b0b02ca5ecf

📥 Commits

Reviewing files that changed from the base of the PR and between 9e52344 and 66ac76d.

📒 Files selected for processing (2)
  • lib/main.dart
  • lib/views/screens/category_screen.dart
📝 Walkthrough

Walkthrough

The pull request integrates flutter_screenutil for responsive design across the app. The main app is wrapped in ScreenUtilInit with a 360x690 design size and responsive mode enabled. The category screen is updated to use responsive sizing utilities and fixes ListView scrollability by removing scroll physics restrictions, while the empty state is restructured for proper centering.

Changes

Cohort / File(s) Summary
Responsive Design Framework
pubspec.yaml, lib/main.dart
Added flutter_screenutil dependency and integrated it at the app root level by wrapping GetMaterialApp in ScreenUtilInit with design size of 360x690, maintaining the existing Obx-based theme switching within the builder.
Category Screen Responsiveness & Scrollability
lib/views/screens/category_screen.dart
Enabled AppBar back button and title centering. Converted fixed-size dimensions to responsive *.h/*.w units for padding and heights. Restored ListView scrollability by removing NeverScrollableScrollPhysics, shrinkWrap, and primary settings. Restructured empty state from bottom-padded to centered layout using Center wrapper with responsive spacing.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 Hops with delight...

Screens now scale, no more fixed fate,
Lists can scroll at any rate,
Empty states centered, centered true,
ScreenUtil magic makes all new! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name Status Explanation Resolution
Title check ❓ Inconclusive The title is vague and generic, using non-descriptive phrasing that does not clearly convey what was fixed or improved in the changeset. Revise the title to be more specific, such as 'Make CategoryScreen responsive and fix non-scrollable ListView' to better reflect the main changes.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues check ✅ Passed The PR successfully addresses both critical requirements from issue #796: ListView scrolling is fixed by removing NeverScrollableScrollPhysics and related constraints, and empty-state layout is made responsive using Center wrapper and flutter_screenutil sizing.
Out of Scope Changes check ✅ Passed All changes are directly related to fixing issue #796: wrapping MyApp with ScreenUtilInit enables responsive sizing throughout the app, CategoryScreen changes fix scrolling and responsiveness issues, and pubspec.yaml dependency addition supports these changes.
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

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

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🧹 Nitpick comments (2)
lib/views/screens/category_screen.dart (1)

33-34: Consider consistent sizing for square loading indicator.

Using 200.h for height and 200.w for width means the container's aspect ratio varies with screen proportions. If a square is intended, use the same unit for both (e.g., 200.r for radius-based sizing that maintains aspect ratio, or both .w).

🤖 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 33 - 34, The loading
indicator container in CategoryScreen uses mixed units (height: 200.h, width:
200.w) causing non-square sizing; change both dimensions to the same ScreenUtil
unit (e.g., use 200.r for both or 200.w for both) so the Container/SizedBox that
wraps the loading indicator remains square (look for the Container/SizedBox
around the loading indicator in category_screen.dart and update the height and
width to the same unit).
lib/main.dart (1)

85-111: Consider using the child parameter for optimization.

The child parameter in the builder is unused. Per flutter_screenutil best practices, widgets that don't need to rebuild with screen util changes can be passed as child for performance optimization.

Additionally, UiSizes.init(context) at line 78 is called on every build. If this performs non-trivial work, consider initializing it once (e.g., in a StatefulWidget.didChangeDependencies or lazily).

♻️ Example using child parameter
     return ScreenUtilInit(
         designSize: const Size(360, 690),
         minTextAdapt: true,
         splitScreenMode: true,
-        builder: (_ , child) {
+        child: null, // Move static widgets here if applicable
+        builder: (context, child) {
           return Obx(
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@lib/main.dart` around lines 85 - 111, The builder currently recreates the
entire GetMaterialApp and calls UiSizes.init on every build; extract the
GetMaterialApp into the builder's child parameter so the heavy subtree doesn't
rebuild and move UiSizes.init out of the builder to a one-time initialization
(e.g., in the enclosing StatefulWidget's initState or didChangeDependencies).
Concretely: stop calling UiSizes.init inside the builder, call it once in the
widget lifecycle (use UiSizes.init(context) in didChangeDependencies or
initState + postFrameCallback), and change builder: (_, child) { return Obx(()
=> child!); } while passing the GetMaterialApp as the child argument (so
reactive updates only rebuild the minimal parts you wrap with Obx, not the full
GetMaterialApp).
🤖 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/main.dart`:
- Around line 80-84: The file uses ScreenUtilInit but lacks the
flutter_screenutil package import; add the import for
package:flutter_screenutil/flutter_screenutil.dart alongside the other imports
so ScreenUtilInit (and related types like Size extensions) resolve and the code
compiles—ensure the import is placed at the top of lib/main.dart with existing
imports.

---

Nitpick comments:
In `@lib/main.dart`:
- Around line 85-111: The builder currently recreates the entire GetMaterialApp
and calls UiSizes.init on every build; extract the GetMaterialApp into the
builder's child parameter so the heavy subtree doesn't rebuild and move
UiSizes.init out of the builder to a one-time initialization (e.g., in the
enclosing StatefulWidget's initState or didChangeDependencies). Concretely: stop
calling UiSizes.init inside the builder, call it once in the widget lifecycle
(use UiSizes.init(context) in didChangeDependencies or initState +
postFrameCallback), and change builder: (_, child) { return Obx(() => child!); }
while passing the GetMaterialApp as the child argument (so reactive updates only
rebuild the minimal parts you wrap with Obx, not the full GetMaterialApp).

In `@lib/views/screens/category_screen.dart`:
- Around line 33-34: The loading indicator container in CategoryScreen uses
mixed units (height: 200.h, width: 200.w) causing non-square sizing; change both
dimensions to the same ScreenUtil unit (e.g., use 200.r for both or 200.w for
both) so the Container/SizedBox that wraps the loading indicator remains square
(look for the Container/SizedBox around the loading indicator in
category_screen.dart and update the height and width to the same unit).
🪄 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: 9044568d-215f-4078-ba7e-1ee58bedff56

📥 Commits

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

📒 Files selected for processing (3)
  • lib/main.dart
  • lib/views/screens/category_screen.dart
  • pubspec.yaml

Copy link
Copy Markdown
Author

@mahmoudr80 mahmoudr80 left a comment

Choose a reason for hiding this comment

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

I eddited it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Category responsive + but scrollable

1 participant