Lista de tarefas: Marque como concluída
Parte da seção Projetos do Journey de Flutter da Coddy. Lição 3 de 36.
Uma tarefa precisa lembrar se está concluída. Dê à classe um segundo campo que comece como false e possa mudar, para que não seja final:
class Task {
Task(this.title);
final String title;
bool done = false;
}Cada linha recebe um Checkbox como widget leading:. Seu value é o done da tarefa, e seu onChanged define done dentro de setState.
Uma tarefa concluída deve parecer concluída. TextDecoration.lineThrough risca o texto, e uma cor cinza faz com que ele fique em segundo plano. Quando a tarefa não está concluída, o estilo é null e o texto mantém a aparência do tema:
style: task.done
? const TextStyle(decoration: TextDecoration.lineThrough, color: Colors.grey)
: null,Desafio
MédioMarque as tarefas como concluídas:
- adicione
bool done = false;aTask - adicione a cada
ListTileumleading:Checkboxque exiba e altere odoneda tarefa - quando uma tarefa estiver concluída, risque o título e defina a cor como
Colors.grey
Experimente você mesmo
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),
);
},
),
),
],
),
);
}
}
Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.
Todas as lições de Projetos
1Projeto: Lista de tarefas
Lista de tarefas: A lista de tarefasLista de tarefas: Adicione uma tarefa4Projeto: Rastreador de Hábitos
Rastreador de Hábitos: Seus hábitosRastreador de Hábitos: A semanaPratique por conta própria: Compilador de Flutter online