Flutter Showing two horizontal lines either side of a text - flutter

Question

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.

Answer 1

Wrap your Both Dividers with Expanded.

Answer 2

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,
),
).
],
),
);

Answer 3

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,
),
),
],
),

Answer 4

#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),
),
],
),
),
);
}