רשימת משימות: סימון כהושלמה

חלק מהיחידה פרויקטים במסלול ה-Flutter של Coddy. שיעור 3 מתוך 36.

משימה צריכה לזכור אם היא הושלמה. הוסף למחלקה שדה שני שמתחיל בתור false ויכול להשתנות, כך שהוא לא יהיה final:

class Task {
  Task(this.title);

  final String title;
  bool done = false;
}

כל שורה מקבלת Checkbox כרכיב leading: שלה. הערך value שלו הוא done של המשימה, וה-onChanged שלו מגדיר את done בתוך setState.

משימה שהושלמה צריכה להיראות כך. TextDecoration.lineThrough מצייר קו דרך הטקסט, וצבע אפור גורם לו לבלוט פחות. כשהמשימה לא הושלמה, הסגנון הוא null והטקסט שומר על המראה של ערכת העיצוב:

style: task.done
    ? const TextStyle(decoration: TextDecoration.lineThrough, color: Colors.grey)
    : null,

אתגר

בינוני

סמן משימות כהושלמו:

הוסף bool done = false; אל Task
הוסף לכל ListTile את leading: מסוג Checkbox, שמציג את מצב done של המשימה ומאפשר לשנות אותו
כשהמשימה הושלמה, הוסף קו חוצה לכותרת שלה ושנה את צבעה ל־Colors.grey

נסו בעצמכם

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;
}

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();

  void _addTask() {
    setState(() {
      _tasks.add(Task(_controller.text));
    });
    _controller.clear();
  }

  @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),
                ),
              ],
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: _tasks.length,
              itemBuilder: (context, index) {
                final task = _tasks[index];
                return ListTile(
                  title: Text(task.title),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}