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

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),
]
),
)
);
}
}
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
Flutter nasil çalişir videosuna bi bakmanizi öneririm
Güzel bir uygulama emeğinize sağlık
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.