قائمة المهام: إضافة مهمة

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

قائمة مهام لا يمكنك إضافة عناصر إليها ليست سوى ملصق. ضع حقلاً وزر إضافة دائريًا فوق القائمة، داخل Row.

يُربط الحقل بـ TextEditingController، حتى يتمكن زر الإضافة من قراءة ما كُتب. تتم الإضافة على خطوتين: أضف Task جديدة إلى القائمة داخل setState، لكي يُعاد رسم القائمة، ثم امسح الحقل استعدادًا للمهمة التالية:

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

أصبحت القائمة الآن تشارك الشاشة مع الحقل. يحتاج ListView داخل Column إلى إحاطته بـ Expanded، لكي يشغل المساحة المتبقية بدلًا من طلب المساحة كلها.

يمثل IconButton.filled زر IconButton على دائرة ممتلئة بلون السمة، وهو الشكل الذي يبدو عليه الإجراء الرئيسي في Material 3.

التحدي

متوسط

أضف المهام من حقل:

أضف إلى الحالة TextEditingController باسم _controller (وتخلّص منه)
اجعل body عبارة عن Column: أولًا Row مع حشوة بمقدار 16 بكسل، ويحتوي على TextField ضمن Expanded وعنوانه New task، وعلى IconButton.filled مع Icons.add، ثم القائمة ضمن Expanded
يؤدي النقر على الزر إلى إضافة المهمة المكتوبة في نهاية القائمة وإفراغ الحقل

جرّب بنفسك

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')];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('My Tasks')),
      body: ListView.builder(
        itemCount: _tasks.length,
        itemBuilder: (context, index) {
          final task = _tasks[index];
          return ListTile(
            title: Text(task.title),
          );
        },
      ),
    );
  }
}