Flutter Pemula #4 – Scrolling Widget SingleChildScrollView ListView GridView -PART2

ISALLAB.COM – Halo teman-teman, di postingan kali ini saya akan membahas seputar tentang Flutter Pemula #4 – Scrolling Widget SingleChildScrollView ListView GridView. Dan sebelum kamu belajar Flutter saya saranin kamu belajar bahasa pemrograman Dart dahulu, sebab dasar dari Flutter sendiri adalah bahasa pemrograman Dart. Untuk linknya silahkan kamu ikuti link di bawah ini. Lengkap !
Baca semua partnya ya agar kamu paham semua dan gampang saat belajar Flutter ini 🙂
BACA DISINI : Pengenalan Bahasa Pemrograman Dart Untuk Pemula – Part 1
BACA DISINI : Pengenalan Bahasa Pemrograman Dart Untuk Pemula – Part 2
BACA DISINI : Pengenalan Bahasa Pemrograman Dart Untuk Pemula – Part 3
BACA DISINI : Pengenalan Bahasa Pemrograman Dart Untuk Pemula – Part 4
Beberapa hal yang akan saya bahas dalam Scrolling Widget , yaitu :
Kita akan mencoba membuat halaman menggunakan ( klik untuk ke halaman langsung )
- SingleChildScrollView
- ListView,
- ListView.builder,
- ListView.separated,
- GridView,
- GridView.count,
- GridView.builder, dan
- GridView.extent.
Pastikan kalian sudah pernah menginstal Flutter pada laptop kalian dan pelajari semuanya disini, jika belum kalian dapat membaca artikel berikut :
- Flutter Pemula #1 – Pengenalan dan Cara Instalasi Flutter
- Flutter Pemula #2 – Menggunakan Visual Studio Code atau Android Studio untuk Coding Flutter
- Flutter Pemula #3 – Membuat Layout Sederhana
- Flutter Pemula #4 – Scrolling Widget SingleChildScrollView ListView GridView
Langsung ke materinya yaa :
5. GridView
GridView membuat tampilan secara grid atau biasa digunakan untuk menampilkan data yang berbentuk gambar seperti pada galeri. GridDelegate pada GridView berfungsi untuk mengatur jumlah widget secara horizontal, ada 2 gridDelegate yang biasa digunakan yaitu, SliverGridDelegateWithMaxCrossAxisExtent digunakan untuk mengatur ukuran pixel maksimal pada 1 item, contoh pada layar yang mempunyai lebar 700 pixel dan kita atur maxCrossAxisExtent dengan 150 pixel, maka akan terdapat 5 item secara horizontal dimana tiap item mempunyai lebar masing masing 140 pixel (700 / 5 = 140), dan SliverGridDelegateWithFixedCrossAxisCount digunakan untuk mengatur nilai tetap jumlah item secara horizontal. Untuk item disini kita gunakan widget GridTile, itu adalah widget bawaan untuk GridView yang dimana didalamnya terdapat beberapa komponen yang biasa kita gunakan yaitu, child untuk menampung widget utama, header untuk di paling atas item, dan footer untuk di paling bawah item.
a. GridView dengan DelegateMax
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Belajar GridView bersama ISALLAB.COM"),
),
body: GridView(
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 256,
),
children: [
GridTile(
child: FlutterLogo(),
),
GridTile(
child: FlutterLogo(),
),
GridTile(
child: FlutterLogo(),
)
],
),
),
);
}
}
b. GridView dengan DelegateFixed
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Belajar GridView bersama ISALLAB.COM"),
),
body: GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 6,
),
children: [
GridTile(
child: FlutterLogo(),
),
GridTile(
child: FlutterLogo(),
),
GridTile(
child: FlutterLogo(),
)
],
),
),
);
}
}
6. GridView.count
GridView.count sama seperti GridView biasa hanya saja pada GridView.count kita hanya dapat mengatur nilai crossAxisCount untuk jumlah item secara horizontal.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Belajar GridView.count bersama ISALLAB.COM"),
),
body: GridView.count(
crossAxisCount: 3,
children: [
GridTile(
child: FlutterLogo(),
),
GridTile(
child: FlutterLogo(),
),
GridTile(
child: FlutterLogo(),
)
],
),
),
);
}
}
7. GridView.builder
GridView.builder digunakan ketika widget atau data yang kita punya sangat banyak atau tidak diketahui banyaknya. Cukup buat satu widget pada nilai balik di builder tersebut. Untuk nilai data yang sudah ditetapkan (bukan unlimited count), tambahkan atribut itemCount.
a. GridView.builder dengan DelegateMax
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Belajar GridView.count bersama ISALLAB.COM"),
),
body: GridView.builder(
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 256,
),
itemBuilder: (BuildContext context, int index) {
return GridTile(
child: FlutterLogo(),
);
},
),
),
);
}
}
b. GridView.builder dengan DelegateFixed
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Belajar GridView.count bersama ISALLAB.COM"),
),
body: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemBuilder: (BuildContext context, int index) {
return GridTile(
child: FlutterLogo(),
);
},
),
),
);
}
}
8. GridView.extent
GridView.extent sama seperti pada GridView.count hanya saja ini kita hanya bisa untuk maxCrossAxisExtent untuk mengatur lebar maksimal pada tiap item.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Belajar GridView.extent bersama ISALLAB.COM"),
),
body: GridView.extent(
maxCrossAxisExtent: 256,
children: [
GridTile(
child: FlutterLogo(),
),
GridTile(
child: FlutterLogo(),
),
GridTile(
child: FlutterLogo(),
),
],
),
),
);
}
}
Sampai disini tutorial Flutter Pemula #4 – Scrolling Widget SingleChildScrollView ListView GridView – PART2 silahkan di link pelajari lagi Flutter Pemula #4 – Scrolling Widget SingleChildScrollView ListView GridView -PART 1, ikuti terus website ini untuk mendapatkan tutorial dan artikel menarik lainya. Semoga bermanfaat, jangan lupa berkomentar dan bagikan artikel ini jika menurut kamu berguna. 🙂