Flutter Spacer

Summary: in this tutorial, you’ll learn how to use the flutter Spacer widget to create an adjustable and empty spacer between widgets in a flex container.

Introduction to the Flutter Spacer widget

A Spacer widget creates an adjustable and empty spacer for tuning spacing between child widgets in a flex container like Row and Column.

Because a Spacer widget takes up all available space, setting mainAxisAlignment property on a flex container that contains a Spacer widget to one of the following values will not take any effect:

  • spaceAround
  • spaceBetween
  • spaceEvenly

If a flex container contains multiple Spacer widgets, you can use a flex factor to determine how much space each Spacer can take up. The flex factor is 1 by default.

Flutter Spacer widget example

The following example shows how to use the Row widget to arrange three child widgets in a horizontal array:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
          child: Row(
            children: [
              Container(
                color: Colors.redAccent,
                height: 50,
                width: 50,
              ),
              Container(
                color: Colors.greenAccent,
                height: 50,
                width: 50,
              ),
              Container(
                color: Colors.blueAccent,
                height: 50,
                width: 50,
              ),
            ],
          ),
        ),
      ),
    );
  }
}
Code language: Dart (dart)
flutter spacer example

To keep the first widget at the start of the row and push the second and third widgets to the end of the row, you can add a Spacer widget between the first and the second widgets like this:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
          child: Row(
            children: [
              Container(
                color: Colors.redAccent,
                height: 50,
                width: 50,
              ),
              const Spacer(),
              Container(
                color: Colors.greenAccent,
                height: 50,
                width: 50,
              ),
              Container(
                color: Colors.blueAccent,
                height: 50,
                width: 50,
              ),
            ],
          ),
        ),
      ),
    );
  }
}
Code language: Dart (dart)

To make the space between the first and second widgets twice as the space between the second and the third widgets, you follow these steps:

  • First, add another Spacer between the second and third widgets.
  • Second, set the flex property of the first Spacer located between the first and second widgets to 2.

For example:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
          child: Row(
            children: [
              Container(
                color: Colors.redAccent,
                height: 50,
                width: 50,
              ),
              const Spacer(flex: 2),
              Container(
                color: Colors.greenAccent,
                height: 50,
                width: 50,
              ),
              const Spacer(),
              Container(
                color: Colors.blueAccent,
                height: 50,
                width: 50,
              ),
            ],
          ),
        ),
      ),
    );
  }
}
Code language: Dart (dart)

Summary

  • Use Flutter Spacer to create an empty and adjustable spacer between the widgets of a flex container.
Was this tutorial helpful ?