fix(ui): Adjust scroll from clipping children form fields in AlertDialog from showSourcesDialog (#1748)
#1782
Conversation
This commit resolves the issue of children clipping in `AlertDialog` for the `showSourcesDialog` by adjusting the structure to manage scrolling behavior more efficiently. By doing this, the user experience and readability is greatly improved on small devices and/or devices with large fonts. - Remove child SingleChildScrollView - Add parent (dialog) scrollable property to true
⚒️ Build status✅ Succeeded build on 22272c3. Details: 8404775438! ⚙️ Workflow run configuration
|
| @@ -27,6 +27,7 @@ class SManageSources extends BaseViewModel { | |||
| return showDialog( | |||
| context: context, | |||
| builder: (context) => AlertDialog( | |||
| scrollable: true, | |||
There was a problem hiding this comment.
I noticed that the previous AlertDialog title was fixed in-place and the modified one is scrollable along the content with this line, as the title and content are wrapped with the scrollable.
It's not that big of an issue, it looks natural (even only noticed after attaching the docs & refs) but it's the cleanest way to fully address this issue on all devices.
🔨 Break the glass in case of concern:
If this is unwanted, the 'hacky' alternatives would be to add extra padding or size with a
SizedBoxorPaddinghaving a magic number that could not work on some specificMediaQuery's, virtual keyboards, or screen sizes.
scroll-sample.mp4
There was a problem hiding this comment.
This will be a plus because, after #1791, the title can now expand lines (grow in the Y axis [vertical] ) when it's too large to fit instead of clipping. This would make the [AlertDialog] content smaller and smaller (improbable but still possible), which at some point would be very hard to scroll and interact.
However, if the title and content are scrollable, this wouldn't be the case, as the user could easily scroll and focus on the content after a multi-line title.
Note to teamCaution DO NOT use the PR builder tool, this is affected by
|
validcube
changed the title
AlertDialog from showSourcesDialog (#1748)AlertDialog from showSourcesDialog (#1748)
🔧🎨 UI Fix: Adjust Scroll from clipping it's children form fields in the
AlertDialogfromshowSourcesDialog(#1748)This PR closes #1748
Overview
The
AlertDialog's scrolling behavior forshowSourcesDialogwas causing children to clip, affecting user experience and readability, especially on devices with small screens or large fonts.AlertDialog.📓 Description
This PR addresses the issue of children clipping within the
AlertDialogby adjusting the structure to handle scrolling more efficiently. It removes unnecessary scroll components and enables the builtin scroll handle from the FlutterAlertDialog, ensuring content within the dialog is properly displayed without clipping.✍🏼 Changes Made
SingleChildScrollView.🦯 Testing
Update Tests (ToDo - Not Found nor needed for now...)Stable Flutter v3.19.3anddart 3.3.1.📋 Notes & References
🔬 Reviewers
N/A (any mod is ok)
👾 Feedback, changes, or suggestions are welcome! ✌🏼 🏖️ now a 🍕 emoji too...