UDACODING

Posts

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
image-52 CARA MEMBUAT GRID VIEW PADA FLUTTER
  • Diatas adalah bentuk tampilan grid view nya yaa sobat Uda.

Sekian dulu postingan kali ini, insyaAllah semoga bisa bermanfaat untuk sobat Uda semuanya.

Leave a Reply :

* Your email address will not be published.