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<String> 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
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),
]
),
)
);
}
}