I am trying to show two horizontal lines either side of text: Or . As shown in the image below:

I have tried to do this using a Row with two dividers and a text in it. However it is only showing the Text("Or"), on the screen.

Here is the code I am trying:

Widget showDivider() {
return Padding(
  padding: const EdgeInsets.only(top: 8.0, bottom: 8.0),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Divider(
        indent: 10,
        endIndent: 10,
        thickness: 5.0,
        height: 5.0,
        color: Colors.black87,
      ),
      Text('or'),
      Divider(
        indent: 10,
        endIndent: 10,
        thickness: 5.0,
        height: 5.0,
        color: Colors.black87,
      ),
    ],
  ),
);

}

No matter which settings I try on the Dividers they are not showing.

Any help in getting this sorted would be appreciated. Many thanks.

CodePudding user response：

Wrap your Both Dividers with Expanded.

CodePudding user response：

Wrap both the dividers with expanded widgets

Widget showDivider() {
return Padding(
  padding: const EdgeInsets.only(top: 8.0, bottom: 8.0),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
     Expanded(
      child: Divider(
        indent: 10,
        endIndent: 10,
        thickness: 5.0,
        height: 5.0,
        color: Colors.black87,
      ),
      )
      Text('or'),
      Expanded(
        child: Divider(
        indent: 10,
        endIndent: 10,
        thickness: 5.0,
        height: 5.0,
        color: Colors.black87,
      ),
     ).
    ],
  ),
);

CodePudding user response：

Use Expanded Widgets

Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Expanded(
              flex: 2,
              child: Divider(
                indent: 10,
                endIndent: 10,
                thickness: 5.0,
                height: 5.0,
                color: Colors.black87,
              ),
            ),

            Expanded(
              flex: 1,
              child: Text(
                'or',
                textAlign: TextAlign.center,
              ),
            ),

            Expanded(
              flex: 2,
              child: Divider(
                indent: 10,
                endIndent: 10,
                thickness: 5.0,
                height: 5.0,
                color: Colors.black87,
              ),
            ),
          ],
        ),

CodePudding user response：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Expanded(
              child: Container(
                  margin: const EdgeInsets.only(left: 10.0, right: 10.0),
                  height: .3,
                  width: double.infinity,
                  color: Colors.black),
            ),
            Text('or'),
            Expanded(
              child: Container(
                  margin: const EdgeInsets.only(left: 10.0, right: 10.0),
                  height: .3,
                  width: double.infinity,
                  color: Colors.black),
            ),
          ],
        ),
      ),
    );
  }