Flutter ListView

Flutter ListView

Di Flutter, ListView adalah widget list yang dapat di-scroll dan diisi dengan widget-widget yang disusun secara linear. ListView menampilkan widget child-nya satu demi satu di arah scroll vertical atau horizontal.

Ada beberapa jenis ListView :

  • ListView
  • ListView.builder
  • ListView.separated
  • ListView.custom

Constructor

ListView

ListView(
{Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
double itemExtent,
bool addAutomaticKeepAlives: true,
bool addRepaintBoundaries: true,
bool addSemanticIndexes: true,
double cacheExtent,
List children: const [],
int semanticChildCount,
DragStartBehavior dragStartBehavior: DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,
String restorationId,
Clip clipBehavior: Clip.hardEdge}
)

ListView.builder

ListView.builder(
{Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
double itemExtent,
@required IndexedWidgetBuilder itemBuilder,
int itemCount,
bool addAutomaticKeepAlives: true,
bool addRepaintBoundaries: true,
bool addSemanticIndexes: true,
double cacheExtent,
int semanticChildCount,
DragStartBehavior dragStartBehavior: DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,
String restorationId,
Clip clipBehavior: Clip.hardEdge}
)

ListView.custom

const ListView.custom(
{Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
double itemExtent,
@required SliverChildDelegate childrenDelegate,
double cacheExtent,
int semanticChildCount,
DragStartBehavior dragStartBehavior: DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,
String restorationId,
Clip clipBehavior: Clip.hardEdge}
)

ListView.separated

ListView.separated(
{Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
@required IndexedWidgetBuilder itemBuilder,
@required IndexedWidgetBuilder separatorBuilder,
@required int itemCount,
bool addAutomaticKeepAlives: true,
bool addRepaintBoundaries: true,
bool addSemanticIndexes: true,
double cacheExtent,
DragStartBehavior dragStartBehavior: DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,
String restorationId,
Clip clipBehavior: Clip.hardEdge}
)

Properties Dari ListView

  • childrenDelegate: Properti ini menggunakan object SliverChildDelegate. Ini berfungsi sebagai delegasi yang memberikan children untuk ListView.
  • clipBehaviour: Properti ini menggunakan object Clip enum (final) yang digunakan untuk mengontrol apakah konten dalam ListView akan dipotong atau tidak.
  • itemExtent: itemExtent menggunakan nilai double sebagai object untuk mengontrol area yang dapat di scroll dalam ListView.
  • padding: Properti ini menggunakan EdgeInsetsGeometry sebagai object untuk memberikan ruang antara Listview dan anak-anaknya.
  • scrollDirection: Properti ini menggunakan enum Axis sebagai object untuk memutuskan arah gulir pada ListView..
  • shrinkWrap: Properti ini menggunakan nilai boolean sebagai object untuk memutuskan apakah ukuran area yang dapat di scroll akan ditentukan oleh konten di dalam ListView.

ListView

Ini adalah constructor standar untuk class ListView. ListView secara sederhana menggunakan list widget dan membuatnya dapat di-scroll. Biasanya, ListView digunakan dengan beberapa child sebagai list, dan akan membangun elemen-elemen tak terlihat dalam list. Oleh karena itu, menggunakan terlalu banyak widget dapat mengurangi efisiensi list.

import "package:flutter/material.dart";
import 'package:flutter/services.dart';

// fungsi untuk mentrigger proses build aplikasi flutter
void main() {
  runApp(ngtApp()); //MaterialApp
}

MaterialApp ngtApp() {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text("ListView"),
        actions: [
          IconButton(
            icon: const Icon(Icons.comment),
            tooltip: 'Comment Icon',
            onPressed: () {},
          ), //IconButton
          IconButton(
            icon: const Icon(Icons.settings),
            tooltip: 'Setting Icon',
            onPressed: () {},
          ), //IconButton
        ], //[]
        backgroundColor: Colors.blueAccent[400],
        elevation: 50.0,
        leading: IconButton(
          icon: const Icon(Icons.menu),
          tooltip: 'Menu Icon',
          onPressed: () {},
        ),
        systemOverlayStyle: SystemUiOverlayStyle.light,
      ), //AppBar
      body: ListView(
        padding: const EdgeInsets.all(20),
        children: const [
          CircleAvatar(
            maxRadius: 50,
            backgroundColor: Colors.black,
            child: Icon(Icons.person, color: Colors.white, size: 50),
          ),
          Center(
            child: Text(
              'Nextgen Tutorial',
              style: TextStyle(
                fontSize: 50,
              ),
            ),
          ),
          Text(
            "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a gallery of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum,It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).",
            style: TextStyle(
              fontSize: 20,
            ),
          ),
        ],
      ),
      //Center
    ), //Scaffold
    debugShowCheckedModeBanner: false, //Digunakan untuk menghapus Debug Banner
  );
}

Output:

ListView.builder

ListView.builder adalah constructor yang digunakan untuk membangun list widget yang diulang. Constructor ini memiliki dua parameter utama:

  1. itemCount: Parameter ini menentukan jumlah pengulangan widget yang akan dibangun dan bersifat opsional. Jika tidak ditentukan, maka widget akan dibangun secara tak terbatas.
  2. itemBuilder: Parameter ini harus diisi dan digunakan untuk membangun widget yang akan dihasilkan sebanyak nilai itemCount.

Dengan demikian, Anda dapat menggunakan constructor ListView.builder untuk membuat daftar widget yang diulangi dengan mudah dan efektif.

import "package:flutter/material.dart";
import 'package:flutter/services.dart';

// fungsi untuk mentrigger proses build aplikasi flutter
void main() {
  runApp(const NgtApp()); 
}

class NgtApp extends StatelessWidget {
  const NgtApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("ListView.builder"),
          actions: [
            IconButton(
              icon: const Icon(Icons.comment),
              tooltip: 'Comment Icon',
              onPressed: () {},
            ), //IconButton
            IconButton(
              icon: const Icon(Icons.settings),
              tooltip: 'Setting Icon',
              onPressed: () {},
            ), //IconButton
          ], //[]
          backgroundColor: Colors.blueAccent[400],
          elevation: 50.0,
          leading: IconButton(
            icon: const Icon(Icons.menu),
            tooltip: 'Menu Icon',
            onPressed: () {},
          ),
          systemOverlayStyle: SystemUiOverlayStyle.light,
        ), //AppBar
        body: ListView.builder(
          itemCount: 31,
          itemBuilder: (context, position) {
            return Card(
              child: Padding(
                padding: const EdgeInsets.all(20.0),
                child: Text(
                  position.toString(),
                  style: const TextStyle(fontSize: 22.0),
                ),
              ),
            );
          },
        ),

        //Center
      ), //Scaffold
      debugShowCheckedModeBanner: false, //Digunakan untuk menghapus Debug Banner
    );
  }
}

Output:

ListView.separated

Constructor ListView.separated digunakan untuk membuat list widget yang dapat terdiri dari dua bagian yaitu list utama dan list pemisah. List pemisah digunakan untuk memisahkan widget pada list utama. Berbeda dengan constructor ListView.builder, constructor ListView.separated harus memiliki parameter itemCount.

import "package:flutter/material.dart";
import 'package:flutter/services.dart';

// fungsi untuk mentrigger proses build aplikasi flutter
void main() {
  runApp(const NgtApp()); //MaterialApp
}

class NgtApp extends StatelessWidget {
  const NgtApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("ListView.builder"),
          actions: [
            IconButton(
              icon: const Icon(Icons.comment),
              tooltip: 'Comment Icon',
              onPressed: () {},
            ),
            IconButton(
              icon: const Icon(Icons.settings),
              tooltip: 'Setting Icon',
              onPressed: () {},
            ),
          ],
          backgroundColor: Colors.blueAccent[400],
          elevation: 50.0,
          leading: IconButton(
            icon: const Icon(Icons.menu),
            tooltip: 'Menu Icon',
            onPressed: () {},
          ),
          systemOverlayStyle: SystemUiOverlayStyle.light,
        ),
        body: ListView.separated(
          itemBuilder: (context, position) {
            return Card(
              child: Padding(
                padding: const EdgeInsets.all(15.0),
                child: Text(
                  'List Item $position',
                ),
              ),
            );
          },
          separatorBuilder: (context, position) {
            return Card(
              color: Colors.grey,
              child: Padding(
                padding: const EdgeInsets.all(5.0),
                child: Text(
                  'Separator $position',
                  style: const TextStyle(color: Colors.white),
                ),
              ),
            );
          },
          itemCount: 31,
        ),
      ),
      debugShowCheckedModeBanner:
          false, //Digunakan untuk menghapus Debug Banner
    );
  }
}

Output:

ListView.custom

Untuk membangun ListView dengan fungsi khusus, kita dapat menggunakan constructor ListView.custom. Constructor ini memiliki parameter utama berupa SliverChildDelegate yang bertanggung jawab untuk membangun item dalam list.

Ada dua jenis SliverChildDelegate yang dapat digunakan:

  • SliverChildListDelegate, yang menggunakan list widget children
  • SliverChildBuilderDelegate, yang menggunakan IndexedWidgetBuilder, yaitu fungsi builder.

Secara lebih detail, kita dapat menyimpulkan bahwa ListView.builder dibuat menggunakan ListView.custom dengan SliverChildBuilderDelegate. Selain itu, constructor default ListView sebenarnya menggunakan ListView.custom dengan SliverChildListDelegate.

Tinggalkan Balasan

Keranjang Belanja0
Keranjang belanja kosong ...
0