قائمة المهام: قائمة المهام

جزء من قسم المشاريع في رحلة Flutter على Coddy. الدرس 1 من 36.

يتكوّن هذا القسم من أربعة تطبيقات، تُبنى ميزةً تلو الأخرى. أنت تعرف كل جزء منها بالفعل؛ والآن ستجمعها معًا بالطريقة التي تُنشأ بها التطبيقات الحقيقية.

التطبيق الأول هو قائمة مهام. بحلول نهاية هذا الفصل، ستتمكن من إضافة المهام، ووضع علامة على إنجازها، وإزاحتها بعيدًا، والتراجع عن حذفها، وتصفية ما تراه.

يبدأ كل تطبيق ببياناته. المهمة عبارة عن عنوان في الوقت الحالي، لذا يحتفظ بها صنف صغير، وتحتفظ الشاشة بقائمة من المهام في State:

class Task {
  Task(this.title);

  final String title;
}

final List<Task> _tasks = [Task('Buy milk')];

يحوّل ListView.builder تلك القائمة إلى صفوف على الشاشة. يستدعي itemBuilder مرةً واحدة لكل فهرس حتى itemCount، ويُعيد كل استدعاء ListTile واحدًا.

التحدي

سهل

اعرض المهام:

اكتب فئة Task تحتوي على final String title ومُنشئ Task(this.title)
في _TodoScreenState، أنشئ قائمة _tasks تضم ثلاث مهام: Buy milk وWalk the dog وRead a book
استبدل Center في body: بـ ListView.builder يعرض عنوان كل مهمة داخل ListTile

جرّب بنفسك

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

// اكتب صنف Task هنا.

class TodoScreen extends StatefulWidget {
  const TodoScreen({super.key});

  @override
  State<TodoScreen> createState() => _TodoScreenState();
}

class _TodoScreenState extends State<TodoScreen> {
  // أنشئ قائمة المهام هنا.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('My Tasks')),
      body: const Center(
        child: Text('Your tasks go here'),
      ),
    );
  }
}