Halo teman – teman,

Kali ini kita akan membahas tentang widget Column dan ListView di flutter. Secara umum Column dan ListView ini akan membentuk layout secara vertikal (atas – ke bawah). Tapi kenapa harus ada 2 macam, jika sudah sama – sama membentuk layout secara vertikal ?

Nah, agar dapat mudah melihat perbedaannya kita perlu membangun UI dengan menggunakan Column dan ListView, Berikut untuk UI dengan menggunakan Column :

import 'package:flutter/material.dart';

class PageColumn extends StatefulWidget {

  @override
  _PageColumnState createState() => _PageColumnState();
}

class _PageColumnState extends State<PageColumn> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.grey,
        title: Text('Column'),
      ),
      backgroundColor: Colors.black,
      body: SingleChildScrollView(    //agar dapat di scroll
        child: Column(
          children: [
            SizedBox(height: 5),
            Container(
              color: Colors.orange,
              child: Text('Data'),
            ),
            SizedBox(height: 5),
            Container(
              color: Colors.blue,
              child: Text('Data'),
            ),
            SizedBox(height: 5),
            Container(
              color: Colors.pink,
              child: Text('Data'),
            ),
            SizedBox(height: 5),
            Container(
              color: Colors.grey,
              child: Text('Data'),
            ),
            SizedBox(height: 5),
            Container(
              color: Colors.amberAccent,
              child: Text('Data'),
            ),
            SizedBox(height: 5),
            Container(
              color: Colors.blueGrey,
              child: Text('Data'),
            ),
            Container(
              color: Colors.red,
              child: Text('Data'),
            ),
            SizedBox(height: 5),
            Container(
              color: Colors.redAccent,
              child: Text('Data'),
            ),
            SizedBox(height: 5),
            Container(
              color: Colors.brown,
              child: Text('Data'),
            ),
            SizedBox(height: 5),
            Container(
              color: Colors.orange,
              child: Text('Data'),
            ),
            SizedBox(height: 5),
            Container(
              color: Colors.blue,
              child: Text('Data'),
            ),
            SizedBox(height: 5),
            Container(
              color: Colors.pink,
              child: Text('Data'),
            ),
            SizedBox(height: 5),
            Container(
              color: Colors.grey,
              child: Text('Data'),
            ),
            SizedBox(height: 5),
            Container(
              color: Colors.amberAccent,
              child: Text('Data'),
            ),
            SizedBox(height: 5),
            Container(
              color: Colors.blueGrey,
              child: Text('Data'),
            ),
            Container(
              color: Colors.red,
              child: Text('Data'),
            ),
            SizedBox(height: 5),
            Container(
              color: Colors.redAccent,
              child: Text('Data'),
            ),
            SizedBox(height: 5),
            Container(
              color: Colors.brown,
              child: Text('Data'),
            ),
            SizedBox(height: 5),
            Container(
              color: Colors.orange,
              child: Text('Data'),
            ),
            SizedBox(height: 5),
            Container(
              color: Colors.blue,
              child: Text('Data'),
            ),
          ],
        ),
      ),
    );
  }
}

• Saat tidak menggunakan SingleChildScrollView( ) maka tampilannya akan seperti gambar disamping dimana akan muncul Offervlow seperti garis hitam kuning pada police line

Hasill running aplikasi saat dijalankan dan sudah ditambahkan SingleChildScrollView() :

Berikut UI dengan menggunakan ListView :

import 'package:flutter/material.dart';

class PageListView extends StatefulWidget {

  @override
  _PageListViewState createState() => _PageListViewState();
}

class _PageListViewState extends State<PageListView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.grey,
        title: Text('ListView'),
      ),
      backgroundColor: Colors.black,
      body: ListView(                 //tanpa perlu menambahkan widget SingleChildScrollView
        children: [
          SizedBox(height: 5),
          Container(
            height: 100,
            color: Colors.orange,
            child: Text('Data'),
          ),
          SizedBox(height: 5),
          Container(
            height: 100,
            color: Colors.blue,
            child: Text('Data'),
          ),
          SizedBox(height: 5),
          Container(
            height: 100,
            color: Colors.pink,
            child: Text('Data'),
          ),
          SizedBox(height: 5),
          Container(
            height: 100,
            color: Colors.grey,
            child: Text('Data'),
          ),
          SizedBox(height: 5),
          Container(
            height: 100,
            color: Colors.amberAccent,
            child: Text('Data'),
          ),
          SizedBox(height: 5),
          Container(
            height: 100,
            color: Colors.blueGrey,
            child: Text('Data'),
          ),
          SizedBox(height: 5),
          Container(
            height: 100,
            color: Colors.orange,
            child: Text('Data'),
          ),
          SizedBox(height: 5),
          Container(
            height: 100,
            color: Colors.blue,
            child: Text('Data'),
          ),
        ],
      ),
    );
  }
}

Hasil running aplikasi saat dijalankan :

Nah, dari Column dan ListView di atas, dapat kita ketahui beberapa perbedaan kedua widget ini yaitu jika pada Column tidak memiliki default scroll, sehingga kita perlu membungkus widget Column dengan widget SingleChildScrollView(), serta widget yang di tampilkan tidak akan memenuhi layar secara horizontal.

Sedangkan pada ListView, kita sudah tidak perlu menambahkan SingelChildScrollView lagi, karena secara default ListView sudah dapat di scroll, dan karena ini berupa list maka widget yang di tampilkan akan memenuhi layar secara horizontal terlihat ketia saat menggunakan container yang diberikan atribut warna.

Jadi, mana yang lebih cocok digunakan antara Column dan ListView?
Sejatinya tidak ada salahnya saat menggunakan salah satu dari widget tersebut atau bahkan dapat memanfaatkan keduanya, kembali lagi kepada developer yang mana yang lebih cocok digunakan saat membangung UI yang ingin di buat.