Skip to content

Add enabled Parameter to Common Layout Widgets for Conditional Wrapping #168365

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

Jump to bottom
Open
fazil-kp opened this issue May 6, 2025 · 4 comments · May be fixed by #169513
Open

Add enabled Parameter to Common Layout Widgets for Conditional Wrapping #168365

fazil-kp opened this issue May 6, 2025 · 4 comments · May be fixed by #169513
Labels
c: new feature Nothing broken; request for a new capability c: proposal A detailed proposal for a change to Flutter framework flutter/packages/flutter repository. See also f: labels. team-framework Owned by Framework team would be a good package Separate Flutter package should be made for this

Comments

@fazil-kp
Copy link

fazil-kp commented May 6, 2025 •
edited by darshankawar
Loading

Use case

Summary
When building responsive UIs in Flutter, we often need to conditionally wrap widgets in Expanded, depending on the screen size—e.g., 📱 mobile vs 🖥 desktop. This pattern quickly leads to repetitive and cluttered layout code, making it harder to read and maintain.

Proposal
Introduce either:

  1. An enabled property to the existing Expanded widget.
  2. A new utility widget, like SmartExpand, which conditionally expands its child based on a flag.

Why This Matters

✅ Clean up widget tree from repeated if or ternary expressions
✅ Avoid deep nesting and improve readability
✅ Write a single layout codebase for mobile and desktop
✅ Encourage reusable, scalable, and composable UI patterns
✅ Helps developers define and use their own responsive logic

Proposal

Example Implementation (Current Workaround)
Here’s a custom SmartExpand widget we currently use to achieve this:

class SmartExpand extends StatelessWidget {
  final Widget child;
  final bool enableExpand;
  final int flex;

  const SmartExpand({
    super.key,
    required this.child,
    this.enableExpand = true,
    this.flex = 1,
  });

  @override
  Widget build(BuildContext context) {
    return enableExpand
        ? Expanded(
            flex: flex,
            child: child,
          )
        : child;
  }
}

Usage Example:

SmartExpand(
  enableExpand: isMobile, // responsive condition
  child: MyWidget(),
)

Suggested Flutter Framework Enhancement

A simpler alternative could be enhancing the Expanded widget itself to support an enabled flag:

Expanded(
  enabled: isMobile,
  flex: 1,
  child: MyWidget(),
)

When enabled is false, it would simply return child without applying any layout constraints.
@darshankawar darshankawar added the in triage Presently being triaged by the triage team label May 6, 2025
@darshankawar
Copy link
Member

@fazil-kp
Have you already checked if there's any community package offering such feature already ?
Example : https://pub.dev/packages/responsive_builder

@darshankawar darshankawar added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label May 6, 2025
@fazil-kp
Copy link
Author

I want to clarify that my proposal isn’t limited to Expanded

Thanks for pointing me to those packages! 🙏 I want to clarify that my proposal isn’t limited to Expanded—I’m envisioning an enabled flag on all the common layout widgets (Center, Padding, SingleChildScrollView, etc.) so that you can conditionally apply any wrapper declaratively:


Padding(
  enabled: isMobile,      // only apply padding on mobile
  padding: EdgeInsets.all(16),
  child: MyWidget(),
)

Center(
  enabled: isPortrait,    // only center in portrait mode
  child: MyWidget(),
)

SingleChildScrollView(
  enabled: isDesktop,     // only scroll on desktop
  child: MyList(),
)

Why this matters

  • Drastically less boilerplate

No more

isMobile 
  ? Padding(…)
  : child

for every case.

  • Consistent responsive logic

You can drive all layout decisions from a single breakpoint or orientation API, rather than sprinkling if/ternary everywhere.

  • Easier to maintain

When you tweak your responsive rules (e.g. breakpoint from 600→720px), you update one helper instead of hunting down dozens of conditional wrappers.

  • Broad applicability

Works for any widget that “wraps” another—think Align, ConstrainedBox, DecoratedBox, even animations or custom decorators.

Next steps

If this sounds useful, I’d be happy to:

  1. Prototype a small responsive_widgets package that adds enabled to the most-used layout widgets.

  2. Sketch out an API for opt-in on core Flutter widgets (e.g. Expanded(enabled: …)) and help file an RFC/PR.

@github-actions github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label May 25, 2025
@darshankawar
Copy link
Member

It probably sounds like a package, but I'll keep the issue open and label for team's tracking.

@darshankawar darshankawar added c: new feature Nothing broken; request for a new capability framework flutter/packages/flutter repository. See also f: labels. would be a good package Separate Flutter package should be made for this c: proposal A detailed proposal for a change to Flutter team-framework Owned by Framework team and removed in triage Presently being triaged by the triage team labels May 26, 2025
@fazil-kp fazil-kp changed the title Add enabled flag to Expanded or introduce a SmartExpand widget for cleaner responsive UIs Add enabled Parameter to Common Layout Widgets for Conditional Wrapping May 26, 2025
@fazil-kp
Copy link
Author

Thanks for keeping this open and tagging it!
I strongly feel this should be built into Flutter itself. Adding an enabled flag to core widgets like Expanded, Padding, Center, SingleChildScrollView, etc.. will help reduce code duplication and make responsive design cleaner and more maintainable without the need for external packages or custom wrappers.
I hope this can be considered for a future Flutter update. Thanks again!

@fazil-kp fazil-kp linked a pull request May 27, 2025 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
c: new feature Nothing broken; request for a new capability c: proposal A detailed proposal for a change to Flutter framework flutter/packages/flutter repository. See also f: labels. team-framework Owned by Framework team would be a good package Separate Flutter package should be made for this
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add enabled parameter to Layout Widgets for Dynamic UI Support fazil-kp/flutter
2 participants
@darshankawar @fazil-kp
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy