Flutter element not appearing when in for loop-CodePudding

I'm trying to make an UI-element for every element in a list of recordings, but nothing is appearing. I've made a class which asks for the Name, Date and Description, which i'm providing for each element in the list.

The one I'm making outside of the for loop, to test if it will draw anything, is showing up as intended. I also know that the list does contain the elements it needs.

The elements in the list is loaded from an Amplify DataStore instance, and is printing correctly to the Debug console.

Here's the code:

class BuildRecordingsList extends StatefulWidget {
  const BuildRecordingsList({Key? key}) : super(key: key);

  @override
  _BuildRecordingsListState createState() => _BuildRecordingsListState();
}

class _BuildRecordingsListState extends State<BuildRecordingsList> {
  List<Recording> recordings = DataStoreAppProvider().recordings;

  @override
  Widget build(BuildContext context) {
    DataStoreAppProvider().getRecordings();
    return Container(
      child: Column(
        children: [
          RecordingElement(
              recordingName: 'recordingName',
              recordingDate: TemporalDate.now(),
              recordingDescription: 'recordingDescription'),
          for (var rec in recordings)
            RecordingElement(
              recordingName: '${rec.name}',
              recordingDate: rec.date,
              recordingDescription: '${rec.description}',
            ),
        ],
      ),
    );
  }
}

I'm still very new to Flutter and Dart, so please do tell me if you'll need more info :)

CodePudding user response：

Your for doesn't return anything and there is not the proper place to return things from for.

You shall checkout the Iterable methods: forEach, map, etc...

In this case you have to use the map method, which takes an array and returns another after processing every element.

[1, 2, 3].map((index) => index.toString()) // ["1", "2", "3"]

In this case, you have to take every element and return a Widget that uses your value.

...recordings.map((rec) {
  return RecordingElement(
    recordingName: '${rec.name}',
    recordingDate: rec.date,
    recordingDescription: '${rec.description}',
  );
})

As your Column children accept a List as value, you have to destructure your elements.

DESTRUCTURING:

List firstList = [1, 2];

List secondList = [0, ...firstList]; // [0, 1, 2]

THE ENTIRE CODE:

class BuildRecordingsList extends StatefulWidget {
  const BuildRecordingsList({Key? key}) : super(key: key);

  @override
  _BuildRecordingsListState createState() => _BuildRecordingsListState();
}

class _BuildRecordingsListState extends State<BuildRecordingsList> {
  List<Recording> recordings = DataStoreAppProvider().recordings;

  @override
  Widget build(BuildContext context) {
    DataStoreAppProvider().getRecordings();
    return Container(
      child: Column(
        children: [
          RecordingElement(
              recordingName: 'recordingName',
              recordingDate: TemporalDate.now(),
              recordingDescription: 'recordingDescription'),
          ...recordings.map((rec) {
            return RecordingElement(
            recordingName: '${rec.name}',
            recordingDate: rec.date,
            recordingDescription: '${rec.description}',
            );
          })
        ],
      ),
    );
  }
}