FractionallySizedBox in Flutter: Size by Percentage, Not Guesswork

Responsive layouts break when you hard-code pixel sizes. FractionallySizedBox fixes that by sizing its child as a fraction of the available parent space — think "50% width" without math.

What FractionallySizedBox does (quick)

FractionallySizedBox sizes itself (and its child) relative to its parent's available space using widthFactor and heightFactor. Use it when you want a widget to occupy a percentage of its container instead of fixed pixels.
One-line summary: FractionallySizedBox gives you percentage-based sizing for clean, predictable responsiveness.

Core properties and behavior

• widthFactor and heightFactor (double?): Multiply the parent's available width/height. Values are typically between 0.0 and 1.0, but can exceed 1.0.

• alignment (Alignment): Where the child sits inside the sized box (default: Alignment.center).

• child: The widget to size.

Behavior highlights:

• If a factor is non-null, the widget tries to set that dimension to parentAvailable * factor.

• If a factor is null for an axis, the widget sizes to the child's intrinsic size on that axis.

• The widget always respects the parent's constraints (it won't exceed the parent's max constraints).

One-line summary: Use widthFactor/heightFactor to express percentage sizes; leave them null to fall back to the child's natural size.

Basic example: half-width card

// Dart (Flutter)
FractionallySizedBox(
  widthFactor: 0.5,
  child: Card(
    child: Padding(
      padding: EdgeInsets.all(16),
      child: Text('I take 50% of the parent width'),
    ),
  ),
)

This centers a card that occupies half the available width.
One-line summary: widthFactor: 0.5 equals "50% width" of the parent.

Positioning and alignment

By default FractionallySizedBox centers the child. Use alignment to change that:

FractionallySizedBox(
  widthFactor: 0.8,
  alignment: Alignment.topLeft,
  child: Container(color: Colors.blue, height: 100),
)

This creates a 80%-width blue box aligned to the parent’s top-left.
One-line summary: alignment controls where the fractionally-sized child sits inside the parent.

Common patterns and use-cases

• Responsive cards and panes: Let cards scale with parent width to look consistent on phones and tablets.

• Action buttons: Make a full-width button on mobile (widthFactor: 1.0) and a narrower one on tablet.

• Centering with controlled width: Combine FractionallySizedBox(widthFactor: x) with parent padding to keep consistent margins.

One-line summary: Use FractionallySizedBox where percentage-based sizing improves layout consistency across screen sizes.

Working with unbounded constraints (pitfall)

If parent provides unbounded space (for example, a horizontal ListView or an unconstrained Row inside a ScrollView), FractionallySizedBox cannot compute a meaningful fraction of "infinite." In practice:

• If the axis is unbounded and you set a factor, the result may not behave as expected.

• Fix it by giving a bounded constraint (wrap in SizedBox, ConstrainedBox, or use LayoutBuilder to derive actual available size).

Example fix:

SizedBox(
  width: MediaQuery.of(context).size.width, // bounds the axis
  child: FractionallySizedBox(widthFactor: 0.6, child: MyWidget()),
)

One-line summary: When parent constraints are unbounded, provide bounds first (SizedBox/ConstrainedBox/LayoutBuilder).

FractionallySizedBox vs Align vs Expanded

• FractionallySizedBox: Sizes relative to the parent's available space (percentage of parent).

• Align: widthFactor and heightFactor on Align scale relative to the child's size (child * factor), not the parent.

• Expanded (inside Row/Column): Divides remaining space among siblings using flex values — not ideal for percentage of the parent unless you combine patterns.

Analogy: FractionallySizedBox is like saying "give me 70% of the room." Align's widthFactor is like "make me twice as wide as I naturally am." Expanded is like "split the remaining pizza slices between people."

One-line summary: Use FractionallySizedBox for parent-relative percentages; pick Align/Expanded for child-scaling or flex behavior.

Adaptive fractions with LayoutBuilder

To change the fraction depending on available space, use LayoutBuilder:

LayoutBuilder(
  builder: (context, constraints) {
    final isNarrow = constraints.maxWidth < 600;
    return FractionallySizedBox(
      widthFactor: isNarrow ? 0.95 : 0.6,
      child: Card(child: Text('Adaptive width')),
    );
  },
)

One-line summary: Use LayoutBuilder to compute factors adaptively based on real constraints.

Short, focused tips

• Use values between 0 and 1 for common percentage behavior. Values >1 make the child larger than the parent (use with care).

• If you need exact pixel sizes on some breakpoints, combine LayoutBuilder + MediaQuery to switch to SizedBox.

• Avoid stacking many fractional widgets with different parents; prefer a single constraint-aware parent where possible.

One-line summary: Keep fractions simple and combine with constraint-aware widgets for predictable results.

Conclusion — next step

FractionallySizedBox gives you clean, percentage-based sizing in Flutter without manual math. Try swapping a few SizedBox/Container widths in your UI for FractionallySizedBox and observe how layout scales across screens. If you want, paste a small widget tree and I’ll suggest exact factors and fixes for unbounded constraints.