Список дел: отметить выполнение
Часть раздела Проекты путешествия по Flutter на Coddy. Урок 3 из 36.
Задача должна помнить, выполнена ли она. Добавь классу второе поле, которое изначально равно false и может изменяться, поэтому оно не должно быть final:
class Task {
Task(this.title);
final String title;
bool done = false;
}Для каждой строки в качестве виджета leading: добавь Checkbox. Его 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свойствоleading:сCheckbox, который показывает и изменяет значение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),
);
},
),
),
],
),
);
}
}
В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Проекты
1Проект: список дел
Список дел: список задачСписок дел: добавление задачи4Проект: Трекер привычек
Трекер привычек: Ваши привычкиТрекер привычек: НеделяПотренируйтесь самостоятельно: Онлайн-компилятор Flutter