רשימת משימות: הוספת מטלה

חלק מהיחידה פרויקטים במסלול ה-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),
          );
        },
      ),
    );
  }
}