Home Mobile Membuat sebuah GridView pada Flutter

Membuat sebuah GridView pada Flutter

0

Pada kali ini kita akan membuat sebuah Gridview pada flutter. Gridview merupakan sebuah widget yang dapat digeser berbentuk kotak yang digunakan untuk menampung widget seperti text.

Berikut ini kita akan membuat sebuah Gridview pada flutter, yaitu:

  • Langkah yang pertama membuat sebuah project baru pada flutter
  • Membuat sebuah initstate() dan list pada state
List<int> itemGrid = [];

@override
void initState() {
// TODO: implement initState
super.initState();
for(int i = 0; i < 30; i++){
itemGrid.add(i);
}
}
  • Membuat sebuah widget Gridview pada flutter
body: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
itemBuilder: (context, index) {
return Card(
color: Colors.green,
child: Padding(padding: EdgeInsets.all(25)),
);
},
),
  • Full source
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
debugShowCheckedModeBanner: false,
);
}
}

class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);

@override
State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

List<int> itemGrid = [];

@override
void initState() {
// TODO: implement initState
super.initState();
for(int i = 0; i < 30; i++){
itemGrid.add(i);
}
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.green[700],
leading: Icon(Icons.format_align_justify),
title: Text("GridView"),
actions: [
IconButton(onPressed: (){}, icon: Icon(Icons.search)),
IconButton(onPressed: (){}, icon: Icon(Icons.more_vert)),
],
),
body: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
itemBuilder: (context, index) {
return Card(
color: Colors.green,
child: Padding(padding: EdgeInsets.all(25)),
);
},
),
);
}
}