Cara Switch Tampilan dari ListView Menjadi GridView di Flutter

Share:
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.


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.

Cara Switch Tampilan dari ListView Menjadi GridView di Flutter
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.



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.

No comments

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik