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 !

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.