GridView in Flutter – Baraja Coding

October 15, 2021

Halo sobat baraja coding, pada artikel kali ini kita akan membahas tentang GridView in Flutter. GridView adalah sebuah widget yang dapat digeser berbentuk kotak yang digunakan untuk menampung widget seperti text, gambar, dll.

Step 1. Tambahkan Image

Buatlah sebuah folder dengan nama images lalu tambahkan image seperti berikut

Step 2. Tambahkan Asset Images

Tambahkan asset images pada pubspec.yml seperti berikut

Step 3. Buat Class Info

Buat file baru dengan nama info.dart lalu tambahkan code seperti berikut

import ‘package:flutter/material.dart’;

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

@override
_InfoState createState() => _InfoState();
}

class _InfoState extends State<Info> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: EdgeInsets.only(top: 80, left: 25, right: 24),
child: ListView(
children: [
Column(
children: [
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
“Ciri-Ciri Paket Aqiqah Terbaik Dan\n”
“Terpercaya di Padang”,
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xffF2994A),
fontSize: 16,
fontWeight: FontWeight.w500,
fontFamily: “Poppins”)),
],
),
),
],
)
],
),
),
);
}
}

Step 4. Tambahkan GridView.count

Tambahkan GridView.count dengan menambahkan code seperti berikut

Container(
width: 400.0,
height: 500.0,
child: new GridView.count(
crossAxisCount: 2,
childAspectRatio: 6/7,
physics: ClampingScrollPhysics(),
children: [
Container(
width: double.infinity,
margin: EdgeInsets.all(5.0),
padding: EdgeInsets.only(top: 21),
decoration: BoxDecoration(
color: Color(0xffF2994A),
borderRadius: BorderRadius.circular(10.0),
),
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Image.asset(‘images/info_1.png’,
width: 73, height: 81,),
SizedBox(height: 8,),
Text(‘Sesuai\n’
‘Syariah’, textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontFamily: “Nunito”,
fontWeight: FontWeight.w400),
),
]
),),),
Container(
margin: EdgeInsets.all(5.0),
padding: EdgeInsets.only(top: 22),
decoration: BoxDecoration(
color: Color(0xffF2994A),
borderRadius: BorderRadius.circular(10.0),
),
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Image.asset(‘images/info_2.png’,
width: 68, height: 69,),
SizedBox(height: 20,),
Text(‘Memberikan\n’
‘Pelayanan yang’
‘\nmemuaskan’,
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontFamily: “Nunito”,
fontWeight: FontWeight.w400),
),
],
)
),
),
Container(
width: double.infinity,
margin: EdgeInsets.all(5),
padding: EdgeInsets.only(top: 35),
decoration: BoxDecoration(
color: Color(0xffF2994A),
borderRadius: BorderRadius.circular(10),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Image.asset(‘images/info_4.png’,
width: 70, height: 45,),
SizedBox(height: 30,),
Text(‘Olahan Masakan\n’
‘Yang Nikmat’,
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontFamily: “Nunito”,
fontWeight: FontWeight.w400),
),
]
)
),
Container(
width: double.infinity,
margin: EdgeInsets.all(5),
padding: EdgeInsets.only(top: 26),
decoration: BoxDecoration(
color: Color(0xffF2994A),
borderRadius: BorderRadius.circular(10),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Image.asset(‘images/info_3.png’,
width: 64, height: 64,),
SizedBox(height: 20,),
Text(‘Tepat Waktu’,
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontFamily: “Nunito”,
fontWeight: FontWeight.w400),
),
]
)
),
],
),
),

Hasil Run :

Jadi sekian pada artikel kali ini, sampai jumpa pada artikel selanjutnya. Selamat Mencoba 🙂