So I am trying to add a description under the (task.title) but with the current code I wrote I am not sure how I can refactor it or even improve it to be able to do that. I would also like to have some sort of widget that can do some space between each task tile so that it's not too crowded. Any Help is appreciated. Thank you.
task_tile.dart
class TaskTile extends StatelessWidget {
const TaskTile({
Key? key,
required this.task,
}) : super(key: key);
final Task task;
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Row(
children: [
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(width: 10),
Text(
task.title,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: const Color(0xFF89ABE3),
fontFamily: 'Source Sans Pro',
fontSize: 19,
decoration:
task.isDone! ? TextDecoration.lineThrough : null,
),
),
const SizedBox(width: 10),
],
),
),
],
),
),
Row(
children: [
PopupMenu(
favouriteCallback: () => context.read<TasksBloc>().add(
MakeFavouriteTask(task: task),
),
task: task,
),
Transform.scale(
scale: 1.2,
child: Checkbox(
shape: const CircleBorder(
side: BorderSide(
width: 20,
),
),
side: const BorderSide(
color: Color(0xFF89ABE3),
),
activeColor: Colors.greenAccent,
value: task.isDone,
onChanged: task.isDeleted == false
? (value) {
context.read<TasksBloc>().add(UpdateTask(task: task));
}
: null,
),
),
],
),
],
);
}
}
task_list.dart
class TasksList extends StatelessWidget {
const TasksList({
Key? key,
required this.tasksList,
}) : super(key: key);
final List tasksList;
@override
Widget build(BuildContext context) {
return ListView.builder(
padding: const EdgeInsets.only(top: 10),
itemCount: tasksList.length,
itemBuilder: (context, index) {
var task = tasksList[index];
return TaskTile(task: task);
},
);
}
}
CodePudding user response:
I understand now, I've edited your previous code to incorporate the changes that you needed, try this :
class TaskTile extends StatelessWidget {
const TaskTile({
Key? key,
required this.task,
}) : super(key: key);
final Task task;
@override
Widget build(BuildContext context) {
return Column(// wrap the whole widget in a Column
children: [
const SizedBox(width: 4), //add a sizedbox for spacing
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Row(
children: [
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(width: 10),
Column( //one column is needed here
children: [
Text(
task.title,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: const Color(0xFF89ABE3),
fontFamily: 'Source Sans Pro',
fontSize: 19,
decoration: task.isDone!
? TextDecoration.lineThrough
: null,
),
), // you can also add a SizedBox here to keep spacing if they're too close
Text( // and this is your desciption part
task.description,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: const Color(0xFF89ABE3),
),
),
],
),
const SizedBox(width: 10),
],
),
),
],
),
),
Row(
children: [
PopupMenu(
favouriteCallback: () => context.read<TasksBloc>().add(
MakeFavouriteTask(task: task),
),
task: task,
),
Transform.scale(
scale: 1.2,
child: Checkbox(
shape: const CircleBorder(
side: BorderSide(
width: 20,
),
),
side: const BorderSide(
color: Color(0xFF89ABE3),
),
activeColor: Colors.greenAccent,
value: task.isDone,
onChanged: task.isDeleted == false
? (value) {
context.read<TasksBloc>().add(UpdateTask(task: task));
}
: null,
),
),
],
),
],
),
const SizedBox(width: 4),//add a sizedbox for spacing
Divider(thickness: 2,),// the divider you want to keep the tiles apart
],
);
}
}
Hope this answers all your questions...