التراجع عن السحب

جزء من قسم القوائم والشاشات في رحلة 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)),
            ),
        ],
      ),
    );
  }
}