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

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 :
1. SingleChildScrollView
SingleChildScrollView biasa digunakan ketika hanya memiliki satu widget yang ukurannya sangat lebar atau panjang. Seperti contoh dibawah ini, kita mempunyai teks yang sangat panjang, yang jika kita tampilkan begitu saja akan memakan 2x halaman layar, kemudian kita bungkus teks tersebut dengan SingleChildScrollView, agar halaman dapat di gulir untuk menampilkan semua widget atau teks yang ada. (*SafeArea digunakan untuk membungkus widget yang ada di dalam nya agar tidak melewati batas Notification Bar).
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: SafeArea(
child: Scaffold(
body: SingleChildScrollView(
child: Text(
//Ubah teks berikut menjadi sangat panjang
"Lorem Ipsum is simply dummy text ...",),
),
)),
);
}
}
BACA JUGA : Tutorial Pseudocode Algoritma Stack dalam Struktur Data
2. ListView
ListView biasa digunakan sebagai pengganti Row atau Column atau untuk menampung sebuah daftar yang nantinya widget tersebut dapat digulirkan. Seperti contoh berikut ini kita membuat 3 widget ListTile, widget ListTile ini juga adalah widget bawaan untuk ListView, dimana di dalam ListTile terdapat beberapa komponen yang bisa kita gunakan seperti, leading yang berada di paling kiri biasa untuk icon, title sebagai komponen utama yang sering digunakan untuk judul, subtitle sebagai komponen yang berada di bawah title, dan trailing yang berada di paling kanan yang biasa digunakan untuk aksi aksi.
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 ListView bersama ISALLAB.COM"),
),
body: ListView(
children: [
ListTile(
title: Text("ISALLAB.COM"),
subtitle: Text("Share and Learn Together !!!"),
),
ListTile(
title: Text("COMMENT"),
subtitle: Text("Silahkan Comment jika menurut kamu berguna !!!"),
),
ListTile(
title: Text("SHARE"),
subtitle: Text("Silahkan Share jika menurut kamu berguna !!!"),
),
],
),
),
);
}
}
BACA JUGA : Tutorial Pseudocode Algoritma Queue dalam Struktur Data Alternative 3
3. ListView.builder
ListView.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) kamu bisa tambahkan atribut itemCount.
a. Hanya menggunakan List.view
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 ListView.builder bersama ISALLAB.COM"),
),
body: ListView.builder(
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text('ISALLAB.COM ke $index'),
subtitle: Text("Share and Learn Together !!!"),
);
},
),
),
);
}
}
BACA JUGA : Tutorial Pseudocode Algoritma Queue dalam Struktur Data Alternative 1
b. Hanya menggunakan List.view itemCount
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 ListView.builder bersama ISALLAB.COM"),
),
body: ListView.builder(
itemCount: 20, // hanya berbeda disini
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text('ISALLAB.COM ke $index'),
subtitle: Text("Share and Learn Together !!!"),
);
},
),
),
);
}
}
BACA JUGA : Pengertian dan Contoh Pseudocode Algoritma Tree dalam Struktur Data -PART1
4. ListView.separated
ListView.separated sama seperti ketika menggunakan builder, hanya saja pada separated akan terbuat item tambahan sebagai pembatas antara item, dan wajib menambahkan itemCount.
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 ListView.separated bersama ISALLAB.COM"),
),
body: ListView.separated(
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text('ISALLAB.COM ke $index'),
subtitle: Text("Share and Learn Together !!!"),
);
},
separatorBuilder: (BuildContext context, int index) {
return ListTile(
title: Text('Separated Garis of $index'),
);
},
),
),
);
}
}
Sampai disini tutorial Flutter Pemula #4 – Scrolling Widget SingleChildScrollView ListView GridView -PART1 untuk PART2 silahkan di link berikut Flutter Pemula #4 – Scrolling Widget SingleChildScrollView ListView GridView -PART2 , ikuti terus website ini untuk mendapatkan tutorial dan artikel menarik lainya. Semoga bermanfaat, jangan lupa berkomentar dan bagikan artikel ini jika menurut kamu berguna. 🙂