🚀 FLUTTER - GridView vs kullanımı

Ramazan HABER / FLUTTER / GridView vs kullanımı

1-) Flutter GridView vs kullanımı

ilk itemi farklı olsun dersen

Padding masaContent() {
  return Padding(
    padding: EdgeInsets.all(10),
    child: Column(
      children: [
        Text(
          widget.resAd!,
          style: TextStyle(
              fontWeight: FontWeight.bold, fontSize: 25, color: Colors.red),
        ),
        SizedBox(
          height: 3,
        ),
        Expanded(
            child: SizedBox(
          height: 400,
          child: Container(
            child: GridView.builder(
              itemCount: modelList.length,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                mainAxisExtent: 60, // yükseklik demek
              ),
              itemBuilder: (BuildContext contex, int index) {
                Model model = modelList[index];

                return masaBodyContent(model);
              },
            ),
          ),
        ))
      ],
    ),
  );
}

PERFORMANSLI(BUİLDER) İLE kullamı

body: Container(
  child: Container(
    child: GridView.builder(
      itemCount: 100,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2, crossAxisSpacing: 10, mainAxisSpacing: 10,

mainAxisExtent: 115, // yükseklik demek

),
      itemBuilder: (BuildContext contex, int index) {
        return Container(
          alignment: Alignment.center,
          color: Colors.red[(index + 1) % 8 * 100],
          child: Text(
            "Ders " + index.toString(),
            textAlign: TextAlign.center,
          ),
        );
      },
    ),
  ),
),

DİĞER kullamı

child:
  GridView.count(
    crossAxisCount: 3,
    primary: false,
    padding: EdgeInsets.all(10),
    crossAxisSpacing: 20,
    mainAxisSpacing: 40,
    children: [
      Container(
        alignment: Alignment.center,
        color: Colors.red.shade100,
        child: Text("Ders 1",textAlign: TextAlign.center,),
      ),
      Container(
        alignment: Alignment.center,
        color: Colors.red.shade100,
        child: Text("Ders 1",textAlign: TextAlign.center,),
      ),
      Container(
        alignment: Alignment.center,
        color: Colors.red.shade100,
        child: Text("Ders 1",textAlign: TextAlign.center,),
      ),
      Container(
        alignment: Alignment.center,
        color: Colors.red.shade100,
        child: Text("Ders 1",textAlign: TextAlign.center,),
      ),
    ],
  )

crossAxisSpacing nedir : iki widget arasındaki soldan sağdan boşluk demek

mainAxisSpacing nedir : iki widget arasındaki yukarıdan aşağıya boşluk demek

crossAxisCount: 3 nedir : tek satırsa 3 eleman olsun demek

scrollDirection: Axis.horizontal nedir : scrolu soldan sağa yapar

primary: true nedir : scrol olduğu gösterecek ekranda animasyon çıkar. false dersen çıkmaz. ama scroll işlevi yokken yani ürün azken

EKRAN GÖRÜNTÜSÜ

2022 Kasım 18 Cuma
396