Flutter'da metnin altı nasıl çizilir

TextWidget'ın içindeki flutter'daki metnin altı nasıl çizilir ?

fontStyleÖzelliğinin içinde alt çizgi bulamıyorumTextStyle

Her şeyin altını çizerken, Metin widget'ında bir Metin Stili ayarlayabilirsiniz.

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

Metnin yalnızca bir kısmının altını çizmek istiyorsanız, o zaman Text.rich()(veya bir RichText widget'ı) kullanmanız ve dizeyi bir stil ekleyebileceğiniz TextSpans'e bölmeniz gerekir.

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 biraz tuhaf. textParametre varsayılan stil ama childrenliste onu takip tarz (ve muhtemelen stillendirilmemiş) metin içeriyor. textStili metinle başlamak istiyorsanız boş bir dize kullanabilirsiniz .

Dekorasyonun görünümünü değiştirmek için bir TextDecorationStyle da ekleyebilirsiniz. İşte kesikli:

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

ve TextDecorationStyle.dotted:

ve TextDecorationStyle.double:

ve TextDecorationStyle.wavy:

Sen uygulayarak bunu decoration: TextDecoration.underlineiçin TextStylea Text.

Tema örneği ile:

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

Temel örnek:

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

Belirli bir metnin altını çizmek için TextDecoration'ı stilde kullanabilirsiniz.

Örneğin

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

Örneğin

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

Heyecan verici çözüm
Metin ile altı çizili arasındaki mesafe üzerinde kontrol sahibi olmak istiyorsanız, bu hack'i kullanabilirsiniz. Kısacası, Colors.transparent kullanarak gerçek metni gizlersiniz ve ardından Metnin alt çizgisinin üzerinde gezinen bir ofset gölgesi görüntülersiniz.

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

Aşağıda göreceğiniz gibi, kullanıma hazır Metin alt çizgisini kullanırsanız, metnin altına yapışır ve biraz çirkin görünebilir,

Sıkıcı Çözümler

Yalnızca Metin widget'ını kullanarak alt çizgiyi özel bir stil ve renkle ekleyebilirsiniz:

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

Bu yaklaşımla ilgili tek sorunum, alt çizginin metnin altına ne kadar yakın olduğu konusunda hiçbir kontrolünüzün olmaması.

Aralığı artırmak istiyorsanız, Container ve onun padding özelliğini kullanan alışılmadık bir yaklaşım kullanmanız gerekecektir.

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

Daha basit bir çözüm için bu GitHub sorununa bir göz atın .