I have a widget that takes a long time to build and can't figure out how to show a loading spinner while it loads

Update 3: ok finally figured out that even if I get everything to build into a list of widgets async, when I go to display the widgets it hangs up. You’d think that listview would work since it should only load the items in view, but even that hangs and is slow to scroll.

Update 2: I deleted lines until I found that the single line that causes the delay (i.e. isn't run asyncronously no matter what I try) is this: criteriaRow.add(Row(...)). I've scoured the internet but it doesn't seem that adding things to a list can be done asyncronously. I must be doing something wrong...

I know how to run async functions and I can see how to use a FutureBuilder, but those are for when the data gathering itself is slow. In this case, I can build the lists and data I need very quickly. But, when I go to create the actual final widget, it takes around 4-5 seconds and hangs up the main thread. How can I build a widget asynchronously?

The clear problem is the for loops I have in the widget (see below). When I delete them, it loads quickly.

Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Flexible(
            child: SingleChildScrollView(
              child: Card(
                  child: Container(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        
                        for(var i in displayRequired1) i,
                        for(var i in displayRequired2) i,

                      ],
                    ),
                  )
              ),
            )
        ),

      ],
    );

UPDATE: more complete code (the complete code is way too long to add).

Function that initiates list generation:

Future<String> solveCase() async {

  display = displayType.summary;

  // Parse studies early so data is available
  List<ParseTest> ncsResult = [];
  
  // Build required NCS
  displayRequiredNCS.add(
    Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          padding: EdgeInsets.all(5),
          width: 200,
          child: Text(
            'Nerve Studies',
            style: TextStyle(
                fontSize: largeFontSize,
                color: colorTextDefault,
                fontWeight: FontWeight.normal
            ),
          ),
        ),
        Expanded(
          child: Container(
            padding: EdgeInsets.all(5),
            child: Text(
              '',
              style: TextStyle(
                  fontSize: largeFontSize,
                  color: colorTextDefault,
                  fontWeight: FontWeight.normal
              ),
            ),
          ),
        ),
      ],
    ),
  );
  print('NCS length: ${ncsResult.length}');
  ncsResult.forEach((r) {
    List<Widget> criteriaRow = [];
    if(r.prettyCriteria[0] == '-' || r.prettyCriteria[0] == '+'){
      r.prettyCriteria.split('\n').forEach((e) {
        criteriaRow.add(Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Expanded(
              child: Container(
                padding: EdgeInsets.all(5),
                child: Text(
                  '${e.substring(1)}',
                  style: TextStyle(
                      fontSize: mediumFontSize,
                      color: colorTextDefault,
                      fontWeight: FontWeight.normal
                  ),
                ),
              ),
            ),
            Container(
              padding: EdgeInsets.all(5),
              alignment: Alignment.center,
              width: 200,
              child: e[0] == '+' ? Icon(Icons.check_circle, color: Colors.green) : Icon(Icons.cancel, color: Colors.red),
            ),

          ],
        ),);
      });
    } 

    displayRequiredNCS.add(
      Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            padding: EdgeInsets.all(5),
            width: 200,
            child: Text(
              '    ${r.diagnosis}',
              style: TextStyle(
                  fontSize: mediumFontSize,
                  color: colorTextDefault,
                  fontWeight: FontWeight.normal
              ),
            ),
          ),
          Expanded(
            child: Container(
              padding: EdgeInsets.all(5),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: criteriaRow,
              ),
            ),
          ),
        ],
      ),
    );

  });

  

  print('final');
  return 'test';

}

You can combine the both lists displayRequired1 and displayRequired2, then use ListView.builder, ListView builds when required.

  final combinedDisplayRequired = [...displayRequired1, ...displayRequired2];
  Column(
    mainAxisSize: MainAxisSize.min,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Flexible(
        child: ListView.builder(
          itemCount: combinedDisplayRequired.length,
          itemBuilder: (context, index) => combinedDisplayRequired[index],
        ),
      ),
    ],
  );