How to create one line and insert text center - flutter

Question

I want to ask about design in flutter. I don't know how to do it.
I insert the image for your see my draw. Hope your guys can help me.

Answer 1

For Creating Horizontal line(Divider) around Text Widget
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,
)),
),
]),

Answer 2

Try this class,
class DividerWithText extends StatelessWidget {
final String text;
final TextStyle textStyle;
final Color color;
const DividerWithText({Key key, this.text, this.color, this.textStyle})
: assert(text != null),
super(key: key);
#override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Expanded(child: Divider(color: color)),
const SizedBox(width: 5.0),
Text(
text,
style: textStyle?.copyWith(color: textStyle.color ?? color) ??
TextStyle(color: color),
),
const SizedBox(width: 5.0),
Expanded(child: Divider(color: color)),
],
);
}
}
Usage:
Text("Login"),
DividerWithText(
text: "Or",
textStyle: TextStyle(fontSize: 20.0),
color: Colors.red,
),
Text("Google"),

Answer 3

there is lots of approach to this
1) using something like this
Row(
children: <Widget>[
Flexible(
child: Divider(
color: Colors.black,
height: 4,
),
),
Padding(
padding: const EdgeInsets.all(18.0),
child: Text(
"Or",
style: TextStyle(backgroundColor: Colors.white),
),
),
Flexible(
child: Divider(
color: Colors.black,
height: 4,
),
),
],
)
2) this code has better performance
class TextWithLine extends StatelessWidget {
#override
Widget build(BuildContext context) {
return CustomPaint(
size: Size(MediaQuery.of(context).size.width, 100),
painter: TextWithLinePainter(
color: Colors.red,
text: "Or",
textStyle: TextStyle(
color: Colors.black,
fontSize: 15,
),
lineColor: Colors.black54,
lineSize: 1,
margin: 8,
),
);
}
}
class TextWithLinePainter extends CustomPainter {
String text;
TextStyle textStyle;
Color color;
Color lineColor;
double lineSize;
double margin;
TextWithLinePainter({this.text, this.textStyle, this.color, this.lineColor, this.lineSize, this.margin});
#override
void paint(Canvas canvas, Size size) {
final textSpan = TextSpan(
text: text,
style: textStyle,
);
final textPainter = TextPainter(
text: textSpan,
textDirection: TextDirection.ltr,
);
textPainter.textAlign = TextAlign.center;
textPainter.layout(
minWidth: 0,
maxWidth: size.width,
);
var textW = textPainter.width;
var textH = textPainter.height;
textPainter.paint(
canvas,
Offset(
size.width / 2 - textW / 2,
size.height / 2 - textH / 2,
),
);
Paint linePainter = Paint()
..color = lineColor
..isAntiAlias = true
..strokeWidth = lineSize;
var firstLineEndX = size.width / 2 - (textW / 2) - margin;
canvas.drawLine(
Offset(0, size.height / 2),
Offset(firstLineEndX, size.height / 2),
linePainter,
);
var secondLineStartX = (size.width / 2) + (textW / 2) + margin;
canvas.drawLine(
Offset(secondLineStartX, size.height / 2),
Offset(size.width, size.height / 2),
linePainter,
);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}