Flutterでテキストに下線を引く方法質問する

Question

すべてに下線を引く場合は、Text ウィジェットで TextStyle を設定できます。

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

テキストの一部にのみ下線を付けたい場合は、Text.rich()(または RichText ウィジェット) を使用して、文字列をスタイルを追加できる TextSpan に分割する必要があります。

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 1