How to Create a Horizontal Line in Flutter

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.