רשימת משימות: ביטול מחיקה
חלק מהיחידה פרויקטים במסלול ה-Flutter של Coddy. שיעור 7 מתוך 36.
החלקה מהירה, וכך גם החלקה בטעות. אפליקציות טובות מאפשרות לך לבטל אותה: הודעה בתחתית מציינת מה נמחק, ולצדה כפתור לביטול.
SnackBar מקבל action:, כלומר SnackBarAction עם label ועם onPressed. כדי להחזיר את המשימה למקום שבו הייתה, שמור את המיקום שלה לפני הסרתה:
final index = _tasks.indexOf(task);
// הסר אותו, ואז הצג את ה-SnackBar
SnackBarAction(
label: 'Undo',
onPressed: () {
setState(() {
_tasks.insert(index, task);
});
},
)אם מחליקים במהירות שתי משימות, ההודעה השנייה ממתינה עד שתוקף הראשונה יפוג. יש לקרוא ל-ScaffoldMessenger.of(context).hideCurrentSnackBar(); לפני showSnackBar, כדי שההודעה החדשה ביותר תופיע מיד.
insert(index, task) מחזיר את המשימה למיקום הזה ומזיז את המשימות שאחריה למטה. add היה מוסיף אותה לסוף.
הפונקציה שמעבירים ל-onPressed זוכרת את index ואת task מהרגע שיצרת אותה, אף שהיא מופעלת מאוחר יותר. זהו סגירה, וקריאות חוזרות מסתמכות עליה כל הזמן.
אתגר
בינוניאפשר לבטל מחיקה. בתוך _deleteTask:
- לפני הסרת המשימה, שמור את המיקום שלה בעזרת
indexOf - אחרי הסרתה, הצג
SnackBarעם הטקסטDeletedוכותרת המשימה, למשלDeleted Walk the dog - הוסף לה פעולת
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 MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal),
),
home: const TodoScreen(),
);
}
}
class Task {
Task(this.title);
final String title;
bool done = false;
}
class TodoScreen extends StatefulWidget {
const TodoScreen({super.key});
@override
State<TodoScreen> createState() => _TodoScreenState();
}
class _TodoScreenState extends State<TodoScreen> {
final List<Task> _tasks = [Task('Buy milk'), Task('Walk the dog'), Task('Read a book')];
final _controller = TextEditingController();
int get _left => _tasks.where((task) => !task.done).length;
void _addTask() {
final title = _controller.text.trim();
if (title.isEmpty) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Type a task first')),
);
return;
}
setState(() {
_tasks.add(Task(title));
});
_controller.clear();
}
void _deleteTask(Task task) {
setState(() {
_tasks.remove(task);
});
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('My Tasks')),
body: Column(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(16, 16, 16, 8),
child: Row(
children: [
Expanded(
child: TextField(
controller: _controller,
decoration: const InputDecoration(
labelText: 'New task',
border: OutlineInputBorder(),
),
),
),
const SizedBox(width: 8),
IconButton.filled(
onPressed: _addTask,
icon: const Icon(Icons.add),
),
],
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Row(
children: [
Text(
_left == 1 ? '1 task left' : '$_left tasks left',
style: Theme.of(context).textTheme.titleSmall,
),
],
),
),
Expanded(
child: ListView.builder(
itemCount: _tasks.length,
itemBuilder: (context, index) {
final task = _tasks[index];
return Dismissible(
key: ObjectKey(task),
direction: DismissDirection.endToStart,
background: Container(
color: Colors.red,
alignment: Alignment.centerRight,
padding: const EdgeInsets.symmetric(horizontal: 24),
child: const Icon(Icons.delete, color: Colors.white),
),
onDismissed: (direction) => _deleteTask(task),
child: ListTile(
leading: Checkbox(
value: task.done,
onChanged: (value) {
setState(() {
task.done = value!;
});
},
),
title: Text(
task.title,
style: task.done
? const TextStyle(
decoration: TextDecoration.lineThrough,
color: Colors.grey,
)
: null,
),
),
);
},
),
),
],
),
);
}
}
השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה פרויקטים
תרגלו בעצמכם: קומפיילר Flutter אונליין