Sometimes, you may need to add a horizontal line in your UI. This divider line can help you to separate other components visually. In this flutter tutorial, let’s see how to show a horizontal divider line in flutter.
There are multiple ways to create a horizontal line. Here, we are using the Divider class. A divider is a thin horizontal line with padding on either side. There are properties such as color, indent, endIndent, height, etc to customize the horizontal line.
Divider(
color: Colors.black,
height: 20,
thickness: 2,
indent: 10,
endIndent: 10,
),
Following is the complete example where two Expanded widgets are separated by horizontal line provided by the Divider class.
import 'package:flutter/material.dart';
void main() => runApp(App());
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Divider Example',
home: LineExample(),
);
}
}
class LineExample extends StatelessWidget {
const LineExample({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter horizontal line tutorial'),
),
body: Column(
children: <Widget>[
Expanded(
child: Container(
color: Colors.red,
),
),
const Divider(
color: Colors.black,
height: 25,
thickness: 2,
indent: 5,
endIndent: 5,
),
Expanded(
child: Container(
color: Colors.blue,
),
),
],
),
);
}
}
Following is the output of the flutter example.
