Menu
CoddyTech

רשימת משימות: בלי משימות ריקות

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

הקש/י על הוספה בלי להקליד כלום, ותתווסף לרשימה שורה ריקה. אם תקליד/י רק רווחים, תתווסף שורה שנראית ריקה גם היא. אפליקציות אמיתיות דוחות את שני המקרים ומסבירות למה.

trim() מחזירה את הטקסט בלי רווחים בתחילתו ובסופו. אם לא נשאר כלום, אין משימה: יש להציג SnackBar ולבצע return לפני שמוסיפים משהו.

final title = _controller.text.trim();
if (title.isEmpty) {
  ScaffoldMessenger.of(context).showSnackBar(
    const SnackBar(content: Text('Type a task first')),
  );
  return;
}

יש להשתמש גם ב-title עבור המשימה החדשה, כך ש-" Call mom " יישמר בתור "Call mom".

return מוקדם כזה נקרא guard. הוא משאיר את המקרה הלא תקין בהתחלה, וכך שאר הפונקציה מטפלת רק בקלט תקין.

challenge icon

אתגר

בינוני

דחה משימות ריקות בתוך _addTask:

  • קרא את השדה באמצעות trim()
  • אם לא נשאר דבר, הצג SnackBar עם ההודעה Type a task first ואל תוסיף דבר
  • אחרת, הוסף את הכותרת לאחר הסרת הרווחים

נסו בעצמכם

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;
  bool done = false;
}

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

  int get _left => _tasks.where((task) => !task.done).length;

  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),
                ),
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
            child: Row(
              children: [
                Text(
                  _left == 1 ? '1 task left' : '$_left tasks left',
                  style: Theme.of(context).textTheme.titleSmall,
                ),
              ],
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: _tasks.length,
              itemBuilder: (context, index) {
                final task = _tasks[index];
                return ListTile(
                  leading: Checkbox(
                    value: task.done,
                    onChanged: (value) {
                      setState(() {
                        task.done = value!;
                      });
                    },
                  ),
                  title: Text(
                    task.title,
                    style: task.done
                        ? const TextStyle(
                            decoration: TextDecoration.lineThrough,
                            color: Colors.grey,
                          )
                        : null,
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
quiz iconבחנו את עצמכם

השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.

כל השיעורים ביחידה פרויקטים

תרגלו בעצמכם: קומפיילר Flutter אונליין