In flutter, how to add an outline button that look like a text field with underline?

Question

In flutter, how to add an outline button that look like a text field with underline? I only need a bottom underline.

           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')),
)

I don't know how it would turn out, but I hope it helps to give you idea to reach your need

Answer 2

If I understand your question correctly, you just need to add decoration property of the text and pass TextDecoration.underline to it, to achieve the bottom underline. Working sample code below:

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),
            ),
          ),
            )
      ),

Hope this answers your question.