Wasim Alshadadi
Co-Founder & CPO @ InfiniteUp
Profile in progress
Wasim is building their profile!
The “Flex 9” Trick: Solving FlutterFlow’s Bottom Sheet Paradox for Accessibility
We love Bottom Sheets. They are sleek, modern, and great for mobile UX. But any developer who has worked with them knows the secret headache they cause: The Goldilocks Problem.
If you fix the height, you cut off content on small screens. If you make it dynamic, it looks great—until a user cranks their font size up to 200% for accessibility. Then, your beautiful UI breaks, the “Confirm” button gets pushed off-screen, and the user is stuck.
At InfiniteUp, we don’t just build for the “happy path.” We recently spent a week diving deep into accessibility for our HearWB project. During this sprint, our Chief Product Officer, Wasim, cracked a code pattern that solves this dilemma perfectly. We call it the “Flex 9 Trick.”
The Problem: “It breaks when I zoom”
When building for accessibility, you have to assume the user’s text size will be massive.
The Trap: Most developers use a simple Wrap or Column.
The Result: When the text expands, the bottom sheet grows until it hits the top of the screen. If it keeps growing, it errors out or pushes critical buttons into the void where users can’t reach them.
You need a sheet that shrinks to fit small content (like a two-line confirmation) but stops and scrolls when the content gets too massive.
The Solution: The “Flex 9” Pattern
The solution isn’t to force a scrollbar on everything (which leaves ugly whitespace on short messages). The solution is a specific widget tree combination that allows the sheet to be intelligent about its size.
The Code Pattern:
Dart
// The “Flex 9” Widget Tree
Column(
mainAxisSize: MainAxisSize.min, // 1. Shrink to fit content by default
children: [
Flexible(
flex: 9, // 2. Allow growth up to 90% of screen space
fit: FlexFit.loose, // 3. But don’t force it to 90% if content is smaller
child: SingleChildScrollView( // 4. If we hit that 90% limit, scroll!
child: Column(
children: [
// Your dynamic content here
],
),
),
),
],
)
Why it works:
MainAxisSize.min: Tells the sheet, “Only take up as much space as you need.”
Flexible (Flex: 9): Tells the layout engine, “You can grow, but stop once you hit 9/10ths of the available screen height.”
FlexFit.loose: Ensures that if the content is small, the sheet stays small. It won’t stretch to fill the screen unnecessarily.
SingleChildScrollView: Activates only when that 90% limit is hit, preserving access to your buttons.
It sounds simple, but as Wasim noted during our code review, “These two things—dynamic sizing and scrolling limits—don’t usually come together easily in standard documentation.”
Two More Accessibility “Gotchas” We Fixed
While fixing the bottom sheets, we found two other UI elements that often break under the weight of “Large Text” settings:
1. The “Galaxy” Checkbox
When text is massive, a standard checkbox row aligns to the top. This looks fine, until the text is four lines long and the checkbox is floating miles away from the context.
The Fix: Align the checkbox to the vertical centre (relative to the row). It feels counter-intuitive for short text, but for large multi-line text, it ensures the interaction point remains near the bulk of the content.
2. The Bullet Point Break
Standard bullet widgets are often separate from the text. When font sizes scale, the bullet stays small or misaligns, and the text wraps awkwardly below it.
The Fix: We moved the bullet point inside the text string itself. By treating the bullet as a text character rather than a separate UI icon, it scales perfectly with the font and ensures the indentation remains readable.
Why This Matters
It is easy to build an app that looks good on an iPhone 16 Pro with default settings. It is hard to build an app that looks good for a 75-year-old user with vision impairment on a three-year-old Android device.
At InfiniteUp, we pride ourselves on handling these edge cases. We don’t just generate code; we engineer solutions that ensure dignity and usability for every user, regardless of their settings.
Because if your app isn’t accessible, it isn’t finished.
2
36