How to use Divider in Flutter
The Divider widget in Flutter is a horizontal line commonly used to separate sections or elements of a screen visually, providing a clear visual distinction. It can be used to separate text, images, or other widgets.
Constructor and parameters
The Divider widget provides a constructor with various parameters to customize its behavior and layout.
Divider({
Key? key,
double? height,
double? thickness,
double? indent,
double? endIndent,
Color? color
})
Let's take a closer look at each parameter and its purpose:
Key: Used for uniquely identifying a widget.height: Specifies the height of the divider (default value: 16).thickness: Determines the width of the divider (default value: 0.5).indent: Sets the horizontal space before the divider starts (default value: 0).endIndent: Specifies the horizontal space after the divider ends (default value: 0).color: Allows us to define the divider's color.
Note: All parameters in the Divider constructor are optional, denoted by the ? symbol. This means we can omit these parameters when creating a Divider instance and rely on their default values.
Adding a simple Divider
Below is a sample code of the Flutter Divider with no arguments.
Container(child: Column(children: [Text("Text above Divider"),Divider(),Text("Text Below Divider"),],),),
Output
Customizing Flutter Divider
The Divider widget in Flutter offers customization, allowing us to change its appearance to suit our app's unique design. We can customize by adjusting the parameters, such as thickness, color, height, and width.
Below is the sample code where we added some parameters to customize the Divider widget.
Divider(height: 20.0,thickness: 3.0,color: Colors.blue,indent: 25.0,endIndent: 25.0,),
Output
Adding vertical divider
The VerticalDivider widget in Flutter provides a way to add vertical dividers within our user interface. It also offers customization options, allowing us to adjust its thickness, color, and height to match your specific design requirements.
Below is the sample code of the VerticalDivider where we also added some parameters to customize it.
VerticalDivider(width: 30.0,thickness: 3.0,color: Colors.blue,indent: 20.0,endIndent: 20.0,),
Output
Complete code
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(
home: Scaffold(
appBar: AppBar(
title: Text('Educative Dividor Example'),
),
body: Column(
children: [
Container(
color: Colors.blue,
height: 100,
alignment: Alignment.center,
child: Text('Educative Answers - Section 1'),
),
Divider(
color: Colors.blue,
thickness: 2,
),
Row(
children: [
Expanded(
child: Container(
color: Colors.green,
height: 200,
alignment: Alignment.center,
child: Text('Left Section'),
),
),
Expanded(
child: Container(
height: 200,
alignment: Alignment.center,
child: VerticalDivider(
color: Colors.blue,
thickness: 2,
),
),
),
Expanded(
child: Container(
color: Colors.yellow,
height: 200,
alignment: Alignment.center,
child: Text('Right Section'),
),
),
],
),
Divider(
color: Colors.black,
thickness: 2,
),
Container(
color: Colors.orange,
height: 100,
alignment: Alignment.center,
child: Text('Educative Answers - Section 2'),
),
],
),
),
);
}
}
Output
Conclusion
The Divider widget in Flutter is a powerful tool for visually separating sections and elements within our app's user interface. With its customizable parameters like height, thickness, color, and indent, developers can easily change the appearance of dividers to match their design preferences. Whether using horizontal or vertical dividers, Flutter offers flexibility and ease in enhancing the layout and organization of our app, resulting in a more polished and user-friendly experience.
Free Resources
