title: Flutter ListTile conditional and temporal widget rendering
body: <p>I have searched around for a while now but can’t seem to find a solution to show a widget (in my case a <code>CircularProgressIndicator</code>) temporarily, in the trailing of a <code>ListTile</code>.</p>
  <p>I have this “page”:</p>
  <pre class="lang-dart prettyprint-override"><code>import 'dart:convert';
  import 'dart:io';
  
  import 'package:excelerate/model/user_model.dart';
  import 'package:flutter/cupertino.dart';
  import 'package:flutter/material.dart';
  import 'package:http/http.dart' as http;
  
  import '../../app_config.dart';
  import '../../model/skill_model.dart';
  import '../../providers/app_colors.dart';
  import '../../providers/skill_order.dart';
  import '../../providers/user_secure_storage.dart';
  import '../../providers/utils.dart';
  import '../../widgets/excelerate_bottom_bar.dart';
  
  class EditStudentSkills extends StatefulWidget {
    final UserModel student;
  
    const EditStudentSkills({Key? key, required this.student})
        : super(key: key);
  
    @override
    State&lt;EditStudentSkills&gt; createState() =&gt;
        _EditStudentSkillsState();
  }
  
  class _EditStudentSkillsState extends State&lt;EditStudentSkills&gt; {
    late Future&lt;List&lt;SkillModel&gt;&gt; skills;
  
    @override
    void initState() {
      super.initState();
      skills = fetchSkills();
    }
  
    @override
    EditStudentSkills get widget =&gt; super.widget;
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          centerTitle: true,
          backgroundColor: ColorConsts.excelerateBlue,
          title: Text(
            'Rijvaardigheden ${widget.student.firstName}',
            textAlign: TextAlign.start,
          ),
        ),
        body: SafeArea(
          child: FutureBuilder&lt;List&lt;SkillModel&gt;&gt;(
            future: skills,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                List&lt;SkillModel&gt; skillList =
                    snapshot.data as List&lt;SkillModel&gt;;
                return ListView.separated(
                  itemCount: skillList.length,
                  scrollDirection: Axis.vertical,
                  itemBuilder: (BuildContext context, int index) {
                    var skill = skillList[index];
                    return ListTile(
                      contentPadding: const EdgeInsets.only(left: 20, right: 20),
                      leading: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text('${skill.number}.', textAlign: TextAlign.center),
                        ],
                      ),
                      title: Text(skill.name),
                      trailing: CupertinoSwitch(
                        value: skill.completed,
                        onChanged: (value) async {
                          setState(() {
                            skill.completed = value;
                          });
  
                          updateSkill(skill.number, value);
  
                          setState(() {});
                        },
                      ),
                    );
                  },
                  separatorBuilder: (BuildContext context, int index) {
                    return const Divider();
                  },
                );
              } else if (snapshot.hasError) {
                return Text(snapshot.error.toString());
              }
              // By default, show a loading spinner.
              return const Center(child: CircularProgressIndicator());
            },
          ),
        ),
        bottomNavigationBar: ExcelerateBottomBar(
          currentIndex: 1,
          onTap: navigate,
        ),
      );
    }
  
    void navigate(int index) {
      Navigator.of(context).pushReplacement(MaterialPageRoute(
          builder: (context) =&gt; Utils.getInstructorScreen(index)));
    }
  
    Future&lt;List&lt;SkillModel&gt;&gt; fetchSkills() async {
      var bearer = await UserSecureStorage.getBearerToken();
      var headers = {
        'Accept': 'application/json',
        HttpHeaders.authorizationHeader: bearer.toString()
      };
  
      var infoUrl = Uri.parse(
          &quot;${AppConfig.of(context).apiURL}/api/skill/all-with-status/${widget.student.uid}&quot;);
      var response = await http.get(infoUrl, headers: headers);
  
      var skillMap = await json.decode(response.body);
      var skillList = &lt;SkillModel&gt;[];
  
      for (int i = 0; i &lt; skillMap.keys.length; i++) {
        var skillName = SkillOrder.order[i];
        skillList.add(SkillModel.fromMap(skillMap[skillName]));
      }
  
      return skillList;
    }
  
    void updateSkill(String skillNumber, bool value) async {
      var updateUrl = Uri.parse(
          &quot;${AppConfig.of(context).apiURL}/api/driving-skill/update/${widget.student.uid}&quot;);
  
      var headers = {
        'Content-type': 'application/json',
        'Accept': 'application/json',
      };
  
      var requestBody =
          json.encode({&quot;skillNumber&quot;: skillNumber, &quot;value&quot;: value});
  
      await http.patch(updateUrl,
          headers: headers,
          body: requestBody,
          encoding: Encoding.getByName(&quot;utf8&quot;));
    }
  }
  </code></pre>
  <p>UserModel and SkillModel are 2 DTO’s. SkillOrder is a simple enum that has the order of skills so that it doesn’t matter in which order it’s coming in.</p>
  <p>When a switch its value changes, an api call will be made to update that item its value in the backend. In the meantime (between when the switch’ value is changed and when the app has received an HttpStatus 200 from the server), I want to show a <code>CircularProgressIndicator</code> next to the switch.</p>
  <p>I want to go from:</p>
  <p><a href="https://i.stack.imgur.com/BRb7m.png" rel="nofollow noreferrer">Normal state, just a switch with a value</a></p>
  <p>To:</p>
  <p><a href="https://i.stack.imgur.com/W0Kcf.png" rel="nofollow noreferrer">CircularProgressIndicator next to switch that just changed value (hardcoded in picture)</a></p>