如何制作轻巧的个性化文字装饰?

时间:2019-06-29 22:30:08

标签: flutter widget text-decorations

我的flutter应用程序中有以下小部件需要作为列的一部分: 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 :(得分:0)

这应该做到。利用内置的RowDivider小部件:

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