Cara Switch Tampilan dari ListView Menjadi GridView di Flutter

Halo semua, kembali lagi di sahretech. Kali ini saya akan berbagi tutorial tentang flutter yang tidak kalah seru, jadi kali ini kita akan membahas bagaiaman cara berganti/switch tampilan dari list layout ke grid layout dan sebaliknya. Penasaran?, ayo ikuti tutorialnya di bawah ini.

Baik Listview dan GridView, keduanya adalah widget yang disediakan oleh flutter untuk membuat tampilan berupda daftar yang dapat discroll ke atas dan ke bawah. Saya juga sudah menulis pembahasan ListView dan GridView di link berikut ini.

    ⦿ Cara Menggunakan List View Builder

    ⦿ Cara Menggunakan List View Builder dan Get Data Api

    ⦿ Membuat ListView di Dalam List View (Nested) pada Flutter

Ok, tutorial kali ini sedikit tricky. Kita hanya memainkan sedikit setState yang ada di stateful widget, perubahan state itulah yang kita manfaatkan untuk merubah tampilan layar yang semula list view menjadi grid view, dan sebaliknya. Jadi kita tidak perlu membuat dua halaman yang berbeda untuk menampilkan dua tampilan. Diharapkan latihan ini dapat memberikan gambaran untuk membuat tampilan aplikasi yang lebih dinamis lagi nantinya.

Cara Mudah Berganti Tampilan dari List Menjadi Grid

1. Buka visual studio code, lalu buat project baru. Tekan ctrl + shift + P secara bersamaan → pilih flutter new project → beri nama project "latihan_switch_tampilan".

2. Buat sebuah file baru di dalam folder lib, dengan nama data.dart. Lalu isi file tersebut dengan script yang ada di bawah ini.

    

List data = [
    {
      "title": "Lorem Ipsum Sit Dolor Amet",
      "desc": "Lorem Ipsum Sit Dolor Amet",
      "image": "https://cdn.pixabay.com/photo/2018/03/17/20/51/white-buildings-3235135__340.jpg"
    },
    {
      "title": "Lorem Ipsum Sit Dolor Amet",
      "desc": "Lorem Ipsum Sit Dolor Amet", 
      "image": "https://cdn.pixabay.com/photo/2018/03/17/20/51/white-buildings-3235135__340.jpg"
    }
];

3. Buka file main.dart, lalu ganti isi di dalamnya dengan script di bawah ini. Untuk keterangan penjelas, bisa kalian cek di dalam script dan di dalam table penjelas. Bagi yang masih bingung, dapat bertanya langsung di kolom komentar di bawah post ini.

    


    // ignore_for_file: prefer_const_constructors, prefer_const_literals_to_create_immutables

    import 'package:flutter/material.dart';
    import 'data.dart';
    
    void main() {
      runApp(MaterialApp(
        //menghilangkan banner debug
        debugShowCheckedModeBanner: false,
        title: "Switch Grid to List",
        home: MyApp(),
      ));
    }
    
    class MyApp extends StatefulWidget {
      const MyApp({Key? key}) : super(key: key);
    
      @override
      _MyAppState createState() => _MyAppState();
    }
    
    class _MyAppState extends State<MyApp> {
      var status = 0;
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
              title: Text("App News"),
              actions: [
                IconButton(
                  //jika 0 maka tampilkan icon list jika selain nol tampilkan icon grid
                  icon: status == 0 ? Icon(Icons.list) : Icon(Icons.grid_view),
                  tooltip: 'Open shopping cart',
                  onPressed: () {
                    //wajib menambahkan setstate,
                    //setstate ini digunakan untuk merubah keadaan,
                    //saat variabel status diubah, otomatis seluruh halaman akan dirender ulang
                    setState(() {
                      if (status == 0) {
                        status = 1;
                      } else {
                        status = 0;
                      }
                    });
                  },
                ),
              ],
            ),
            // jika status 0 maka tampilkan lisview jika status selain 0 tampilkan grid view
            body: status == 0
                ? ListView.builder(
                    itemBuilder: (context, index) {
                      return ListTile(
                        leading: Image.network(data[index]['image']),
                        title: Text(data[index]['title']),
                        subtitle: Text(data[index]['desc']),
                        trailing: Icon(Icons.bookmark),
                      );
                    },
                    itemCount: data.length,
                  )
                : GridView.builder(
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 2),
                    itemBuilder: (_, index) {
                      return Padding(
                        padding: const EdgeInsets.only(top: 10),
                        child: Card(
                          //menambahkan bayangan
                          elevation: 5,
                          child: Column(
                            children: [
                              Container(
                                height: 100,
                                decoration: BoxDecoration(
                                    image: DecorationImage(
                                        image: NetworkImage(
                                          data[index]['image'],
                                        ),
                                        fit: BoxFit.cover)),
                              ),
                              ListTile(
                                title: Text(data[index]['title']),
                                subtitle: Text(data[index]['desc']),
                                trailing: Icon(Icons.bookmark),
                              )
                            ],
                          ),
                        ),
                      );
                    },
                    itemCount: data.length));
      }
    }

Tabel Penjelas 

#	Syntax/Script	Keterangan
1	debugShowCheckedModeBanner: false,	menghilangkan banner debug
2	icon: status == 0 ? Icon(Icons.list) : Icon(Icons.grid_view),	Membuat pengkondisian, dimana jika var status adalah 0 maka tampilkan icon list dan jika status adalah 1 maka tampilkan icon grid
3	setState(() { if (status == 0) { status = 1; } else { status = 0; } });	Setstate digunakan untuk merubah keadaan. Variable status akan kita ubah menjadi 0 atau 1. Selain merubah variable, saat setState() dijalankan maka seluruh halaman akan dirender ulang.
4	Elevation: 5	Menambahkan bayangan pada card
5	itemCount: data.length	itemCount adalah parameter dari list view dan grid view, digunakan untuk menset total data yang akan ditampilkan. Total data yang ingin kita tampilkan sesuai list data yang kita buat di dalam file data.dart

 

3. Ok, cukup simple. Semua proses sudah kita lalui, selanjutnya tinggal uji coba saja. Jalankan emulator kalian. Jika berhasil maka tampilannya akan tampak seperti gambar di bawah ini.

Hasail Akhir

Keren!, sekarang kalian sudah bisa membuat tampilan yang berbeda dengan memanfaatkan setState() flutter. Kalian bisa melakukan improvisasi lagi pada latihan ini dengan menambahkan data api agar aplikasi yang dibangun semakin hidup. Untuk cara menggunakan data api di flutter pada ListView dan GridView bisa kalian lihat di link berikut ini.

    ⦿ Cara Menggunakan List View Builder

    ⦿ Cara Menggunakan List View Builder dan Get Data Api

    ⦿ Membuat ListView di Dalam List View (Nested) pada Flutter

Sekian dari saya, tutorial kali ini tentang cara switch atau berganti tampilan dari listview menjadi gridview dan sebaliknya, semoga bermanfaat. Jika ada kesulitan segera tanya di kolom komentar atua fanspage sahretech, saya akan senang hati menjawab. Sekian, terima kasih dan sampai jumpa di tutorial keren lainnya.