Jak podkreślić tekst trzepotaniem

Jak podkreślić tekst trzepotaniem w Textwidżecie?

Nie mogę znaleźć podkreślenia we fontStylewłaściwościTextStyle

Podkreślając wszystko, możesz ustawić TextStyle w widżecie Tekst.

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

Jeśli chcesz podkreślić tylko część tekstu, musisz użyć Text.rich()(lub widżetu RichText) i podzielić ciąg na TextSpans, do którego możesz dodać styl.

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 jest trochę dziwny. textParametrem jest domyślny styl ale childrenlista zawiera stylizowany (i ewentualnie pierwotnych ustawień) tekst, który go śledzić. Możesz użyć pustego ciągu, textjeśli chcesz zacząć od tekstu ze stylem.

Możesz również dodać TextDecorationStyle, aby zmienić wygląd dekoracji. Tutaj jest przerywana:

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

i TextDecorationStyle.dotted:

i TextDecorationStyle.double:

i TextDecorationStyle.wavy:

Robisz to poprzez zastosowanie decoration: TextDecoration.underlinedo TextStyletematyce Text.

Z przykładem motywu:

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

Podstawowy przykład:

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

Możesz użyć TextDecoration w stylu, aby podkreślić dany tekst.

Na przykład

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

Ekscytujące rozwiązanie
Jeśli chcesz mieć kontrolę nad odległością między tekstem a podkreśleniem, możesz użyć tego hacka. Krótko mówiąc, ukrywasz rzeczywisty tekst za pomocą Colors.transparent, a następnie wyświetlasz przesunięty cień, który unosi się nad podkreśleniem tekstu.

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

Jak zobaczysz poniżej, jeśli użyjesz gotowego podkreślenia tekstu, przykleja się ono do dołu tekstu i może wyglądać trochę brzydko,

Nudne rozwiązania

Używając samego widżetu Tekst , możesz dodać podkreślenie z niestandardowym stylem i kolorem:

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

Jedyny problem, jaki mam z tym podejściem, polega na tym, że nie masz kontroli nad tym, jak blisko jest podkreślenie do dołu tekstu.

Jeśli chcesz zwiększyć odstępy, musisz użyć niekonwencjonalnego podejścia, które wykorzystuje Container i jego właściwość wypełnienia.

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

Miej oko na ten problem z GitHub, aby uzyskać prostsze rozwiązanie.

na przykład

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