flutter
/

Flutter Spacer – Flexible Empty Space in Rows and Columns

Last Sync: Today

On this page

9
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

flutter

Flutter Spacer – Flexible Empty Space in Rows and Columns

What is the Spacer Widget?

Spacer is a widget that creates an adjustable, empty space that expands to fill the available space in a Row, Column, or Flex. It is a convenient alternative to using Expanded with an empty Container. Spacer distributes the remaining space among multiple spacers based on their flex factor, similar to how Expanded works. It's ideal for pushing content to the edges of a row or column, or for creating balanced spacing between widgets.

Basic Usage

DARTRead-only
1
Row(
  children: [
    Text('Left'),
    Spacer(), // pushes the next widget to the right edge
    Text('Right'),
  ],
)

In this example, the Spacer expands to take up all remaining horizontal space, pushing the right text to the end of the row.

Flex Factor

Spacer has a flex property (default 1) that determines how much of the remaining space it takes relative to other spacers and Expanded widgets in the same parent.

DARTRead-only
1
Row(
  children: [
    Text('A'),
    Spacer(flex: 2),
    Text('B'),
    Spacer(flex: 1),
    Text('C'),
  ],
)

Here, the first spacer gets twice the amount of free space compared to the second spacer, because it has flex: 2 vs flex: 1.

Using Spacer in Column

Spacer works the same in a vertical Column. It can push content to the bottom or create evenly distributed spacing between items.

DARTRead-only
1
Column(
  children: [
    Text('Top'),
    Spacer(), // pushes next content to the bottom
    Text('Bottom'),
  ],
)

Spacer vs Expanded

    • Spacer is an empty widget that takes up space. It's ideal when you just need a gap.
    • Expanded is used to make a child fill the remaining space. If you need a child to expand (like a button or container), use Expanded. If you just need an empty gap, use Spacer.

Common Use Cases

    • Push a button to the right end of an AppBar: Wrap the AppBar's actions with a Row and use Spacer() between the title and actions.
    • Bottom‑aligned content in a Column: Place a Spacer() above the last widget to push it to the bottom.
    • Evenly distributed items: Combine multiple spacers between items to create equal gaps.
    • Responsive layout: Use spacers to automatically adjust spacing on different screen sizes.

Important Constraints

For Spacer to work, its parent must be a Row, Column, or Flex. The parent must also have a finite size; if the parent is unbounded (e.g., inside a ListView without a specified height), the spacer may not expand as expected. Always ensure the parent has a constrained size.

Common Mistakes

    • Using Spacer in a row that has no size constraint: If the row is inside a column that doesn't constrain its width, the spacer may not expand. Ensure the parent has a bounded width.
    • Forgetting to set flex correctly: If you want proportional spacing, adjust the flex values.
    • Using Spacer when you need a fixed gap: Spacer is flexible; for a fixed gap, use SizedBox instead.
    • Nesting Spacer inside Expanded: Spacer already expands; wrapping it with Expanded is redundant.

Key Takeaways

    • Spacer creates flexible, expandable space in Row, Column, or Flex.
    • Use the flex property to control how much space it takes relative to others.
    • Perfect for pushing content to edges or distributing space evenly.
    • It's a lighter alternative to Expanded with an empty child.
    • Ensure the parent has a bounded size for the spacer to work.

Try it yourself

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Spacer Demo'),
          actions: [
            IconButton(icon: Icon(Icons.search), onPressed: () {}),
          ],
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // Row with spacer pushing text to ends
              Container(
                width: 300,
                child: Row(
                  children: [
                    Text('Left'),
                    Spacer(),
                    Text('Right'),
                  ],
                ),
              ),
              SizedBox(height: 20),
              // Column with spacer pushing button to bottom
              Container(
                height: 200,
                width: 300,
                color: Colors.grey.shade200,
                child: Column(
                  children: [
                    Text('Top'),
                    Spacer(),
                    ElevatedButton(
                      onPressed: () {},
                      child: Text('Bottom Button'),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Test Your Knowledge

Q1
of 4

What is the purpose of the Spacer widget?

A
To create a fixed‑size gap
B
To create flexible, expandable space in a Row or Column
C
To add padding around a widget
D
To wrap text that overflows
Q2
of 4

What property controls how much space a Spacer takes relative to others?

A
size
B
factor
C
flex
D
weight
Q3
of 4

Which parent widgets can Spacer be used inside?

A
Container
B
Stack
C
Row and Column
D
ListView
Q4
of 4

How do you push a widget to the right edge of a Row?

A
Add an `Align` with alignment right
B
Place a `Spacer` before the widget
C
Place a `Spacer` after the widget
D
Set the widget's alignment

Frequently Asked Questions

What is the difference between Spacer and SizedBox?

Spacer takes up available space (flexible) and expands to fill the remaining area. SizedBox takes a fixed amount of space (either explicit or 0 if not specified). Use SizedBox when you need a fixed gap; use Spacer when you need the gap to adjust based on the available space.

Can I use Spacer inside a ListView?

Yes, but be careful. If the ListView is the parent, the children may not be constrained in the scroll direction. Inside a ListView, a Spacer may not expand because the ListView provides unbounded space in the scroll direction. For flexible spacing inside lists, consider using Column with a Spacer and wrap the whole thing in a SingleChildScrollView or use Expanded with a Column inside a SizedBox with fixed height.

How do I create equal spacing between multiple items?

Place a Spacer between each pair of items. For example: Row(children: [Text('A'), Spacer(), Text('B'), Spacer(), Text('C')]). Each Spacer will take an equal share of the free space (since their flex is 1 by default).

Can I use Spacer in a Row that has no width?

A Row will expand to fit its parent's width if it is constrained. If the parent does not provide a width (e.g., a Row inside an unconstrained Column), the Row may be as wide as its children, and Spacer will have no room to expand. To fix, wrap the Row with a SizedBox or ensure the parent gives it a width.

What is the default flex value of a Spacer?

The default flex is 1, meaning it takes one share of the remaining space. You can change it to any positive integer.

Previous

flutter wrap widget

Next

flutter positioned widget

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.