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: [
      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")