Google’ın sunduğu Flutter, cross-platform mobil uygulamalar geliştirmenize olanak sağlayan bir framework. Bu konudan daha önce bahsetmiştik. Şu zamanlarda basit projeler geliştirirken, aynı zamanda yeni bir framework olan Flutter’da kullandığım widget’ları buraya yazmaya karar verdim ve ortaya bu blog serisi çıktı.
Peki, bir metin içerisinde bilgi verirken, gelen veri dinamik olarak değişiyorsa ve sayfaya sığmayacak duruma gelirse ne yapacağız? Bir ScrollView kullanacağız!
Tabi ScrollView(…) biçiminde değil. Flutter’a biraz aşinaysanız, alt bileşenler çoğunlukla bir Container içerisinde yer alır. Öncelikle ana ekrana basacağımız Widget, Container ile başlamalı.
return Container(….) başladık. Container bileşenleri sütunlardan oluşur bu yüzden Container bileşeninin child’ı olarak Column yazabiliriz. Daha sonra bu sütun içerisine bir hizalama niteliği ekleyebilirsiniz.
İçerisinde bulunduğumuz sütuna bir genişletilebilir, ScrollView özelliğine sahip bir metin ekleyeceğiz. Bu yüzden sütun içerisine children: <Widget>[…] ekleyerek aşağısında bu sütuna ait alt kademe (child-parent ilişkisi) Widget ekleyeceğimiz manasına gelir.
Bu alt kademeye Expand(…) ve Expand içerisine child: SingleChildScrollView ekleyerek, bu ScrollView içerisine gelecek metnin ekrandan taşmamasını ve aşağıya yukarıya kaydırarak okunabilirliğini sağlayabiliriz. Ve aşağıda kodumuzun son halini rahatlıkla görebilirsiniz.
return new Container(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Expanded(
flex: 1,
child: new SingleChildScrollView(
child: new Text('Long Text Here',
style: new TextStyle(
fontSize: 16.0, color: Colors.black,
),
),
),
),
],
),
);