Menggunakan flutter_slidable untuk Membuat Item yang Dapat Dihapus dan Diselipkan dalam Daftar

July 21, 2023

Dalam pengembangan aplikasi Flutter, kita sering kali perlu mengimplementasikan fitur untuk menghapus atau menyisipkan item dalam daftar. flutter_slidable adalah package Flutter yang memudahkan kita untuk membuat item dalam daftar yang dapat dihapus atau diselipkan dengan mudah. Dalam artikel ini, kita akan membahas tentang flutter_slidable, bagaimana menggunakannya, dan memberikan contoh implementasinya.

Apa itu flutter_slidable Package?

flutter_slidable adalah package Flutter yang menyediakan komponen untuk membuat item dalam daftar yang dapat dihapus atau diselipkan. Package ini memungkinkan kita untuk menambahkan tindakan geser ke kiri atau ke kanan pada item daftar, seperti menghapus, menyisipkan, atau menampilkan opsi tambahan. Dengan flutter_slidable, kita dapat menciptakan daftar yang interaktif dan mudah digunakan bagi pengguna.

Cara Menggunakan flutter_slidable Package

Langkah pertama adalah menambahkan package flutter_slidable ke file pubspec.yaml Anda:

dependencies:
flutter:
sdk: flutter
flutter_slidable: ^3.0.0

Setelah itu, jalankan flutter pub get untuk mengunduh dan memasang package tersebut.

Contoh Penggunaan

Berikut adalah contoh sederhana tentang cara menggunakan flutter_slidable untuk membuat item dalam daftar yang dapat dihapus atau diselipkan:

import ‘package:flutter/material.dart’;
import ‘package:flutter/src/widgets/framework.dart’;
import ‘package:flutter/src/widgets/placeholder.dart’;
import ‘package:flutter_slidable/flutter_slidable.dart’;

class ArtikelPage20 extends StatefulWidget {
const ArtikelPage20({super.key});

@override
State<ArtikelPage20> createState() => _ArtikelPage20State();
}

class _ArtikelPage20State extends State<ArtikelPage20> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(‘Flutter Slidable’), centerTitle: true),
body: Center(
child: Slidable(
key: const ValueKey(0),
startActionPane: ActionPane(
motion: const ScrollMotion(),
dismissible: DismissiblePane(onDismissed: () {}),
children: [
SlidableAction(
onPressed: build,
backgroundColor: Color(0xFFFE4A49),
foregroundColor: Colors.white,
icon: Icons.delete,
label: ‘Delete’,
),
SlidableAction(
onPressed: build,
backgroundColor: Color(0xFF21B7CA),
foregroundColor: Colors.white,
icon: Icons.share,
label: ‘Share’,
),
],
),
endActionPane: ActionPane(
motion: ScrollMotion(),
children: [
SlidableAction(
flex: 2,
onPressed: build,
backgroundColor: Color(0xFF7BC043),
foregroundColor: Colors.white,
icon: Icons.archive,
label: ‘Archive’,
),
SlidableAction(
onPressed: build,
backgroundColor: Color(0xFF0392CF),
foregroundColor: Colors.white,
icon: Icons.save,
label: ‘Save’,
),
],
),
child: const ListTile(title: Text(‘Slide me’)),
),
),
);
}
}

Berikut adalah visualisasinya :

Dalam contoh di atas, kita menggunakan flutter_slidable untuk menambahkan opsi hapus pada setiap item dalam daftar. Ketika item digeser ke kiri, opsi hapus akan muncul, dan ketika pengguna memilih opsi hapus, item akan dihapus dari daftar.

Kesimpulan

flutter_slidable adalah package Flutter yang memungkinkan kita untuk membuat daftar yang interaktif dengan item-item yang dapat dihapus atau diselipkan. Dalam artikel ini, kami telah membahas tentang flutter_slidable, cara menggunakannya, dan memberikan contoh sederhana. Cobalah mengintegrasikan flutter_slidable dalam proyek Flutter Anda untuk memberikan pengalaman pengguna yang lebih baik dan menarik dalam mengelola item dalam daftar.