En Yeni Konular

Flutter : Text Widgeti ve Custom Font

Flutter Text Widget

Uygulamalarımızın her yerinden nerdeyse en çok kullanacağımız, Text Widget’inin özelliklerine ve Özel font eklemeye bakalım.

Örneklerin iskeleti ve giriş

Text Widgetini incelerken, her bir özelliği için ayrı bir text widgeti oluşturup Column widget’inin içine yukarıdan aşşağı olacak şekilde tek tek ekleyerek bakacağız.

Column’un children özelliği sayesinden alt alta widgetler ekleyebiliriz.

SingleChildScrollView eğer widgetlerimiz ekrana sığmayacak kadar büyür ise aşşağı sürüklenme özelliği vericek.

Varsayılan Text Widgeti

style özelliği

Text Widget’inin style özelliği sayesinde, text widget’imizin rengine, boyutunu gibi temel işlemleri yapabildiğimiz gibi daha bir çok şekilde özelleştirebiliriz.

style dedikten sonra TextStyle çağırıp içini dolduruyoruz.

style özelliği kullanma
TextStyle ile foreground

Bu sefer style özelliği ile textimizin ön tarafının görünümüyle oynayalım.

foreground özelliğinin istediği Paint sınfını şu şekilde de oluşturabilirdik,

atama şekli şu şekilde olurdu : foreground : p,

TextStyle foreground
TextStyle fontWeight

fontWeight özelliği sayesinde textimizin kalınlığını ayarlayabiliriz.

kullandığımız fontun desteğine göre en ince 100 en kalın 900 olmak üzere değişiklik yapabiliriz.

TextStyle FontWeight
TestStyle fontStyle

fontStyle ile italic mi normal mi ayarını yapabiliriz.

fontStyle
TextStyle Shadows

TextStyle’ın shadow parametresi bizden List şeklinde Shadow ister, bir veya birden fazla shadow verebiliriz.

TextStyle ile shadow
TextStyle decoration

decoration ile alt çizği üst çizği gibi sitiller ekleyebiliriz.

textStyle decoration

Özel Font Kullanımı

Öncelikle test için Sigmar One adlı fontu indiriyorum.

indirdiğim fontu proje içerisinde assets diye klasör açıp onun içerisinede fontlar adlı klasör açıyorum ve fontumu oraya kopyalıyorum.

Daha sonra pupspec.yaml dosyamın içerisine fontumun yerini, ismini gibi şeyleri flutter’in sitesinde belirtildiği şekilde yazıyorum

Uygulama içinde kullanalım

Flutter Özel Font
Farklı tiplerden fontlar ekleme 

Eğer farklı weight(kalınlık) ve style(italic mi normal mi)‘larda fontlar kullanacak isek onlarıda belirtmeliyiz.

Farklı tiplerde fontlar

textAlign

textAlign özelliği sayesinde textimizi içinde bulunduğu konuma göre hizalayabiliriz.

TextAlign ve ardından .left, center, right, start, justify, end

textAlign

textDirection

textDirection ile sağdan solamı, soldan sağamı ayarını yapabiliriz.

TextDirection.rtl

softwrap

Ekrana sığmayacak bir text yazdıysanız normal şartlarda sığmayan kısım görünmeyecektir, ama softwrap true yaparak bir alt satırdan devam etmesini isteyebiliriz.

softWrap

overFlow

overFlow ile ekrana sığmayan kısmın nasıl görüneceğini ayarlayabiliriz.

Kullanım yerine örnek vermek gerekirse database veya internetden aldığınız veriyi, başlık olarak gösterirken, başlık kısmına sığmayan kısmı … şeklinde göstertebiliriz. Böylece kullanıcıya konunun devamı içerde gibi bir mesaj verebiliriz.

overFlow

Örneğin Tamamı

Flutter Text Widget Detay

Hakkında Necip Akgöz

İLGİNİZİ ÇEKEBİLİR

Flutter : Expanded Ve Flexible

BaşlıklarFlutter Text WidgetÖrneklerin iskeleti ve girişstyle özelliğiTextStyle ile foregroundTextStyle fontWeightTestStyle fontStyleTextStyle ShadowsTextStyle decorationÖzel Font KullanımıFarklı …

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir