Kapat
Anasayfa 290 0

Flutter, RichText nedir? Nasıl kullanılır?

Türkçeye çevirdiğimizde zengin metin anlamına gelen RichText Widget’ı, birden fazla stil kullanan metinler için kullanılmaktadır. Basit bir proje yapalım. AppBar’mızdaki başlık: “Merhaba Dünya” olsun.

Şimdi burada yapmak istediğimiz şey 2 kelimenin birbirinden farklı özellikte olması. Mesela “Merhaba” kelimesi kırmızı, “Dünya” kelimesi beyaz olsun. İşte bunu yapmak için RichText Widget’ını kullanırız. Bu widget’ı kullanmak için alt nesnelere ihtiyacımız vardır. Alt nesne olarak ise TextSpan Widget’ını kullanırız.

Şimdi tekrar projemize dönerlim “Merhaba” kelimesini kırmızı “Dünya” kelimesini beyaz istiyorduk yukarıdaki görseldeki gibi önce RichText’imizi oluşturuyoruz. Ardından RichText’in text: parametresine bir TextSpan oluşturuyoruz.

RichText(
text: TextSpan(children: [])
           )

Şimdi children parametresine öncelikle “Merhaba” kelimesi için yeni bir TextSpan oluşturuyoruz ardından “text” parametresine girmek istediğimiz metni yani “Merhaba” kelimesini giriyoruz. .Buradan sonrası klasik Text Widget’ındakiyle aynı style: parametresine TextStyle widget’ını getiriyoruz. “color” parametresine Colors.red diyerek kırmızı yapıyoruz.

Şimdide aynı şeyleri “Dünya” kelimesi için yapıyoruz. Tek farkla renginin beyaz olması için Colors.white diyoruz.

Ve evet hedefimize başarıyla ulaştık. 🥳🥳

Şimdi başka bir proje yapalım. Stack Overflow sitesinin giriş ekranındaki “Hesabın yok mu ? kaydol” yazısını aynen yazalım.

RichText’imizi oluşturuyoruz. Ardından text: parametresine TextSpan widget’ımızı ekliyoruz.

RichText(
text: TextSpan(children: [])
       )

Ardından “Hesabın yok mu?” metnini gri yazacağımız için onu bir TextSpan’e kaydolu başka bir TextSpan’e koyup renklerini değiştiriyoruz.

Başka bir yazıda görüşürüz. Sağlıklı kalın, evde kalın.

İbrahim Talha Demir {İbrahim_Talha_DEMİR}