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

by Faisal Ridwan in Dart
flutter-pemula-4-isallab.com.jpg

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 )

  1. SingleChildScrollView
  2. ListView,
  3. ListView.builder,
  4. ListView.separated,
  5. GridView,
  6. GridView.count,
  7. GridView.builder, dan
  8. GridView.extent.

Pastikan kalian sudah pernah menginstal Flutter pada laptop kalian dan pelajari semuanya disini, jika belum kalian dapat membaca artikel berikut :

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. 🙂

Tagged with: , , , , , , ,

Silahkan Berkomentar :