Render each individual list item in the data model, and render to a chip widget

Viewed 22

I have a data model in my app that looks like this:

final DUMMY_THERAPISTS = [
  Therapist(
    id: 't1',
    name: 'John Doe',
    imageUrl:
        'https://thumbs.dreamstime.com/b/avatar-del-terapeuta-icono-web-doctor-103706622.jpg',
    specialties: [
      'Acupuncture',
      'Homeopathic',
      'Floral Therapy',
    ],
  ),
]

I can access all the values from the class, except the array ones. It was defined as a List in the class model.

And this is the Widget where I am displaying the data:

class TherapistsOverviewScreen extends StatelessWidget {
  final List<Therapist> loadedTherapists = DUMMY_THERAPISTS;

  @override
  Widget build(BuildContext context) {
     return Scaffold(
      appBar: AppBar(
        title: Text('Therapists'),
      ),
      body: GridView.builder(
        itemCount: loadedTherapists.length,
        itemBuilder: (ctx, i) => Card(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Wrap(
              children: [
                CircleAvatar(
                  radius: 25.0,
                  backgroundImage: NetworkImage(loadedTherapists[i].imageUrl),
                ),
                Text(loadedTherapists[i].name),
                Chip(
                  label: Text(loadedTherapists[i].specialties.toString()),
                ),
              ],
            ),
          ),
        ),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
      ),
    );
  }
}

The way it is, it returns the entire collection inside the array, since it's iterating only through the list of the class, but not to the second-level, thus returning in the app a chip widget with the following content: '[Acupuncture, Homeopathy, Floral Therapy]', and not their own individual values.

I tried using the for loop from Dart, I managed to get each individual value, but I couldn't find a way to bind to the respective object group.

Thanks in advance.

1 Answers

Replace Chip(label: Text(loadedTherapists[i].specialties.toString()),),

with for (var specialty in loadedTherapists[i].specialties) Chip(label: Text(specialty.toString()))

You need to iterate through each value to build individual chip widgets.

Related