Spacer Widget

What is Spacer Widget?

The Spacer widget is to create an empty space between the widgets in a Flex container, like Row and Column.

Default Constructor

The default constructor creates a flexible space to insert into a Flex container.

Spacer(
  flex: 1 // defaults to 1
)

Constructor Parameters

It contains many input parameters which can be configured to change its behavior and appearance.

flex: determining how much space to take up between the widgets.

Code snippet

This code snippet shows how to configure Spacer widget with flex argument values.

Row(
      children: <Widget>[
        Text('First Child'),
        Spacer(), // Defaults to a flex of one.
        Text('Second Child'),
        // Gives twice the space between Second and Last child widgets
        Spacer(flex: 2),
        Text('Last Child'),
      ],
    );

Demo Code

The example gives twice the space between Second and Last widgets than First and Second.

import 'package:flutter/material.dart';

class SpacerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Text('First Child'),
        Spacer(), // Defaults to a flex of one.
        Text('Second Child'),
        // Gives twice the space between Second and Last child widgets
        Spacer(flex: 2),
        Text('Last Child'),
      ],
    );
  }
}

// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Spacer';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: Center(
          child: Material(child: SpacerDemo()),
        ),
      ),
    );
  }
}

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