Reorganize the widgets – Flutter

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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);
      },
    );
  }
}

>Solution :

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…