GridView

GridView

GridView

MaterialApp({ title,theme, home: Scaffold({ appBar, body: GridView.count( childrenDelegate, crossAxisCount, children), }), })

MaterialApp({ title,theme, home: Scaffold({ appBar, body: GridView.builder( gridDelegate, itemCount, itemBuilder), })

açıklama

GridView:GridView.count(), GridView.builder() : Çok Sutunlu kaydırılabilir listeler oluşturmak için kullanlır.

GridView.count(childrenDelegate,crossAxisCount,children):Manuel children liste öğeleri girilerek yapılır.Kısa paratik GridViewler için uygundur.gridDelegate ile sütün sayısı belirlenir.

GridView.builder(gridDelegate,itemCount,itemBuilder): verilen listenin elemansayısı kadar tanımlanan fonsiyonu acağırarak ekrana bir GridView sunar.
Uzun GridView için yada liste sayısı değişken GridViewler için uygundur.

konum

MaterialApp({ title,theme, home: Scaffold({ appBar, body: GridView.count( childrenDelegate, crossAxisCount, children), }), })

MaterialApp({ title,theme, home: Scaffold({ appBar, body: GridView.builder( gridDelegate, itemCount, itemBuilder ), })

parametreler

GridView.count( 
        crossAxisSpacing: 20.0, // kolonlar arasındaki uzaklık. Örnekte kolonlar arası 20 birim olacak
        crossAxisCount: 2, // kolon sayısı. Örnekte 2 kolonlu bir gridwiev olacak
        children: [ ], // manuel girilen children widgetler
                )
                
List ornekListem = ["Liste İçerik 1","Liste İçerik 2","Liste İçerik 3", "Liste İçerik 4","Liste İçerik 5" ];

GridView.builder(         
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2) // kaç surun olsun . örnekte 2 stundan olusan liste olacak
        itemCount: ornekListem.length,  //listenin uzunluğu
        itemBuilder: (BuildContext context, sira) { return Text(ornekListem[sira]); }
              )

örnek uygulama

gridwiev-orn
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = "Grid List";

    return MaterialApp(
      title: title,
      home: Scaffold(appBar: AppBar(
        title: Text(title),
        ),
        body: GridView.count(
          crossAxisCount: 3,
          children: List.generate(choices.length, (index) {
              return Center(
                child: ChoiceCard(choice: choices[index]),
              );
           }
          )
        )
      )
    );
  }
}

class Choice {
  const Choice({this.title, this.icon});

  final String title;
  final IconData icon;
}

const List choices = const [
  const Choice(title: 'Car', icon: Icons.directions_car),
  const Choice(title: 'Bicycle', icon: Icons.directions_bike),
  const Choice(title: 'Boat', icon: Icons.directions_boat),
  const Choice(title: 'Bus', icon: Icons.directions_bus),
  const Choice(title: 'Train', icon: Icons.directions_railway),
  const Choice(title: 'Walk', icon: Icons.directions_walk),
  const Choice(title: 'Car', icon: Icons.directions_car),
  const Choice(title: 'Bicycle', icon: Icons.drafts),
  const Choice(title: 'Boat', icon: Icons.dvr),
  const Choice(title: 'Bus', icon: Icons.copyright),
  const Choice(title: 'Train', icon: Icons.cloud_off),
  const Choice(title: 'Car', icon: Icons.directions_car),
  const Choice(title: 'Bicycle', icon: Icons.directions_bike),
  const Choice(title: 'Boat', icon: Icons.directions_boat),
  const Choice(title: 'Bus', icon: Icons.directions_bus),
  const Choice(title: 'Train', icon: Icons.directions_railway),
  const Choice(title: 'Walk', icon: Icons.directions_walk),
  const Choice(title: 'Car', icon: Icons.directions_car),
  const Choice(title: 'Bicycle', icon: Icons.drafts),
  const Choice(title: 'Boat', icon: Icons.dvr),
  const Choice(title: 'Bus', icon: Icons.copyright),
  const Choice(title: 'Train', icon: Icons.cloud_off),
  const Choice(title: 'Car', icon: Icons.directions_car),
  const Choice(title: 'Bicycle', icon: Icons.directions_bike),
  const Choice(title: 'Boat', icon: Icons.directions_boat),
  const Choice(title: 'Bus', icon: Icons.directions_bus),
  const Choice(title: 'Train', icon: Icons.directions_railway),
  const Choice(title: 'Walk', icon: Icons.directions_walk),
  const Choice(title: 'Car', icon: Icons.directions_car),
  const Choice(title: 'Bicycle', icon: Icons.drafts),
  const Choice(title: 'Boat', icon: Icons.dvr),
  const Choice(title: 'Bus', icon: Icons.copyright),
  const Choice(title: 'Train', icon: Icons.cloud_off),
];

class ChoiceCard extends StatelessWidget {
  const ChoiceCard({Key key, this.choice}) : super(key: key);
  final Choice choice;

  @override
  Widget build(BuildContext context) {
    final TextStyle textStyle = Theme.of(context).textTheme.display1;
        return Card(
          color: Colors.white,
          child: Center(child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Icon(choice.icon, size:80.0, color: textStyle.color),
                Text(choice.title, style: textStyle),
          ]
        ),
      )
    );
  }
}

This Post Has 4 Comments

  1. Samet 17 Ağu 2020 Cevapla

    Yeni başladım burayı kullanıyorum türkçe kaynak için fakat const ChoiceCard({Key key, this.choice}) : super(key: key); kısmını tam anlayamadım neden kullanılıyor açıklayabilirseniz sevinitrim

  2. flutterAdmin 17 Ağu 2020 Cevapla

    Flutter nasil çalişir videosuna bi bakmanizi öneririm

  3. melih özbey 8 Eyl 2020 Cevapla

    Güzel bir uygulama emeğinize sağlık

  4. Flutter Amin 8 Eyl 2020 Cevapla

    Arkadaşlar örneklerin çoğunu github tan aldım bazılarını kendim yazdım özellikler makale içeren içeriklerde. Bu örneği github tan aldığımı hatırlıyorum.

Bir cevap yazın