How to make flutter customized text decoration?

user_8464442 0
Viewed 3270

I have the following widget that is required to be part of a column in my flutter application: enter image description here
I tried to make this widget by creating a row then put a text widget inside that row and then search for a text decoration that provide that 2 lines to each side of the text. But i did not found any decoration that provide this shape. The only decoration that i found is:

Text('OR',
  style: TextStyle(
    fontSize: 30,
    color: Colors.grey,
    decoration: TextDecoration.underline
  ),
)

this will give: enter image description here
I also thought about another solution that to make each one of these 2 lines a widget and put the 3 widgets (the 2 lines and the text between them) inside a row.
But I think that flutter provide a more easy solution for this.
Any idea will be helpful.

text-decorations flutter widget
2 Answers
Row(
  children:[
    Expanded(
      child: Divider(),
    ),

    Text('OR',
     style: TextStyle(
     fontSize: 30,
     color: Colors.grey,
     ),
    ),
    Expanded(
      child: Divider(),
    ),
  ],
);
user_173900980

This should do it. Takes advantage of the built-in Row and Divider widgets:

class LineWithTitle extends StatelessWidget {
  const LineWithTitle({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Expanded(
          child: Divider(),
        ),
        Padding(
          padding: const EdgeInsets.all(16.0),
          child: Text('Jhone'),
        ),
        Expanded(
          child: Divider(),
        ),
      ],
    );
  }
}
user_3274470
Related