Flutter GridView Widgeti Kullanımı

Herkese merhaba, Flutter yazılarımıza kaldığımız yerden devam ediyoruz. Bu yazımızda GridView widgetini ve kullanımını anlatacağım. Hadi başlayalım !

Flutter, kullanıcı arayüzü geliştirmek için oldukça popüler bir çerçeve (framework)dir. Gridview widgeti, diğer widgetlerin aksine, verileri düzenli bir şekilde düzenlemek için kullanılır. Bu makalede, Flutter’daki Gridview widgetinin özellikleri ve kullanımı hakkında bilgi edineceksiniz.

Gridview Widgeti Nedir?

Flutter’daki Gridview widgeti, verileri düzenli bir şekilde düzenlemek için kullanılan bir widgettir. Bu widget, sütun ve satır sayısına göre verileri gösterir. Örneğin, bir galeri uygulamasında, resimleri sütunlar ve satırlar halinde göstermek için Gridview widgeti kullanılabilir.

Gridview Widgetinin Özellikleri

Flutter’daki Gridview widgeti, aşağıdaki özelliklere sahiptir:

• crossAxisCount: Gridview widgetinin yatay (cross) eksendeki sütun sayısını belirler.
• mainAxisSpacing: Gridview widgetinin dikey (main) eksendeki satırlar arasındaki boşluğu belirler.
• crossAxisSpacing: Gridview widgetinin yatay (cross) eksendeki sütunlar arasındaki boşluğu belirler.
• childAspectRatio: Gridview widgeti içindeki her bir öğenin boyutunu belirler.
• children: Gridview widgeti içindeki öğelerin listesi.

Gridview Widgetinin Kullanımı

Flutter’daki Gridview widgeti, aşağıdaki gibi kullanılabilir:

GridView.count(
  crossAxisCount: 2,
  mainAxisSpacing: 10,
  crossAxisSpacing: 10,
  childAspectRatio: 0.75,
  children: [
    Container(color: Colors.red),
    Container(color: Colors.blue),
    Container(color: Colors.green),
    Container(color: Colors.yellow),
  ],
),

Yukarıdaki kodda, Gridview widgeti kullanılarak bir 2 sütunlu bir grid oluşturulur. Öğeler arasındaki boşluklar, sütunlar arasında 10 piksel ve satırlar arasında da 10 piksel olarak ayarlanmıştır. Her bir öğenin boyutu, genişliğin yüksekliğe oranı 0.75 olacak şekilde ayarlanmıştır. Son olarak, Gridview widgeti içindeki öğeler, 4 adet Container widgeti ile oluşturulmuştur.

Gridview Widgetinin Farklı Kullanım Örnekleri

Flutter’daki Gridview widgeti, farklı amaçlar için de kullanılabilir. Örneğin, aşağıdaki kodda, Gridview widgeti, resimlerin sütun ve satırlar halinde gösterildiği bir galeri uygulaması için kullanılmıştır:

GridView.count(
  crossAxisCount: 2,
  mainAxisSpacing: 10,
  crossAxisSpacing: 10,
  childAspectRatio: 0.75,
children: [
Image.network("https://images.unsplash.com/photo-1533668754914-4f81adb8b4d6"),
Image.network("https://images.unsplash.com/photo-1533668754914-4f81adb8b4d6"),
Image.network("https://images.unsplash.com/photo-1533668754914-4f81adb8b4d6"),
Image.network("https://images.unsplash.com/photo-1533668754914-4f81adb8b4d6"),
Image.network("https://images.unsplash.com/photo-1533668754914-4f81adb8b4d6"),
Image.network("https://images.unsplash.com/photo-1533668754914-4f81adb8b4d6"),
],
),

Yukarıdaki kodda, Gridview widgeti kullanılarak bir galeri uygulaması oluşturulmuştur. Öğeler, Image.network widgeti kullanılarak oluşturulmuştur ve her bir öğe aynı resmi göstermektedir.

Başka bir örnek için, aşağıdaki kodda, Gridview widgeti kullanılarak farklı renklerde kutuların sütun ve satırlar halinde gösterildiği bir uygulama oluşturulmuştur:

GridView.count(
  crossAxisCount: 3,
  mainAxisSpacing: 10,
  crossAxisSpacing: 10,
  children: [
    Container(color: Colors.red),
    Container(color: Colors.blue),
    Container(color: Colors.green),
    Container(color: Colors.yellow),
    Container(color: Colors.orange),
    Container(color: Colors.purple),
  ],
),

Yukarıdaki kodda, Gridview widgeti kullanılarak 3 sütunlu bir grid oluşturulmuştur. Her bir öğe, farklı bir renkte olan bir Container widgeti ile oluşturulmuştur.

Sonuç

Flutter’daki Gridview widgeti, verileri sütun ve satırlar halinde düzenlemek için kullanılan bir widgettir. Bu makalede, Gridview widgetinin özellikleri ve kullanımı hakkında bilgi verdik ve farklı kullanım örnekleri gösterdik. Bu örnekler, Gridview widgetinin çeşitli uygulamalar için kullanılabileceğini göstermektedir.

Evet GridView widgeti ve kullanımı bu şekilde olmakta. Tüm Flutter yazılarımıza buraya tıklayarak ulaşabilirsiniz. Herkese hayırlı günler.