Horizontal divider with text in the middle in Flutter?

Question

Is there a built in widget in Flutter to create a divider with text in the middle? Any guide on how to do it? Like this: (the \"OR\" text in the middle of horizontal line)

Answer 1

There is no flutter widget that do this, I created on for myself. You can do it like this

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class HorizontalOrLine extends StatelessWidget {
  const HorizontalOrLine({
    this.label,
    this.height,
  });

  final String label;
  final double height;

  @override
  Widget build(BuildContext context) {

    return Row(children: <Widget>[
      Expanded(
        child: new Container(
            margin: const EdgeInsets.only(left: 10.0, right: 15.0),
            child: Divider(
              color: Colors.black,
              height: height,
            )),
      ),

      Text(label),

      Expanded(
        child: new Container(
            margin: const EdgeInsets.only(left: 15.0, right: 10.0),
            child: Divider(
              color: Colors.black,
              height: height,
            )),
      ),
    ]);
  }
}

The usage will be:

HorizontalOrLine(height: 10,label: "OR")

Answer 2

You can try to use the Row widget.

Row(
    children: <Widget>[
        Expanded(
            child: Divider()
        ),       

        Text("OR"),        

        Expanded(
            child: Divider()
        ),
    ]
)

Answer 3

import 'package:flutter/material.dart';

class HorizontalLineTitle extends StatelessWidget {
  final String title;
  final Color color;
  final double lineHeight;
  final double lineWidth;
  final double paddingTop;
  final double paddingBottom;

  HorizontalLineTitle({
    @required this.title,
    @required this.color,
    this.lineHeight,
    this.lineWidth,
    this.paddingTop,
    this.paddingBottom,
  });

  Widget _line() {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        final boxWidth = constraints.constrainWidth();
        final dashWidth = lineWidth ?? 10.0;
        final dashHeight = lineHeight ?? 1.0;
        final dashCount = (boxWidth / (2 * dashWidth)).floor();
        return Flex(
          children: List.generate(dashCount, (_) {
            return SizedBox(
              width: dashWidth,
              height: dashHeight,
              child: DecoratedBox(
                decoration: BoxDecoration(color: color),
              ),
            );
          }),
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          direction: Axis.horizontal,
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    var widgets = <Widget>[];
    widgets.add(Expanded(child: _line()));
    if (title != null && title != '') {
      widgets.add(Padding(
        padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
        child: Text(
          title,
          style: Theme.of(context).textTheme.title,
        ),
      ));
    } else {
      widgets.add(Container(width: 2.0));
    }
    widgets.add(Expanded(child: _line()));
    return Padding(
      padding: EdgeInsets.fromLTRB(
          0.0, paddingTop ?? 0.0, 0.0, paddingBottom ?? 0.0),
      child: Row(
        children: widgets,
      ),
    );
  }
}

This widget can be used for having the same thing you need but with dotted lines. Just wanted to post this so people can use it to customize it to their needs.

Answer 4

You can simply use a container to achieve this:

new Container(height: 40, width: 1, color: Colors.grey,
                        margin: const EdgeInsets.only(left: 10.0, right: 10.0),),

If you want a vertical line, change the height for the size of it and control the "thickness" of your line with width.

Invert these logic between width / height if you want to draw an horizontal line.

Use it in a Row with your text in the middle of both of your containers.

Answer 5

To expand on Jerome's answer - Here is an example that shows how to embed it with other content and also has additional edgeinsets for coming closer to the actual picture that you want:

          Column(children: <Widget>[
            Row(
              children: <Widget>[Text("above")],
            ),
            Row(children: <Widget>[
              Expanded(
                child: new Container(
                    margin: const EdgeInsets.only(left: 10.0, right: 20.0),
                    child: Divider(
                      color: Colors.black,
                      height: 36,
                    )),
              ),
              Text("OR"),
              Expanded(
                child: new Container(
                    margin: const EdgeInsets.only(left: 20.0, right: 10.0),
                    child: Divider(
                      color: Colors.black,
                      height: 36,
                    )),
              ),
            ]),
            Row(
              children: <Widget>[Text("below ")],
            ),
          ])

Answer 6

Best solution is to make a CustomPainter and draw a line

Follow the steps:

CustomPainter:

class Drawhorizontalline extends CustomPainter {
      Paint _paint;
      bool reverse;

   Drawhorizontalline(this.reverse) {
     _paint = Paint()
          ..color = PPColors.tertiaryColor
          ..strokeWidth = 1
          ..strokeCap = StrokeCap.round;
   }

  @override
  void paint(Canvas canvas, Size size) {
      if (reverse) {
         canvas.drawLine(Offset(-250.0, 0.0), Offset(-10.0, 0.0), _paint);
      } else {
         canvas.drawLine(Offset(10.0, 0.0), Offset(250.0, 0.0), _paint);
      }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
     return false;
  }
}

Use this CustomPainter

Widget getSeparateDivider() {
return Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    CustomPaint(painter: Drawhorizontalline(true)),
    Text(
      "OR",
      style: TextStyle(
          color: PPColors.primaryColor,
          fontWeight: FontWeight.bold,
          fontSize: PPUIHelper.FontSizeLarge),
    ),
    CustomPaint(painter: Drawhorizontalline(false))
  ],
 );
}