Flutter Size.width vs double.infinity ?

Flutter: Size.width vs double.infinity

Understanding the difference between

Size.width

double.infinity

double.infinity

double.infinity is a Dart constant representing an infinitely large value. In Flutter layout, it tells a widget to expand to fill all available space in a given direction.

dartCopy
// Using double.infinity
Container(
  width: double.infinity,
  height: 100,
  color: Colors.blue,
  child: Text('Full width container'),
)

Size.width

Size.width represents the actual width dimension of a specific

Size

dartCopy
// Using Size.width from MediaQuery
Container(
  width: MediaQuery.of(context).size.width,
  height: 100,
  color: Colors.green,
  child: Text('Screen width container'),
)

Key Differences

Practical Examples

Example 1: Container in Column

dartCopy
Column(
  children: [
    // double.infinity - fills column width
    Container(
      width: double.infinity,
      height: 100,
      color: Colors.blue,
      child: Text('Fills column width'),
    ),
    SizedBox(height: 10),
    // MediaQuery size - also fills screen width
    Container(
      width: MediaQuery.of(context).size.width,
      height: 100,
      color: Colors.green,
      child: Text('Screen width'),
    ),
  ],
)

Example 2: Constrained Parent

dartCopy
// Parent with constraints
SizedBox(
  width: 200, // Constrained width
  child: Column(
    children: [
      // double.infinity respects parent constraint (200)
      Container(
        width: double.infinity,
        height: 50,
        color: Colors.blue,
        child: Text('200 pixels wide'),
      ),
      SizedBox(height: 10),
      // MediaQuery ignores parent constraint
      Container(
        width: MediaQuery.of(context).size.width,
        height: 50,
        color: Colors.red,
        child: Text('Full screen width (overflow!)'),
      ),
    ],
  ),
)

Example 3: Responsive Design

dartCopy
class ResponsiveContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;

    return Container(
      // Use double.infinity for constrained parent
      width: double.infinity,
      height: 200,
      color: Colors.blue,
      child: Center(
        child: Container(
          // Use percentage of screen width
          width: screenWidth * 0.8, // 80% of screen
          height: 150,
          color: Colors.white,
          child: Text('80% screen width'),
        ),
      ),
    );
  }
}

When to Use Each

Use double.infinity when:

• You want a widget to fill available space
• Working with constrained parents (Column, Row, ListView)
• Creating flexible layouts
• You don't need the exact pixel value

dartCopy
// Good use of double.infinity
Container(
  width: double.infinity,
  padding: EdgeInsets.all(16),
  child: ElevatedButton(
    onPressed: () {},
    child: Text('Full Width Button'),
  ),
)

Use Size.width when:

• You need exact screen dimensions
• Calculating responsive sizes (percentages)
• Positioning widgets absolutely
• Creating overlays or modals

dartCopy
// Good use of MediaQuery.size.width
Widget build(BuildContext context) {
  final screenWidth = MediaQuery.of(context).size.width;

  return Container(
    width: screenWidth * 0.5, // 50% of screen
    height: 100,
    child: Text('Half screen width'),
  );
}

Common Pitfalls

Pitfall 1: Unbounded Constraints

dartCopy
// ❌ Error: RenderBox layout exception
Row(
  children: [
    Container(
      width: double.infinity, // Infinite width in unbounded Row
      child: Text('Error!'),
    ),
  ],
)

// ✅ Solution: Use Expanded
Row(
  children: [
    Expanded(
      child: Container(
        child: Text('Works!'),
      ),
    ),
  ],
)

Pitfall 2: Unnecessary MediaQuery

dartCopy
// ❌ Verbose and unnecessary
Container(
  width: MediaQuery.of(context).size.width,
  child: Text('Full width'),
)

// ✅ Better: Use double.infinity
Container(
  width: double.infinity,
  child: Text('Full width'),
)

Layout Behavior Comparison

dartCopy
class ComparisonDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Case 1: double.infinity in Column
            Container(
              width: double.infinity,
              height: 100,
              color: Colors.blue,
              child: Text('double.infinity'),
            ),
            SizedBox(height: 10),

            // Case 2: MediaQuery.size.width
            Container(
              width: MediaQuery.of(context).size.width - 32, // Account for padding
              height: 100,
              color: Colors.green,
              child: Text('MediaQuery.size.width'),
            ),
            SizedBox(height: 10),

            // Case 3: No width specified (shrinks to child)
            Container(
              height: 100,
              color: Colors.orange,
              child: Text('No width specified'),
            ),
          ],
        ),
      ),
    );
  }
}

Best Practices

• Prefer
  textCopy

  double.infinity

  for flexible layouts
• Use
  textCopy

  MediaQuery.of(context).size.width

  for responsive calculations
• Avoid mixing unbounded constraints with
  textCopy

  double.infinity

• Use
  textCopy

  Expanded

  or
  textCopy

  Flexible

  in Row/Column instead of
  textCopy

  double.infinity

• Cache
  textCopy

  MediaQuery.of(context).size

  if used multiple times

Remember:

textCopy

double.infinity

adapts to constraints, while

textCopy

Size.width

gives you an exact value. Choose based on whether you need flexible or fixed sizing.

Learn more at Flutter Layout Constraints.