Как сделать флаттер по индивидуальному оформлению текста? - PullRequest
0 голосов
/ 30 июня 2019

У меня есть следующий виджет, который должен быть частью столбца в моем приложении флаттера: enter image description here
Я попытался создать этот виджет, создав строку, затем поместив текстовый виджет внутри этой строки, а затем выполняя поиск текстового оформления, в котором по две строки с каждой стороны текста. Но я не нашел ни одного украшения, обеспечивающего эту форму. Единственное украшение, которое я нашел:

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

это даст: enter image description here
Я также подумал о другом решении - сделать каждую из этих 2 строк виджетом и поместить 3 виджета (2 строки и текст между ними) в строку.
Но я думаю, что флаттер предоставляет более простое решение для этого.
Любая идея будет полезна.

1 Ответ

0 голосов
/ 01 июля 2019

Это должно сделать это.Использует встроенные виджеты Row и Divider:

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