Necip Akgöz Mobil Yazılım dünyası ile ilgili yazılar 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.
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 29 30 | import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: TextWidget(), ); } } class TextWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("Text Widgeti")), //widgetlerimiz ekrana sığmayacak kadar büyür ise aşşağı sürüklenme özelliği vericek. body: SingleChildScrollView( child: Column( children: <Widget>[ Text("Özellikleri oynanmamış widget"), ], ), ), ); } } |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | Text( "TextStyle ile özelleştirme", style: TextStyle( // Textimizin rengi color: Colors.amberAccent, // Font Büyüklüğü fontSize: 22, // arkaPlan rengi verir backgroundColor: Colors.black87, // tutacağı yerin yüksekliği (font büyüklüğü ile çarpılır) height: 1.2, // Kelimeler arasındaki boşluk wordSpacing: 10, // harfler arasındaki boşluk letterSpacing: 5, ), ), |
TextStyle ile foreground
Bu sefer style özelliği ile textimizin ön tarafının görünümüyle oynayalım.
1 2 3 4 5 6 7 8 9 10 11 12 | Text( "Text Foreground Özelleştirme", style: TextStyle( fontSize: 30, foreground: Paint() ..color = Colors.red // boyama stilini boşluklu şekilde yapar ..style = PaintingStyle.stroke // stroke uygularken aralardaki boşluk ..strokeWidth = 0.8, ), ), |
foreground özelliğinin istediği Paint sınfını şu şekilde de oluşturabilirdik,
atama şekli şu şekilde olurdu : foreground : p,
1 2 3 4 | var p= Paint(); p.color = Colors.red; p.style = PaintingStyle.stroke; p.strokeWidth = 0.8; |
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.
1 2 3 4 | Text( "TextStyle FontWeight 700", style: TextStyle(fontSize: 26, fontWeight: FontWeight.w700), ), |
TestStyle fontStyle
fontStyle ile italic mi normal mi ayarını yapabiliriz.
1 2 3 4 5 6 7 8 | Text( "TextStyle FontStyle italic", style: TextStyle( fontSize: 26, color: Colors.pink, fontStyle: FontStyle.italic, ), ), |
TextStyle Shadows
TextStyle’ın shadow parametresi bizden List şeklinde Shadow ister, bir veya birden fazla shadow verebiliriz.
1 2 3 4 5 | const Shadow({ this.color = const Color(_kColorDefault), this.offset = Offset.zero, this.blurRadius = 0.0, } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | Text( "TextStyle Tekli Shadow", style: TextStyle( fontSize: 26, color: Colors.black87, shadows: [ Shadow( // Gölgenin rengi color: Colors.black, // ilk parametre yatay başlangıç noktası 2. dikey offset: Offset(2, 2), // sıçrama genişliği blurRadius: 2, ), ], ), ), |
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 | Text( "TextStyle Birden Çok Shadow", style: TextStyle( fontSize: 26, color: Colors.deepPurple, shadows: [ Shadow( // Gölgenin rengi color: Colors.black, // ilk parametre yatay başlangıç noktası 2. dikey offset: Offset(2, 2), // sıçrama genişliği blurRadius: 2, ), Shadow( // Gölgenin rengi color: Colors.blueAccent, // ilk parametre yatay başlangıç noktası 2. dikey offset: Offset(3, 6), // sıçrama genişliği blurRadius: 2, ), ], ), ), |
TextStyle decoration
decoration ile alt çizği üst çizği gibi sitiller ekleyebiliriz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | Text( "TextStyle decoration underline", style: TextStyle( fontSize: 26, decoration: TextDecoration.underline, decorationColor: Colors.red, decorationStyle: TextDecorationStyle.wavy, ), ), Text( "TextStyle decoration lineThrough", style: TextStyle( fontSize: 26, decoration: TextDecoration.lineThrough, decorationColor: Colors.blue, decorationStyle: TextDecorationStyle.solid, ), ), |
Ö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
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 | name: basit_widgetler description: A new Flutter project. version: 1.0.0+1 environment: sdk: ">=2.1.0 <3.0.0" dependencies: flutter: sdk: flutter cupertino_icons: ^0.1.2 dev_dependencies: flutter_test: sdk: flutter flutter: fonts: # Fontun ismi - family: SigmarOne # Bulunduğu konum fonts: - asset: assets/fontlar/SigmarOne-Regular.ttf uses-material-design: true |
Uygulama içinde kullanalım
1 2 3 4 5 6 7 8 | Text( "Özel Font Kullanımı", style: TextStyle( fontSize: 26, // pupspec.yaml'da family adı olarak verdiğim ismi yazdım fontFamily: "SigmarOne", ), ), |
Farklı tiplerden fontlar ekleme
Eğer farklı weight(kalınlık) ve style(italic mi normal mi)‘larda fontlar kullanacak isek onlarıda belirtmeliyiz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | flutter: fonts: - family: Raleway fonts: - asset: assets/fonts/Raleway-Regular.ttf - asset: assets/fonts/Raleway-Bold.ttf weight: 700 - asset: assets/fonts/Raleway-Black.ttf weight: 900 - family: RobotoCondensed fonts: - asset: assets/fonts/RobotoCondensed-Regular.ttf - asset: assets/fonts/RobotoCondensed-Bold.ttf weight: 700 - asset: assets/fonts/RobotoCondensed-Light.ttf weight: 300 - asset: assets/fonts/RobotoCondensed-Italic.ttf style: italic |
textAlign
textAlign özelliği sayesinde textimizi içinde bulunduğu konuma göre hizalayabiliriz.
TextAlign ve ardından .left, center, right, start, justify, end
1 2 3 4 5 6 7 8 | Container( constraints: BoxConstraints.expand(width: 300, height: 30), color: Colors.green, child: Text( "TextAlign", textAlign: TextAlign.end, ), ), |
textDirection
textDirection ile sağdan solamı, soldan sağamı ayarını yapabiliriz.
1 2 3 4 5 6 7 8 | Container( constraints: BoxConstraints.expand(width: 300, height: 30), color: Colors.greenAccent, child: Text( "Buradaki yazı sağdan sola olacak şekilde düzenlendi", textDirection: 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | // softwarp açık Container( color: Colors.red, constraints: BoxConstraints.expand(height: 40, width: 200), child: Text("Buradaki text ekrana sığmaz ise alt satıra geçer", softWrap: true), ), // softwarp kapalı Container( color: Colors.blue, constraints: BoxConstraints.expand(height: 40, width: 200), child: Text( "Buradaki girilen text ekrana sığmaz ise görünmeyecek", softWrap: false, ), ), |
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.
1 2 3 4 5 6 7 8 9 | Container( color: Colors.lightGreen, constraints: BoxConstraints.expand(height: 40, width: 200), child: Text( "Ekrana sığmayan text'in nasıl görünmesini istersiniz", softWrap: false, overflow: TextOverflow.ellipsis, ), ), |
Örneğin Tamamı
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 | import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: TextWidget(), ); } } class TextWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("Text Widgeti")), //widgetlerimiz ekrana sığmayacak kadar büyür ise aşşağı sürüklenme özelliği vericek. body: SingleChildScrollView( child: Column( // İçerisindeki widgetleri bağlangıç noktalarına yani sola dayıyacak crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text("Özellikleri oynanmamış widget"), Text( "TextStyle ile özelleştirme", style: TextStyle( // Textimizin rengi color: Colors.amberAccent, // Font Büyüklüğü fontSize: 22, // arkaPlan rengi verir backgroundColor: Colors.black87, // tutacağı yerin yüksekliği (font büyüklüğü ile çarpılır) height: 1.2, // Kelimeler arasındaki boşluk wordSpacing: 10, // harfler arasındaki boşluk letterSpacing: 5, ), ), Text( "Text Foreground Özelleştirme", style: TextStyle( fontSize: 30, foreground: Paint() ..color = Colors.red // boyama stilini boşluklu şekilde yapar ..style = PaintingStyle.stroke // stroke uygularken aralardaki boşluk ..strokeWidth = 0.8, ), ), Text( "TextStyle FontWeight 700", style: TextStyle(fontSize: 26, fontWeight: FontWeight.w700), ), Text( "TextStyle FontStyle italic", style: TextStyle( fontSize: 26, color: Colors.pink, fontStyle: FontStyle.italic, ), ), Text( "TextStyle Tekli Shadow", style: TextStyle( fontSize: 26, color: Colors.black87, shadows: [ Shadow( // Gölgenin rengi color: Colors.black, // ilk parametre yatay başlangıç noktası 2. dikey offset: Offset(2, 2), // sıçrama genişliği blurRadius: 2, ), ], ), ), Text( "TextStyle Birden Çok Shadow", style: TextStyle( fontSize: 26, color: Colors.deepPurple, shadows: [ Shadow( // Gölgenin rengi color: Colors.black, // ilk parametre yatay başlangıç noktası 2. dikey offset: Offset(2, 2), // sıçrama genişliği blurRadius: 2, ), Shadow( // Gölgenin rengi color: Colors.blueAccent, // ilk parametre yatay başlangıç noktası 2. dikey offset: Offset(3, 6), // sıçrama genişliği blurRadius: 2, ), ], ), ), Text( "TextStyle decoration underline", style: TextStyle( fontSize: 26, decoration: TextDecoration.underline, decorationColor: Colors.red, decorationStyle: TextDecorationStyle.wavy, ), ), Text( "TextStyle decoration lineThrough", style: TextStyle( fontSize: 26, decoration: TextDecoration.lineThrough, decorationColor: Colors.blue, decorationStyle: TextDecorationStyle.solid, ), ), Text( "Özel Font Kullanımı", style: TextStyle( fontSize: 26, // pupspec.yaml'da family adı olarak verdiğim ismi yazdım fontFamily: "SigmarOne", ), ), // Gösterebilmek için 300 e 30 bir kutu Container( constraints: BoxConstraints.expand(width: 300, height: 30), color: Colors.amberAccent, child: Text( "TextAlign.end", textAlign: TextAlign.end, ), ), SizedBox(height: 5), Container( constraints: BoxConstraints.expand(width: 300, height: 30), color: Colors.greenAccent, child: Text( "Buradaki yazı sağdan sola olacak şekilde düzenlendi", textDirection: TextDirection.rtl, ), ), // softwarp açık Container( color: Colors.red, constraints: BoxConstraints.expand(height: 40, width: 200), child: Text("Buradaki text ekrana sığmaz ise alt satıra geçer", softWrap: true), ), // softwarp kapalı Container( color: Colors.blue, constraints: BoxConstraints.expand(height: 40, width: 200), child: Text( "Buradaki girilen text ekrana sığmaz ise görünmeyecek", softWrap: false, ), ), Container( color: Colors.lightGreen, constraints: BoxConstraints.expand(height: 40, width: 200), child: Text( "Ekrana sığmayan text'in nasıl görünmesini istersiniz", softWrap: false, overflow: TextOverflow.ellipsis, ), ), ], ), ), ); } } |
