Display attribute of List item in a ListView in Flutter

Question

I am creating a small Flutter program to get to know it but cannot display the 'description' attribute of a 'Task' object (which exists in a List) using a ListView Builder. I have tried it with ordinary text and it displays it how I want it which leads me to believe the layout is correct; it is just the accessing of 'Task.description' that I cannot do as it returns 'Instance member 'description' can't be accessed using static access.' Just to clarify, the List containing the Tasks and the ListView Builder are in different files, although I don't see why that would be a problem.

Here is the List containing an example of the Task object (there are 3 more):

final List<Task> taskList = [
  Task(
    title: 'Clean Spillage On Aisle 4',
    description:
        'Clear up using mop & cleaning solution found in store cupboard B',
    creator: 'John Smith',
    status: CompletionStatus.notStarted,
    completeBy: "08:30 am",
  ),
];

Here is the main ListView Builder method:

import 'package:task_management/data/tasks.dart';

class TaskCard extends StatelessWidget {
  static String desc = Task.description;
  final Task task;
  const TaskCard(this.task, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          padding: const EdgeInsets.fromLTRB(8, 8, 8, 8),
          height: 290,
          width: double.maxFinite,
          child: Card(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(15.0),
            ),
            shadowColor: Colors.black,
            elevation: 15,
            child: ClipPath(
              clipper: ShapeBorderClipper(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(30),
                ),
              ),
//Start of relevant code block
              child: ListView.builder(
                itemCount: taskList.length,
                itemBuilder: ((context, index) {
                  return ListTile(
                    leading: CircleAvatar(
                      child: Text(Task.description),
                    ),
                    title: Text(Task.description),
                  );
                }),
              ),
//End of relevant code block
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

I believe I understood what you're trying to convey. You want to extract the individual value of an object stored in a list and display it in your list view builder. I wrote a minimal code for you. Just copy it & paste it in the main.dart file and try & test it. Acknowledge me & feel free to ask anything in the comment section.

Source code:

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(
      title: "Flutter Demo",
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<Task> taskList = <Task>[
    Task(title: "It's title 01", subtitle: "It's subtitle 01"),
    Task(title: "It's title 02", subtitle: "It's subtitle 02"),
    Task(title: "It's title 03", subtitle: "It's subtitle 03"),
    Task(title: "It's title 04", subtitle: "It's subtitle 04"),
    Task(title: "It's title 05", subtitle: "It's subtitle 05"),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView.builder(
          itemCount: taskList.length,
          itemBuilder: (BuildContext context, int index) {
            // Important 👇🏻
            final Task task = taskList[index];
            // Important 👆🏻
            return ListTile(
              title: Text("Title: ${task.title}"),
              subtitle: Text("Subtitle: ${task.subtitle}"),
            );
          },
        ),
      ),
    );
  }
}

class Task {
  Task({required this.title, required this.subtitle});

  final String title;
  final String subtitle;
}