Kaydırmayı Geri Alın

Coddy'nin Flutter Journey'sinin Listeler ve Ekranlar bölümünün bir parçası. Ders 27 / 33.

Yanlışlıkla kaydırmak kolaydır; bu nedenle iyi uygulamalar geri dönüş olanağı sunar: kaldırılan öğeyi belirten ve bir Geri Al düğmesi içeren bir SnackBar. SnackBarAction bu düğmedir:

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

Öğeyi bulunduğu yere geri koymak için, kaldırmadan önce yerini hatırla. items.indexOf(item) öğenin konumunu verir, items.removeAt(index) onu kaldırır ve items.insert(index, item) aynı konuma geri koyar.

items.add(item) da öğeyi geri getirir, ancak listenin sonuna ekler.

Görev

Orta

Bir öğe kaydırılarak kaldırıldığında, öğenin adıyla birlikte SnackBar içinde Milk removed mesajını gösterin ve öğeyi aynı yere geri koyan bir Undo eylemi sunun.

Kendin dene

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)),
            ),
        ],
      ),
    );
  }
}