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

    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

    Flutter nasil çalişir videosuna bi bakmanizi öneririm

  3. melih özbey

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

  4. Flutter Amin

    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