175 lines
6.5 KiB
Dart
175 lines
6.5 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:provider/provider.dart';
|
|
import '../models/todo_item.dart';
|
|
import '../models/family_member.dart';
|
|
import '../services/todo_service.dart';
|
|
import '../services/family_service.dart';
|
|
|
|
class TodoListWidget extends StatelessWidget {
|
|
const TodoListWidget({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Container(
|
|
decoration: BoxDecoration(
|
|
color: Theme.of(context).cardTheme.color,
|
|
borderRadius: BorderRadius.circular(16),
|
|
),
|
|
padding: const EdgeInsets.all(16),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Text(
|
|
"Today's Todos",
|
|
style: Theme.of(context).textTheme.titleLarge?.copyWith(
|
|
color: Colors.white,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
Icon(
|
|
Icons.check_circle_outline,
|
|
color: Theme.of(context).colorScheme.secondary,
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 12),
|
|
Expanded(
|
|
child: FutureBuilder<List<dynamic>>(
|
|
future: Future.wait([
|
|
Provider.of<TodoService>(
|
|
context,
|
|
listen: false,
|
|
).fetchTodayTodos(),
|
|
Provider.of<FamilyService>(
|
|
context,
|
|
listen: false,
|
|
).fetchFamilyMembers(),
|
|
]),
|
|
builder: (context, snapshot) {
|
|
if (snapshot.connectionState == ConnectionState.waiting) {
|
|
return const Center(child: CircularProgressIndicator());
|
|
}
|
|
|
|
if (snapshot.hasError) {
|
|
return const Center(
|
|
child: Text(
|
|
'Failed to load todos',
|
|
style: TextStyle(color: Colors.white54),
|
|
),
|
|
);
|
|
}
|
|
|
|
if (!snapshot.hasData) {
|
|
return const Center(
|
|
child: Text(
|
|
'No todos today',
|
|
style: TextStyle(color: Colors.white54),
|
|
),
|
|
);
|
|
}
|
|
|
|
final todos = snapshot.data![0] as List<TodoItem>;
|
|
final members = snapshot.data![1] as List<FamilyMember>;
|
|
|
|
if (todos.isEmpty) {
|
|
return const Center(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Icon(Icons.thumb_up, color: Colors.white24, size: 32),
|
|
SizedBox(height: 8),
|
|
Text(
|
|
'All done for today!',
|
|
style: TextStyle(color: Colors.white54),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
return ListView.separated(
|
|
itemCount: todos.length,
|
|
separatorBuilder: (context, index) =>
|
|
const Divider(color: Colors.white10),
|
|
itemBuilder: (context, index) {
|
|
final todo = todos[index];
|
|
final member = members.firstWhere(
|
|
(m) => m.id == todo.familyMemberId,
|
|
orElse: () => const FamilyMember(
|
|
id: '',
|
|
name: 'Unknown',
|
|
emoji: '👤',
|
|
color: '#888888',
|
|
order: 0,
|
|
),
|
|
);
|
|
|
|
// Parse color
|
|
Color memberColor;
|
|
try {
|
|
memberColor = Color(
|
|
int.parse(member.color.replaceAll('#', '0xFF')),
|
|
);
|
|
} catch (_) {
|
|
memberColor = Colors.grey;
|
|
}
|
|
|
|
return ListTile(
|
|
contentPadding: EdgeInsets.zero,
|
|
leading: CircleAvatar(
|
|
backgroundColor: memberColor.withOpacity(0.2),
|
|
child: Text(
|
|
member.emoji,
|
|
style: const TextStyle(fontSize: 20),
|
|
),
|
|
),
|
|
title: Text(
|
|
todo.title,
|
|
style: TextStyle(
|
|
color: todo.completed ? Colors.white54 : Colors.white,
|
|
decoration: todo.completed
|
|
? TextDecoration.lineThrough
|
|
: null,
|
|
decorationColor: Colors.white54,
|
|
),
|
|
),
|
|
trailing: Checkbox(
|
|
value: todo.completed,
|
|
onChanged: (val) async {
|
|
// Toggle completion
|
|
final updated = TodoItem(
|
|
id: todo.id,
|
|
familyMemberId: todo.familyMemberId,
|
|
title: todo.title,
|
|
completed: val ?? false,
|
|
dueDate: todo.dueDate,
|
|
);
|
|
await Provider.of<TodoService>(
|
|
context,
|
|
listen: false,
|
|
).updateTodo(updated);
|
|
// Force rebuild? In a real app we'd use a reactive state.
|
|
// Here we rely on the parent or timer to refresh, or we could convert this to StatefulWidget.
|
|
// For now, let's just let the next refresh cycle pick it up, or if the user interacts, maybe we should optimistic update?
|
|
// Given it's a TV dashboard, interaction might be rare, but if it is interactive:
|
|
(context as Element)
|
|
.markNeedsBuild(); // HACK to refresh
|
|
},
|
|
activeColor: Theme.of(context).colorScheme.secondary,
|
|
checkColor: Colors.black,
|
|
),
|
|
);
|
|
},
|
|
);
|
|
},
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|