Розробка функціоналу мультивибору та видалення елементів у списку з використанням Flutter

5 Березня 2024 в 19:26 25

У розробці мобільних додатків часто виникає потреба у функціоналі, що дозволяє користувачам обирати кілька елементів зі списку та видаляти їх одночасно. У цій статті ми розглянемо, як реалізувати мультивибір та видалення елементів у списку за допомогою Flutter разом із Firebase та Cloud Firestore.

Перш ніж розпочати розробку, важливо мати знання про базові концепції Flutter, такі як створення віджетів та робота зі станом додатку. Також буде корисним мати базове розуміння роботи з Firebase та Cloud Firestore для зберігання та отримання даних.

Імплементація мультивибору

Для початку розглянемо імплементацію мультивибору у списку. Для цього ми будемо використовувати вбудований в Flutter віджет Checkbox, який дозволяє встановлювати та знімати прапорці.

Checkbox(
  value: isCheckedList[index],
  activeColor: Colors.green,
  onChanged: (value) {
    setState(() {
      isCheckedList[index] = value!;
      if (value) {
        selectedList.add(index);
      } else {
        selectedList.remove(index);
      }
    });
  },
),

Checkbox(

value: isCheckedList[index],

activeColor: Colors.green,

onChanged: (value) {

setState(() {

isCheckedList[index] = value!;

if (value) {

selectedList.add(index);

} else {

selectedList.remove(index);

}

});

У нашому коді ми використовуємо список isCheckedList для зберігання стану прапорців для кожного елемента у списку. При зміні стану прапорця ми викликаємо setState для оновлення інтерфейсу, а також додаємо або видаляємо індекс елемента зі списку selectedList залежно від того, чи був прапорець встановлений чи знятий.

Імплементація видалення елементів

Тепер розглянемо імплементацію видалення обраних елементів у списку. Ми будемо використовувати плагін Flutter Slidable для створення можливості видалення елементів шляхом зсуву.

Slidable(
  endActionPane: ActionPane(
    motion: const StretchMotion(),
    children: [
      SlidableAction(
          backgroundColor: Colors.red,
          icon: Icons.delete,
          label: "Delete",
          onPressed: (contex) {
            FirebaseFirestore.instance
                .collection(widget.userCollection)
                .doc(uid)
                .collection(widget.notificationCollection)
                .doc(selectedUID)
                .delete();
          })
    ],
  ),
  child: ListTile(
    // Вміст елемента списку
  ),
),

Slidable(

endActionPane: ActionPane(

motion: const StretchMotion(),

children: [

SlidableAction(

backgroundColor: Colors.red,

icon: Icons.delete,

label: "Delete",

onPressed: (contex) {

FirebaseFirestore.instance

.collection(widget.userCollection)

.doc(uid)

.collection(widget.notificationCollection)

.doc(selectedUID)

.delete();

})

child: ListTile(

// Вміст елемента списку

У вбудованому в Flutter віджеті Slidable ми використовуємо endActionPane для визначення панелі дій, яка з’явиться при зсуві вправо. В цьому випадку ми створюємо дію видалення, яка буде видаляти вибраний елемент зі списку за допомогою Cloud Firestore.

Висновок

У цій статті ми розглянули, як реалізувати функціонал мультивибору та видалення елементів у списку з використанням Flutter разом із Firebase та Cloud Firestore. Ці функції дозволяють забезпечити зручне та ефективне взаємодію зі списками елементів у мобільних додатках, що покращує користувацький досвід та продуктивність додатків.