Flutter'da GridView Kullanımı

Flutter'da görselleri, ürünleri veya herhangi bir veri grubunu düzenli bir şekilde sergilemek söz konusu olduğunda GridView en iyi dostumuzdur.

---

GridView, ekrandaki öğeleri (widget'ları) kaydırılabilir (scrollable) bir 2D ızgara (satır ve sütunlar) şeklinde dizmemizi sağlayan temel bir Flutter widget'ıdır. Bir fotoğraf galerisi, e-ticaret uygulamasındaki ürün vitrini veya telefonunuzun ana ekranındaki uygulama ikonları birer GridView örneğidir.

Flutter, farklı senaryolara uyum sağlamak için bize çeşitli GridView oluşturucuları (constructors) sunar. En çok kullanılan üç tanesi şunlardır:

1. GridView.count (Sabit Sütun Sayısı İçin)

En basit ve en çok tercih edilen yöntemlerden biridir. Yan yana kaç tane sütun (öğe) göstermek istediğinizi kesin olarak biliyorsanız (örneğin "her satırda her zaman 2 ürün olsun") GridView.count kullanılır.

Örnek Kullanım:

Dart:

GridView.count(
  crossAxisCount: 2, // Yan yana 2 öğe gösterilecek
  crossAxisSpacing: 10.0, // Sütunlar (yatay) arası boşluk
  mainAxisSpacing: 10.0, // Satırlar (dikey) arası boşluk
  padding: EdgeInsets.all(10.0), // Tüm ızgaranın etrafındaki boşluk
  children: List.generate(10, (index) {
    return Container(
      color: Colors.blueAccent,
      child: Center(
        child: Text(
          'Öğe $index',
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
      ),
    );
  }),
)

2. GridView.builder (Dinamik ve Büyük Veriler İçin)

Eğer elinizde yüzlerce veya binlerce öğe varsa (örneğin internetten çekilen bir ürün listesi), GridView.count kullanmak cihazın belleğini (RAM) yorabilir çünkü tüm öğeleri tek seferde oluşturur.

İşte burada imdadımıza GridView.builder yetişir. Sadece kullanıcının o an ekranda gördüğü (ve görmek üzere olduğu) öğeleri oluşturur. Performans açısından en doğru seçimdir.

Örnek Kullanım:

Dart:

GridView.builder(
  itemCount: 100, // Toplam gösterilecek öğe sayısı
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3, // Yan yana 3 öğe
    crossAxisSpacing: 5.0,
    mainAxisSpacing: 5.0,
    childAspectRatio: 1.0, // Genişlik/Yükseklik oranı (1.0 = tam kare)
  ),
  itemBuilder: (context, index) {
    // Bu fonksiyon her bir öğe için ayrı ayrı çalışır
    return Card(
      color: Colors.orange,
      child: Center(child: Text('Ürün $index')),
    );
  },
)

3. GridView.extent (Genişliğe Göre Dinamik Sütun)

Sütun sayısını manuel vermek yerine, "Her bir öğe maksimum 150 piksel genişliğinde olsun, ekrana kaç tane sığıyorsa o kadar yan yana diz" demek isterseniz GridView.extent kullanmalısınız. Özellikle farklı ekran boyutlarına (telefon, tablet, web) uyum sağlamak (responsive tasarım) için harikadır.

Örnek Kullanım:

Dart:

GridView.extent(
  maxCrossAxisExtent: 150.0, // Bir öğenin alabileceği maksimum genişlik
  crossAxisSpacing: 8.0,
  mainAxisSpacing: 8.0,
  children: List.generate(20, (index) {
    return Container(
      color: Colors.green,
      child: Center(child: Text('Kutu $index')),
    );
  }),
)

---

💡 Bilmeniz Gereken Önemli Parametreler

GridView ile çalışırken en çok karşılaşacağınız parametreler ve ne işe yaradıkları:

Parametre	Ne İşe Yarar?
crossAxisCount	Kaydırma yönüne (genelde aşağı) dik olan eksende (genelde yan yana) kaç öğe olacağını belirler.
crossAxisSpacing	Yan yana duran öğeler (sütunlar) arasındaki boşluğu ayarlar.
mainAxisSpacing	Alt alta duran öğeler (satırlar) arasındaki boşluğu ayarlar.
childAspectRatio	Öğelerin oranını belirler. 1.0 tam karedir. 0.5 yüksekliği genişliğinin iki katı olan bir dikdörtgen yaratır. (Genişlik / Yükseklik)
physics	Kaydırma davranışını belirler (örn: listenin sonuna gelince sekecek mi, duracak mı?). İç içe scroll yapılarında NeverScrollableScrollPhysics() kullanmanız gerekebilir.
shrinkWrap	true yapılırsa, GridView sadece içindeki öğelerin kapladığı alan kadar yer kaplar. Liste içinde liste kullanırken hayat kurtarır.

---

Flutter'da GridView, öğeleri tablo şeklinde (satır ve sütun düzeninde) göstermemizi sağlayan güçlü bir widget’tır. Özellikle:

• Ürün listeleme ekranları

• Galeri uygulamaları

• Menü tasarımları

• Dashboard panelleri

gibi alanlarda çok kullanılır.

---

1️⃣ GridView Nedir?

GridView, ListView’in 2 boyutlu halidir diyebiliriz.

📌 ListView → Dikey liste
📌 GridView → Satır + sütun şeklinde düzen

---

2️⃣ En Basit GridView Örneği

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    home: GridOrnek(),
  ));
}

class GridOrnek extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("GridView Örneği")),
      body: GridView.count(
        crossAxisCount: 2, // Kaç sütun olacak?
        children: List.generate(6, (index) {
          return Card(
            elevation: 4,
            child: Center(
              child: Text(
                "Kutu ${index + 1}",
                style: TextStyle(fontSize: 20),
              ),
            ),
          );
        }),
      ),
    );
  }
}

---

🔎 Açıklamalar

Özellik	Ne İşe Yarar?
crossAxisCount	Sütun sayısını belirler
children	Grid içindeki elemanlar
List.generate()	Dinamik olarak widget üretir
Card	Modern kutu görünümü sağlar

---

3️⃣ GridView Türleri

Flutter’da 3 farklı GridView yapısı vardır:

✅ 1. GridView.count

Sabit sütun sayısı ile çalışır.

GridView.count(
  crossAxisCount: 3,
)

---

✅ 2. GridView.extent

Kutu genişliğine göre otomatik sütun sayısı belirler.

GridView.extent(
  maxCrossAxisExtent: 150,
)

📌 maxCrossAxisExtent = Bir kutunun maksimum genişliği

---

✅ 3. GridView.builder (ÖNEMLİ 🚀)

Büyük veri listelerinde performans için en iyi yöntemdir.

GridView.builder(
  itemCount: 20,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
  ),
  itemBuilder: (context, index) {
    return Card(
      child: Center(
        child: Text("Ürün ${index + 1}"),
      ),
    );
  },
)

---

🔥 gridDelegate Nedir?

Grid düzenini belirler.

İki türü vardır:

1️⃣ SliverGridDelegateWithFixedCrossAxisCount

SliverGridDelegateWithFixedCrossAxisCount(
  crossAxisCount: 2,
  crossAxisSpacing: 10,
  mainAxisSpacing: 10,
  childAspectRatio: 1,
)

Özellik	Açıklama
crossAxisCount	Sütun sayısı
crossAxisSpacing	Yatay boşluk
mainAxisSpacing	Dikey boşluk
childAspectRatio	En/Boy oranı

---

2️⃣ SliverGridDelegateWithMaxCrossAxisExtent

SliverGridDelegateWithMaxCrossAxisExtent(
  maxCrossAxisExtent: 200,
)

📌 Kutu genişliğine göre sütun sayısını otomatik hesaplar.

---

4️⃣ Modern Kart Tasarımı (Material 3 Uyumlu)

GridView.builder(
  padding: EdgeInsets.all(16),
  itemCount: 8,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    crossAxisSpacing: 16,
    mainAxisSpacing: 16,
    childAspectRatio: 0.8,
  ),
  itemBuilder: (context, index) {
    return Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20),
      ),
      elevation: 6,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(Icons.shopping_cart, size: 50),
          SizedBox(height: 10),
          Text(
            "Ürün ${index + 1}",
            style: TextStyle(fontSize: 18),
          ),
        ],
      ),
    );
  },
)

---

5️⃣ Responsive Grid (Ekrana Göre Sütun Sayısı)

int crossAxisCount = MediaQuery.of(context).size.width > 600 ? 4 : 2;

📌 Tablet → 4 sütun
📌 Telefon → 2 sütun

---

6️⃣ GridView İçinde Tıklama (Navigator)

GestureDetector(
  onTap: () {
    print("Tıklandı");
  },
  child: Card(
    child: Center(child: Text("Tıkla")),
  ),
)

---

7️⃣ GridView Performans Tavsiyeleri

✔ Büyük veri → GridView.builder kullan
✔ Resimli grid → CachedNetworkImage tercih et
✔ Çok büyük listeler → const kullan
✔ Scroll sorunu varsa → shrinkWrap: true (dikkatli kullan)

---

8️⃣ GridView vs ListView

Özellik	ListView	GridView
Tek sütun	✅	❌
Çok sütun	❌	✅
Galeri	❌	✅
Ürün listesi	⚠	✅

---

🎯 Örnek Proje Fikri

Bir E-Ticaret Ürün Listesi yapabilirsin:

• GridView.builder

• Ürün resmi

• Ürün adı

• Fiyat

• Tıklayınca detay sayfası

---

📌 Özet

GridView:

• Satır + sütun düzeni sağlar

• 3 farklı kullanım tipi vardır

• Builder versiyonu performanslıdır

• Responsive tasarım destekler

• Dashboard ve ürün sayfalarında çok kullanılır

---