フラッターでテキストに下線を引く方法

Textウィジェット内のフラッターでテキストに下線を引く方法は？

のfontStyleプロパティ内に下線が見つからないようですTextStyle

すべてに下線を引くときは、テキストウィジェットでTextStyleを設定できます。

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

テキストの一部に下線を引くだけの場合は、Text.rich()（またはリッチテキストウィジェット）を使用して、文字列をスタイルを追加できる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、リストには、それに続くスタイル（そしておそらくunstyled）のテキストが含まれています。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とそのパディングプロパティを使用する型破りなアプローチを使用する必要があります。

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