قائمة المهام: تحديد المهمة كمكتملة

جزء من قسم المشاريع في رحلة 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 مربع اختيار Checkbox في leading: يعرض حالة 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),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}