mirror of
https://github.com/aljazceru/Auto-GPT.git
synced 2026-01-04 06:44:31 +01:00
3a0db45b3b
This commit introduces the TaskListTile, a custom widget designed to display individual tasks in the TaskView. The tile offers a user-friendly interface with interactive features, such as selection and deletion. Key Features: - Responsive design that adapts its width based on the TaskView's constraints. - Interactive tile that changes its background color upon selection. - A delete icon that appears only when the tile is selected. - Comprehensive widget tests to ensure the TaskListTile behaves as expected. By splitting this into its own widget, the codebase remains modular, making it easier to maintain and update in the future.
82 lines
2.5 KiB
Dart
82 lines
2.5 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:auto_gpt_flutter_client/models/task.dart';
|
|
|
|
class TaskListTile extends StatefulWidget {
|
|
final Task task;
|
|
final VoidCallback onTap;
|
|
final VoidCallback onDelete;
|
|
|
|
const TaskListTile({
|
|
Key? key,
|
|
required this.task,
|
|
required this.onTap,
|
|
required this.onDelete,
|
|
}) : super(key: key);
|
|
|
|
@override
|
|
_TaskListTileState createState() => _TaskListTileState();
|
|
}
|
|
|
|
class _TaskListTileState extends State<TaskListTile> {
|
|
bool _isSelected = false;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
// Determine the width of the TaskView
|
|
double taskViewWidth = MediaQuery.of(context).size.width;
|
|
double tileWidth = taskViewWidth - 20;
|
|
if (tileWidth > 260) {
|
|
tileWidth = 260;
|
|
}
|
|
|
|
return GestureDetector(
|
|
onTap: () {
|
|
setState(() {
|
|
_isSelected = !_isSelected;
|
|
});
|
|
widget.onTap();
|
|
},
|
|
child: Material(
|
|
// Use a transparent color to avoid any unnecessary color overlay
|
|
color: Colors.transparent,
|
|
child: Padding(
|
|
// Provide a horizontal padding to ensure the tile does not touch the edges
|
|
padding: const EdgeInsets.symmetric(horizontal: 10.0),
|
|
child: Container(
|
|
// Width and height specifications for the tile
|
|
width: tileWidth,
|
|
height: 50,
|
|
decoration: BoxDecoration(
|
|
// Use conditional operator to determine background color based on selection
|
|
color: _isSelected ? Colors.grey[300] : Colors.white,
|
|
borderRadius: BorderRadius.circular(8.0),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
// Space from the left edge of the tile
|
|
const SizedBox(width: 8),
|
|
// Message bubble icon indicating a task
|
|
const Icon(Icons.messenger_outline, color: Colors.black),
|
|
const SizedBox(width: 8),
|
|
// Task title
|
|
Expanded(
|
|
child: Text(
|
|
widget.task.title,
|
|
style: const TextStyle(color: Colors.black),
|
|
),
|
|
),
|
|
// If the task is selected, show a delete icon
|
|
if (_isSelected)
|
|
IconButton(
|
|
icon: const Icon(Icons.close, color: Colors.black),
|
|
onPressed: widget.onDelete,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|