ביטול החלקה

חלק מהיחידה רשימות ומסכים במסלול ה-Flutter של Coddy. שיעור 27 מתוך 33.

קל לבצע החלקה בטעות, לכן אפליקציות טובות מציעות דרך לחזור: SnackBar שמציין מה הוסר, עם כפתור לביטול. SnackBarAction הוא הכפתור הזה:

SnackBar(
  content: Text('$item removed'),
  action: SnackBarAction(
    label: 'Undo',
    onPressed: () {
      setState(() {
        items.insert(index, item);
      });
    },
  ),
)

כדי להחזיר את הפריט למקום שבו היה, צריך לזכור את מיקומו לפני שמסירים אותו. items.indexOf(item) הוא המיקום שלו, items.removeAt(index) מסיר אותו, ו-items.insert(index, item) מחזיר אותו לאותו מיקום.

גם items.add(item) יחזיר אותו, אבל לסוף הרשימה.

אתגר

בינוני

כשמחליקים פריט כדי להסיר אותו, מציגים SnackBar שאומר Milk removed (עם שם הפריט) ופעולת Undo שמחזירה את הפריט לאותו מקום.

נסו בעצמכם

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final List<String> items = ['Milk', 'Bread', 'Eggs', 'Apples', 'Cheese'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('${items.length} items')),
      body: ListView(
        children: [
          for (String item in items)
            Dismissible(
              key: ValueKey(item),
              onDismissed: (direction) {
                setState(() {
                  items.remove(item);
                });
              },
              child: ListTile(title: Text(item)),
            ),
        ],
      ),
    );
  }
}