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.
 |
| 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 tulisan saya, saya akan senang hati menjawab. Sekian, terima kasih dan sampai jumpa di tutorial keren lainnya.
Since our studios operate 24/7, you’ll rotate between day, night, 코인카지노 and overnight shifts, from the comfort of our private, state-of-the-art studio located in Central Burnaby. You’ll host iconic on line casino games like Blackjack, Poker and Roulette, with unlimited virtual players. Most of the games supplied by on-line gaming venues are available in a cell version. The developers are devoted to transferring the whole expertise to the cell gadgets so you can to|you presumably can} play your favourite games on the go and not using a|with no} loss in video or sound high quality.
BalasHapusPosting Komentar