TextStyle, Flutter’da metin öğelerine stil uygulamanın temel yoludur. Metin stilleri, örneğin font boyutu, renk, vurgulama ve ayrıştırma ayarları gibi metin öğelerindeki çeşitli özellikleri belirleyen bir nesnedir.
Öncelikle, bir TextStyle nesnesi oluşturmak için TextStyle sınıfını kullanarak başlayabiliriz. Aşağıdaki örnek gibi bir TextStyle nesnesi oluşturalım:
1 2 3 4 5 |
TextStyle myTextStyle = TextStyle( fontSize: 20.0, color: Colors.black, fontWeight: FontWeight.bold, ); |
Bu kod bloğu, 20 piksel boyutunda kalın siyah bir metin stilini tanımlar. fontWeight özelliği, metnin kalınlığını belirler. Burada, FontWeight.bold ile metnin kalınlığı en yüksek ayara getirilmiştir. Ayrıca, metin rengi de belirtilmiştir.
Şimdi bu metin stilini kullanarak bir metin öğesi oluşturalım:
1 2 3 4 |
Text( 'Flutter yazılımı harikadır!', style: myTextStyle, ); |
Bu kod bloğu, “Flutter yazılımı harikadır!” ifadesini myTextStyle nesnesiyle stilize eder. TextStyle nesnesi, metnin stil özelliklerini belirttiğimiz yerdir.
Biraz daha karmaşık bir örnek yapalım ve metin stilini daha ayrıntılı hale getirelim. Aşağıdaki kod bloğu, farklı renklerdeki ve boyutlardaki metinleri içeren bir sütun oluşturur:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
Column( children: [ Text( 'İlk metin', style: TextStyle( fontSize: 18.0, color: Colors.blue, fontWeight: FontWeight.normal, ), ), Text( 'İkinci metin', style: TextStyle( fontSize: 24.0, color: Colors.red, fontWeight: FontWeight.bold, ), ), Text( 'Üçüncü metin', style: TextStyle( fontSize: 14.0, color: Colors.green, fontStyle: FontStyle.italic, ), ), ], ); |
Bu kod bloğu, üç farklı metin öğesi oluşturur, her biri farklı bir stil özelliğiyle donatılmıştır. İlk metin normal kalınlıkta ve mavi renklidir, ikinci metin kalın ve kırmızı renklidir, üçüncü metin ise eğik yazı stili ve yeşil renkli olarak belirlenmiştir.
Sonuç olarak, TextStyle, Flutter’da metin stillerinin uygulanması için çok kullanışlı bir araçtır. Bu örneklerin yardımıyla, farklı metin stillerini uygulama konusunda daha fazla fikir edinmiş olabilirsin.
Aşağıdaki örnek, kullanıcı tarafından belirtilen parametrelere göre farklı metin stilleri oluşturur:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
class CustomText extends StatelessWidget { final String text; final double fontSize; final Color color; final FontWeight fontWeight; final FontStyle fontStyle; CustomText({ required this.text, required this.fontSize, required this.color, required this.fontWeight, required this.fontStyle, }); @override Widget build(BuildContext context) { return Text( text, style: TextStyle( fontSize: fontSize, color: color, fontWeight: fontWeight, fontStyle: fontStyle, ), ); } } |
Bu kod bloğu, CustomText adlı bir özel widget sınıfı oluşturur. Bu widget, text, fontSize, color, fontWeight ve fontStyle gibi parametreler alır. Bu parametreler, metin stilinin farklı özelliklerinin belirlenmesini sağlar.
Bu özel widget’ı kullanarak farklı metin stilleri oluşturabiliriz:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
Column( children: [ CustomText( text: 'Normal kalınlıkta siyah metin', fontSize: 20.0, color: Colors.black, fontWeight: FontWeight.normal, fontStyle: FontStyle.normal, ), CustomText( text: 'Kalın kırmızı metin', fontSize: 24.0, color: Colors.red, fontWeight: FontWeight.bold, fontStyle: FontStyle.normal, ), CustomText( text: 'Eğik yazı stili yeşil metin', fontSize: 18.0, color: Colors.green, fontWeight: FontWeight.normal, fontStyle: FontStyle.italic, ), ], ); |
Bu kod bloğu, CustomText sınıfını kullanarak üç farklı metin öğesi oluşturur. Her biri, farklı bir parametre değeri ile farklı bir metin stilinde gösterilir. Bu, kullanıcıların metin stillerini kolayca özelleştirebileceği ve uygulamamızdaki metinlerin daha çeşitli ve özelleştirilmiş görünmesini sağlar.
Sonuç olarak, TextStyle, Flutter’da metin stilleri oluşturmak için kullanışlı bir araçtır. Parametreler eklemek, metin stillerinin özelleştirilmesini ve uygulamalarda daha çeşitli metin stillerinin kullanılmasını sağlar.
Flutter’da TextStyle kullanarak oluşturabileceğimiz 10 farklı örnek şunlar olabilir:
Başlık metni stilini oluşturma:
1 2 3 4 5 |
TextStyle( fontSize: 32.0, fontWeight: FontWeight.bold, color: Colors.blue, ) |
Alt başlık metni stilini oluşturma:
1 2 3 4 5 |
TextStyle( fontSize: 24.0, fontWeight: FontWeight.w600, color: Colors.black, ) |
Normal metin stilini oluşturma:
1 2 3 4 5 |
TextStyle( fontSize: 16.0, fontWeight: FontWeight.normal, color: Colors.grey, ) |
İtalik yazı stili oluşturma:
1 2 3 4 5 |
TextStyle( fontSize: 16.0, fontStyle: FontStyle.italic, color: Colors.black, ) |
Metin gölgesi ekleyerek yazıyı vurgulama:
1 2 3 4 5 6 7 8 9 10 11 12 |
TextStyle( fontSize: 16.0, fontWeight: FontWeight.bold, color: Colors.white, shadows: [ Shadow( blurRadius: 4.0, color: Colors.black, offset: Offset(2.0, 2.0), ), ], ) |
Altı çizgili metin stilini oluşturma:
1 2 3 4 5 |
TextStyle( fontSize: 16.0, decoration: TextDecoration.underline, color: Colors.black, ) |
Üstü çizgili metin stilini oluşturma:
1 2 3 4 5 |
TextStyle( fontSize: 16.0, decoration: TextDecoration.lineThrough, color: Colors.black, ) |
Gölgeli metin stilini oluşturma:
1 2 3 4 5 6 7 8 9 10 11 |
TextStyle( fontSize: 16.0, color: Colors.white, shadows: [ Shadow( blurRadius: 4.0, color: Colors.black, offset: Offset(2.0, 2.0), ), ], ) |
Harf büyüklüğünü küçültme:
1 2 3 4 5 |
TextStyle( fontSize: 16.0, textScaleFactor: 0.8, color: Colors.black, ) |
Çok satırlı metinler için satır yüksekliğini ayarlama:
1 2 3 4 5 |
TextStyle( fontSize: 16.0, height: 1.5, color: Colors.black, ) |
İlk Yorumu Siz Yapın