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

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 = [];
    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.