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 theSpacershould occupy relative to otherSpacerwidgets or child widgets. The greater theflexvalue, the more space theSpaceroccupies compared to others with lowerflexvalues.
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 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:
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