Як підкреслити текст у трепет

Як підкреслити текст, що лунає всередині Textвіджета?

Я не можу знайти підкреслення всередині fontStyleвластивостіTextStyle

Підкреслюючи все, ви можете встановити TextStyle на віджеті Text.

Text(
  'Hello world',
  style: TextStyle(
    decoration: TextDecoration.underline,
  ),
)

Якщо ви хочете лише підкреслити частину тексту, вам потрібно використовувати Text.rich()(або віджет RichText) і розбити рядок на TextSpans, до якого ви можете додати стиль.

Text.rich(
  TextSpan(
    text: 'Hello ',
    style: TextStyle(fontSize: 50),
    children: <TextSpan>[
      TextSpan(
          text: 'world',
          style: TextStyle(
            decoration: TextDecoration.underline,
          )),
      // can add more TextSpans here...
    ],
  ),
)

TextSpan трохи дивний. textПараметр за замовчуванням стиль , але childrenсписок містить текст у стилі (і , можливо , без стилів) , які слідують його. Ви можете використовувати порожній рядок, textякщо хочете почати зі стилізованого тексту.

Ви також можете додати TextDecorationStyle, щоб змінити вигляд прикраси. Ось пунктир:

Text(
  'Hello world',
  style: TextStyle(
    decoration: TextDecoration.underline,
    decorationStyle: TextDecorationStyle.dashed,
  ),
)

і TextDecorationStyle.dotted:

і TextDecorationStyle.double:

і TextDecorationStyle.wavy:

Ви робите це шляхом застосування decoration: TextDecoration.underlineдо TextStyleз Text.

На прикладі теми:

          Text(
            "text",
            style: Theme
                .of(context)
                .accentTextTheme
                .subhead
                .copyWith(decoration: TextDecoration.underline),
          )

Основний приклад:

          Text(
            "text",
            style: TextStyle(decoration: TextDecoration.underline),
          )

Ви можете використовувати TextDecoration у стилі, щоб підкреслити заданий текст.

Наприклад

Text(
    "Your text here",
    style: TextStyle(
        decoration: TextDecoration.underline),
    )
)

Захоплююче рішення
Якщо ви хочете контролювати відстань між текстом та підкресленням, ви можете скористатися цим хаком. Коротше кажучи, ви приховуєте фактичний текст за допомогою Colors.transparent, а потім відображаєте зміщену тінь, яка висить над підкресленням тексту.

        Text(
            "Forgot Password?",
            style: TextStyle(
              shadows: [
                Shadow(
                    color: Colors.black,
                    offset: Offset(0, -5))
              ],
              color: Colors.transparent,
              decoration:
              TextDecoration.underline,
              decorationColor: Colors.blue,
              decorationThickness: 4,
              decorationStyle:
              TextDecorationStyle.dashed,
            ),
          )

Як ви побачите нижче, якщо ви використовуєте нестандартне підкреслення тексту, воно прилипає до нижньої частини тексту і може виглядати трохи потворно,

Нудні рішення

Використовуючи лише віджет " Текст", ви можете додати підкреслення за допомогою власного стилю та кольору:

Text(
  "Forgot Password?",
  style: TextStyle(
    decoration: TextDecoration.underline,
    decorationColor: Colors.blue,
    decorationThickness: 4,
    decorationStyle: TextDecorationStyle.dashed,
   ),
)

Єдине питання, яке я маю при такому підході, полягає в тому, що ви не маєте контролю над тим, наскільки підкреслене знаходження знаходиться внизу тексту.

Якщо ви хочете збільшити інтервал, вам доведеться використовувати нетрадиційний підхід, який використовує Container та його властивість padding.

Container(
     padding: EdgeInsets.only(
       bottom: 5, // Space between underline and text
     ),
     decoration: BoxDecoration(
         border: Border(bottom: BorderSide(
         color: Colors.amber, 
         width: 1.0, // Underline thickness
        ))
      ),
     child: Text(
        "Forgot Password?",
        style: TextStyle(
        color: Colors.black,
        ),
       ),
      )

Слідкуйте за цим питанням GitHub для більш простого рішення.

наприклад

Text(
  "Terms and Condition",
  style: TextStyle(
    decoration:
        TextDecoration.underline,
    height: 1.5,
    fontSize: 15,
    fontWeight: FontWeight.bold,
    fontFamily: 'Roboto-Regular',
  ),
),