How to use the Spacer widget in Flutter

The Spacer widget in Flutter is a versatile tool for creating flexible and responsive layouts by distributing available space within a Row or Column. It allows us to create dynamic gaps between widgets, ensuring proper alignment and distribution of space within our UI. In this answer, we'll walk through the steps of effectively using the Spacer widget.

Constructor and parameters

The Spacer widget provides a constructor with various parameters to customize its behavior and layout.

const Spacer({
  Key? key,
  int flex = 1
})

Let's take a closer look at each parameter and its purpose.

  • key (optional): A unique identifier for the widget, used for widget updates and identification.

  • flex (optional, default: 1): An integer value that determines how much space the Spacer should occupy relative to other Spacer widgets or child widgets. The greater the flex value, the more space the Spacer occupies compared to others with lower flex values.

Implementation

We can follow the instructions given below to add a Spacer widget in UI.

Import the necessary packages

To use the Spacer widget, we need to import the necessary packages in our Dart file.

import 'package:flutter/material.dart';

Basic syntax of Spacer widget

The Spacer widget is straightforward to use. It occupies any available space along the main axis of its parent Row or Column. Here's the basic structure:

Spacer(
  flex: flexValue,
)

Using Spacer in a Row with even spaces

To evenly distribute space between widgets in a Row, place Spacer widgets between them with equal flex values:

Row(
  children: [
    Container(
      width: 50,
      height: 50,
      color: Colors.red,
    ),
    Spacer(),
    Container(
      width: 50,
      height: 50,
      color: Colors.green,
    ),
    Spacer(),
    Container(
      width: 50,
      height: 50,
      color: Colors.blue,
    ),
  ],
),

After running the above code, we can see the following output:

Using Spacer widget in Row with even spaces
Using Spacer widget in Row with even spaces

Using Spacer in a Column with uneven spaces

To distribute space between widgets unevenly in a Column, place the Spacer widgets between them with different flex values:

Column(
  children: [
    Container(
      width: 50,
      height: 50,
      color: Colors.red,
    ),
    Spacer(flex: 2),
    Container(
      width: 50,
      height: 50,
      color: Colors.green,
    ),
    Spacer(),
    Container(
      width: 50,
      height: 50,
      color: Colors.blue,
    ),
  ],
),

After running the above code, we can see the following output:

Using Spacer widget in Column with uneven spaces
Using Spacer widget in Column with uneven spaces

Code example

We get the following output by putting together the code explained above.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Spacer Widget Example',
      home: SpacerExample(),
    );
  }
}

class SpacerExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Educative Spacer Answer')),
      body: Row(
        children: [
          Container(
            width: 50,
            height: 50,
            color: Colors.red,
          ),
          Spacer(flex: 2),
          Container(
            width: 50,
            height: 50,
            color: Colors.green,
          ),
          Spacer(),
          Container(
            width: 50,
            height: 50,
            color: Colors.blue,
          ),
        ],
      ),
    );
  }
}

Conclusion

The Spacer widget is a valuable tool for creating flexible and responsive layouts in Flutter. By strategically placing the Spacer widgets within Row and Column layouts, we can achieve well-balanced and visually appealing UI designs that adapt to various screen sizes and orientations.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved