Flutter Row Widgeti Kullanımı

Herkese merhaba, Flutter yazılarımıza kaldığımız yerden devam ediyoruz. Bu yazımızda row 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 Row widgetini kullanarak nasıl bir yatay düzen oluşturacağınızı öğreneceksiniz.

Row Widget Nedir?

Flutter’da Row widgeti, yatay bir düzen oluşturmak için kullanılır. Bu widget, diğer widgetlerin yatay olarak sıralanmasına izin verir. Row widgeti, sınırlı alanı olan bir uygulama düzeninde kullanışlıdır.

Row Widget Kullanımı

Flutter’da Row widgeti kullanarak bir yatay düzen oluşturmak için aşağıdaki adımları takip edebilirsiniz:

Row widgeti oluşturma

Row(
  children: <Widget>[
    // Yatay düzene dahil etmek istediğiniz widgetleri ekleyin.
  ],
)

İçerisine Widget Ekleme

Yatay düzene dahil etmek istediğiniz widgetleri ekleyin:

Row(
  children: <Widget>[
    Text('Widget 1'),
    Text('Widget 2'),
    Text('Widget 3'),
  ],
)

Widgetlerin Konumunu Ayarlama

Yatay düzene dahil edilen widgetlerin konumunu ayarlayın:

Row(
  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

Yatay düzene dahil edilen widgetlerin boyutunu ayarlayın:

Row(
  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.

Row Widget Örnekleri

Text Widgetleri Kullanma

Row(
  children: <Widget>[
    Text('Hello,'),
    Text('Flutter'),
    Text('!'),
  ],
)

Text ve Image Widgetleri Kullanma

Row(
  children: <Widget>[
    Image.asset(
      'assets/flutter_logo.png',
      width: 50,
      height: 50,
    ),
    SizedBox(width: 10),
    Text('Flutter'),
  ],
)

ElevatedButton Widgetleri Kullanma

Row(
  children: <Widget>[
    ElevatedButton(
      onPressed: () {},
      child: Text('Button 1'),
    ),
    SizedBox(width: 10),
    ElevatedButton(
      onPressed: () {},
      child: Text('Button 2'),
    ),
  ]
)

Notlar

• mainAxisSize özelliği kullanılarak, yatay düzende widgetlerin boyutu ayarlanabilir.
• crossAxisAlignment özelliği kullanılarak, widgetlerin yatay düzen içinde dikey hizalaması ayarlanabilir.
• Text widgetleri yatay düzen içinde sıkışık durduğunda Flexible veya Expanded widgetleri kullanılarak widgetlerin boyutu ayarlanabilir.

Sonuç

Flutter’da Row widgeti, yatay bir düzen oluşturmak için kullanılır. Bu widget, diğer widgetlerin yatay olarak sıralanmasına izin verir. Bu makalede, Row widgeti kullanarak nasıl bir yatay düzen oluşturabileceğinizi öğrendiniz. Row 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 row widgeti bu şekilde olmakta. Tüm Flutter yazılarımıza buraya tıklayarak ulaşabilirsiniz. Herkese hayırlı günler.