В флаттере, как добавить кнопку контура, которая выглядит как текстовое поле с подчеркиванием?

Question

В флаттере, как добавить кнопку контура, которая выглядит как текстовое поле с подчеркиванием? Мне нужно только нижнее подчеркивание.

           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

Вы можете использовать BoxDecoration в качестве родителя для вашей кнопки. OutlineButton выделяет все 4 стороны или ни одной. Посмотрите их документацию здесь https://api.flutter.dev/flutter/painting/BorderSide-class.html

Answer 2

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 3

Если я правильно понимаю ваш вопрос, вам просто нужно добавить 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),
            ),
          ),
            )
      ),

Надеюсь, что это ответ на ваш вопрос.