
CARA MEMBUAT GRID VIEW PADA FLUTTER
Bismillahirrahmanirrahim..
Hallo semua sobat uda dimana pun berada, postingan kali ini akan membahas tentang Cara Membuat Grid View Pada Flutter. Bukan Grid View biasa, tapi kali ini kita bisa memberikan bentuk yang menarik pada grid view kita. Berikut langkah – langkah kerja yang harus sobat uda ikuti:
- Buat sebuah project flutter
- Pada class main.dart tambahkan codingan sebagai berikut ini:
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: MyApp(),
));
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("GRID VIEW EXAMPLE",
style: new TextStyle(
fontSize: 24.0, fontWeight: FontWeight.bold
),),
backgroundColor: Colors.red,
centerTitle: true,
),
//backgroundColor: Colors.blue[100],
body: Container(
child: Padding(
padding: const EdgeInsets.only(top: 20.0),
child: GridView.count(
crossAxisCount: 2,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(12.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20.0),),
color: Colors.pink
),
child: Center(
child: Text("pink", style: TextStyle(fontSize: 24.0,
fontWeight: FontWeight.bold),),
),
),
),
Padding(
padding: const EdgeInsets.all(12.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20.0),),
color: Colors.green
),
child: Center(
child: Text("green", style: TextStyle(fontSize: 24.0,
fontWeight: FontWeight.bold),),
),
),
),
Padding(
padding: const EdgeInsets.all(12.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20.0),),
color: Colors.purple
),
child: Center(
child: Text("purple", style: TextStyle(fontSize: 24.0,
fontWeight: FontWeight.bold),),
),
),
),
Padding(
padding: const EdgeInsets.all(12.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20.0),),
color: Colors.yellow
),
child: Center(
child: Text("yellow", style: TextStyle(fontSize: 24.0,
fontWeight: FontWeight.bold),),
),
),
),
Padding(
padding: const EdgeInsets.all(12.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20.0),),
color: Colors.brown
),
child: Center(
child: Text("brown", style: TextStyle(fontSize: 24.0,
fontWeight: FontWeight.bold),),
),
),
),
Padding(
padding: const EdgeInsets.all(12.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20.0),),
color: Colors.grey
),
child: Center(
child: Text("grey", style: TextStyle(fontSize: 24.0,
fontWeight: FontWeight.bold),),
),
),
),
],
),
),
)
); }
}
- Setelah semua codingan diatas tambahkan, sobat uda semua dapat me njalankan aplikasinya

- Diatas adalah bentuk tampilan grid view nya yaa sobat Uda.
Sekian dulu postingan kali ini, insyaAllah semoga bisa bermanfaat untuk sobat Uda semuanya.