在Flutter中，如何添加看起来像带有下划线的文本字段的轮廓按钮？

Question

在Flutter中，如何添加看起来像带有下划线的文本字段的轮廓按钮？我只需要一个下划线。

           OutlineButton(
              color: Theme.of(context).buttonColor,
              textColor: Theme.of(context).textTheme.bodyText1.color,
              // disabledColor: Colors.grey,
              disabledTextColor: Colors.black,
              borderSide: (),
              onPressed: () {

              },
          child: Center(
            child: Text(
              "No Reminder",
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 18.0),
            ),
          ),
            )

Answer 1

GestureDetector(
  onTap: () => print('tapped'),
  child: Container(
    // optional
    padding: const EdgeInsets.only(bottom: 1.0),
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(
            width: 2.0, color: Colors.lightBlue.shade900))),
    child: Text('button')),
)

我不知道结果如何，但是希望它能帮助您提出满足您需求的想法

Answer 2

如果我正确理解了您的问题，则只需要添加文本的decoration属性并将其传递给TextDecoration.underline，即可获得下划线。下面的工作示例代码：

body: Center(
        child: OutlineButton(
              color: Theme.of(context).buttonColor,
              textColor: Theme.of(context).textTheme.bodyText1.color,
              // disabledColor: Colors.grey,
              disabledTextColor: Colors.black,
            //  borderSide: (),
              onPressed: () {

              },
          child: Center(
            child: Text(
              "No Reminder",
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 18.0, decoration: TextDecoration.underline),
            ),
          ),
            )
      ),

希望这能回答您的问题。

Answer 3

您可以将BoxDecoration用作按钮的父级。 OutlineButton勾勒出所有4个侧面的轮廓，或者没有轮廓。在这里查看他们的文档https://api.flutter.dev/flutter/painting/BorderSide-class.html