CODEWITHSUNDEEP
flutterdartflutter-layout
phongyewtong
phongyewtong

Reputation: 5309

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

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

Upvotes: 4

Views: 5259

Answers (3)

Akash Khan
Akash Khan

Reputation: 33

You can use BoxDecoration as parent of your button. OutlineButton outlines all 4 sides or none. Have a look at their documentation here https://api.flutter.dev/flutter/painting/BorderSide-class.html

Upvotes: 1

Darshan
Darshan

Reputation: 11669

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

enter image description here

Hope this answers your question.

Upvotes: 2

Federick Jonathan
Federick Jonathan

Reputation: 2864

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

Upvotes: 2

Related Questions