Flutter Column Widgeti Kullanımı

Herkese merhaba, Flutter yazılarımıza kaldığımız yerden devam ediyoruz. Bu yazımızda column widgetini anlatacağım. Hadi başlayalım !
Table of Contents
Flutter, Google tarafından geliştirilen açık kaynaklı bir mobil uygulama geliştirme framework’üdür. Flutter, hızlı bir şekilde mobil uygulamalar geliştirmek için kullanılan popüler bir framework’tür. Bu makalede Flutter’da Column widgetini kullanarak nasıl dikey bir düzen oluşturacağınızı öğreneceksiniz.
Column Widget Nedir?
Flutter’da Column widgeti, dikey bir düzen oluşturmak için kullanılır. Bu widget, diğer widgetlerin dikey olarak sıralanmasına izin verir. Column widgeti, sınırlı alanı olan bir uygulama düzeninde kullanışlıdır.
Column Widget Kullanımı
Flutter’da Column widgeti kullanarak bir dikey düzen oluşturmak için aşağıdaki adımları takip edebilirsiniz:
Column Widgeti Oluşturma
Column widgeti oluşturun:
Column(
children: <Widget>[
// Dikey düzene dahil etmek istediğiniz widgetleri ekleyin.
],
)
İçerisine Widget Ekleme
Dikey düzene dahil etmek istediğiniz widgetleri ekleyin:
Column(
children: <Widget>[
Text('Widget 1'),
Text('Widget 2'),
Text('Widget 3'),
],
)
Widgetlerin Konumunu Ayarlama
Dikey düzene dahil edilen widgetlerin konumunu ayarlayın:
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('Widget 1'),
Text('Widget 2'),
Text('Widget 3'),
],
)
Yukarıdaki kodda MainAxisAlignment.spaceBetween özelliği kullanılarak widgetler arasındaki boşluğu ayarlayabilirsiniz.
Widgetlerin Boyutunu Ayarlama
Dikey düzene dahil edilen widgetlerin boyutunu ayarlayın:
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
child: Text('Widget 1'),
),
Expanded(
flex: 2,
child: Text('Widget 2'),
),
Expanded(
child: Text('Widget 3'),
),
],
)
Yukarıdaki kodda, Expanded widgeti kullanılarak widgetlerin boyutları ayarlanır. flex özelliği kullanılarak widgetler arasındaki boşluğun oranı ayarlanabilir.
Column Widget Örnekleri
Text Widgetleri Kullanma
Column(
children: <Widget>[
Text('Hello,'),
Text('Flutter'),
Text('!'),
],
)
Image ve Text Widgetleri Kullanma
Column(
children: <Widget>[
Image.asset(
'assets/flutter_logo.png',
width: 50,
height: 50,
),
SizedBox(height: 10),
Text('Flutter'),
],
)
ElevatedButton Widgetleri Kullanma
Column(
children: <Widget>[
ElevatedButton(onPressed: () {}, child: Text('Button 1')),
SizedBox(height: 10),
ElevatedButton(onPressed: () {}, child: Text('Button 2')),
],
)
Notlar
- mainAxisSize özelliği kullanılarak, dikey düzende widgetlerin boyutu ayarlanabilir.
- mainAxisAlignment özelliği kullanılarak, widgetlerin dikey düzen içinde yatay hizalaması ayarlanabilir.
- Text widgetleri dikey düzen içinde sıkışık durduğunda Flexible veya Expanded widgetleri kullanılarak widgetlerin boyutu ayarlanabilir.
Sonuç
Flutter’da Column widgeti, dikey bir düzen oluşturmak için kullanılır. Bu widget, diğer widgetlerin dikey olarak sıralanmasına izin verir. Bu makalede, Column widgeti kullanarak nasıl bir dikey düzen oluşturabileceğinizi öğrendiniz. Column widgeti, sınırlı alanı olan bir uygulama düzeninde kullanışlıdır. Flutter’da diğer widgetlerle birlikte kullanarak daha karmaşık düzenler oluşturabilirsiniz.
Evet Flutter’da column widgeti bu şekilde olmakta. Tüm Flutter yazılarımıza buraya tıklayarak ulaşabilirsiniz. Herkese hayırlı günler.