Как подчеркнуть текст во флаттере

Question

Как подчеркнуть текст во флаттере внутри Text виджета?

Не получается найти подчеркивание внутри fontStyle свойства TextStyle

Answer 1

Подчеркивая все, вы можете установить TextStyle на виджет Текст.

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:

Answer 2

Вы делаете это путем применения decoration: TextDecoration.underline к TextStyle из Text.

с примером темы:

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

Базовый пример:

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