Membuat List View menggunakan Flutter

Halo guys, Berjumpa dengan Miniblog dari Inzaghi's Blog! Jika sebelumnya, sudah membuat Baris dan Kolom menggunakan Flutter, kali ini kita akan membuat Program List View menggunakan Flutter.

Sumber : Blog.Logrocket.com, Educative.io, dan juga menggunakan ChatGPT

Dalam Flutter, widget ListView adalah komponen yang sangat serbaguna dan efisien yang digunakan untuk menampilkan daftar widget anak yang dapat digulir. Ini adalah salah satu alat yang paling umum digunakan untuk membangun antarmuka dinamis yang menampung sejumlah besar komponen atau widget.

Dengan menggunakan widget ListView, Anda dapat menampilkan semua komponen secara sangat efisien dan menyenangkan secara visual karena menyediakan mekanisme gulir bawaan. Mekanisme ini memungkinkan pengguna untuk menggulir melalui daftar item yang terlalu besar untuk muat dalam dimensi layar.

1. Static ListView

Di Static ListView, kita cukup menggunakan widget ListView dan mendefinisikan turunan sebagai daftar widget yang kita ingin halaman kita tampilkan.

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ListViewExample(),
    );
  }
}
class ListViewExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ListView Example'),
      ),
      body: ListView(
        children: <Widget>[
          ListTile(
            title: Text('Item 1'),
          ),
          ListTile(
            title: Text('Item 2'),
          ),
          ListTile(
            title: Text('Item 3'),
          ),
          ListTile(
            title: Text('Item 4'),
          ),
          ListTile(
            title: Text('Item 5'),
          ),
          ListTile(
            title: Text('Item 6'),
          ),
          ListTile(
            title: Text('Item 7'),
          ),
          ListTile(
            title: Text('Item 8'),
          ),
          ListTile(
            title: Text('Item 9'),
          ),
        ],
      ),
    );
  }
}

Output :

Penjelasan :

Pada contoh ini, kita mendefinisikan kelas MyApp sebagai root widget untuk aplikasi kita. Ini menyiapkan MaterialApp dengan judul dan tema. Properti home MaterialApp diatur ke instance dari kelas ListViewExample, yang mewakili layar menampilkan ListView.

Baris 20–25: Kelas ListViewExample mengembangkan StatelessWidget dan mengganti metode build. Di dalam metode build, kita membuat widget Scaffold sebagai wadah untuk layar kita. Scaffold menyediakan app bar dengan judul dan bagian body.

Baris 27–39: Kita menempatkan widget ListView, dan di dalamnya, kita menambahkan tiga widget ListTile yang mewakili item daftar dengan judul Item 1, Item 2, dan Item 3.

2. Dynamic ListView

Dalam skenario lain, Anda mungkin sering kali perlu menampilkan daftar data dinamis yang menampung sejumlah besar komponen atau widget. Untuk menangani skenario seperti itu, Flutter menyediakan konstruktor ListView.builder bawaan yang dapat digunakan.

Inilah cara Anda dapat menggunakannya :

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView.builder Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ListViewBuilderExample(),
    );
  }
}
class ListViewBuilderExample extends StatelessWidget {
  final List<String> itemList = [
    'Item 1',
    'Item 2',
    'Item 3',
    'Item 4',
    'Item 5',
    'Item 6',
    'Item 7',
    'Item 8',
    'Item 9',
    'Item 10',
    'Item 11',
    'Item 12'
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ListView.builder Example'),
      ),
      body: ListView.builder(
        itemCount: itemList.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(itemList[index]),
          );
        },
      ),
    );
  }
}

Output :

3. Contoh ListView dengan Garis dan Iterasi

Inilah Program Flutter ListView dengan Garis dan Iterasi :

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  // This widget is the root of your application
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        body: ListView(
          scrollDirection: Axis.vertical,
          children: List.generate(
           70, // Membuat List sampai 70
            (index) {
              return Container(
                decoration: BoxDecoration(
                  border: Border.all(width: 3, color: Colors.black38),
                  borderRadius: const BorderRadius.all(Radius.circular(2)),
                ),
                child: Text('View $index'),
              );
            },
          ),
        ),
      ),
    );
  }
}

Output :

Untuk melihat Project ini di Web, silakan lihat di sini :

• https://zapp.run/edit/flutter-zyhe06tzyhf0?entry=lib/main.dart&file=lib/main.dart:0-1223
• https://zapp.run/edit/flutter-zdg066idh06?entry=lib/main.dart&file=lib/main.dart
  
• https://zapp.run/edit/flutter-z8m06wz8n06?entry=lib/main.dart&file=lib/main.dart:0-827
  

Mohon maaf apabila ada kesalahan sedikitpun pada Kode Program ini.

Terima Kasih 😀😊😘👌👍 :)