title: How to show a Progress Indicator before my listview.builder has finished building the listview
body: <p>I have a huge <code>ListView</code> with a lots of data, so it takes a few of seconds before loading it, is there a way to show a <code>CircularProgressIndicator</code> or <code>LinearProgressIndicator</code>? is there a way to understand the state of the <code>ListView.builder</code>?</p>
  <p>Below there is the code with what I've tried to do:</p>
  <pre><code>class _PlantsPageState extends State&lt;PlantsPage&gt; {
    TextEditingController controller = TextEditingController();
    List&lt;dynamic&gt; _searchResult = [];
    List&lt;dynamic&gt; _plantDetails = [];
    bool _isLoading = false;
  
    Future getPlantDetails() async {
      final response = await Plants().getPlants();
  
      setState(() {
        for (dynamic plant in response.data) {
          //print(plant['Name']);
          _plantDetails.add(plant);
        }
      });
    }
  
    @override
    void initState() {
      super.initState();
  
      getPlantDetails();
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('plants'),
          elevation: 0.0,
        ),
        body: _isLoading
            ? Center(
                child: CircularProgressIndicator(),
              )
            : Column(
                children: &lt;Widget&gt;[
          
                  Expanded(
                      child:
                          _searchResult.length != 0 || controller.text.isNotEmpty
                              ? _plantsListView(_searchResult)
                              : _plantsListView(_plantDetails)
                              ),
                ],
              ),
  
    ListView _plantsListView(_plant) {
      _isLoading=true;
      return ListView.builder(
          itemCount: _plant.length,
          itemBuilder: (context, index) {
            return Container(
                padding: const EdgeInsets.symmetric(horizontal: 20),
                child: Row(children: [
                  SingleChildScrollView(
                    child: Column(
                      children: &lt;Widget&gt;[
                        InkWell(
                          child: Row(
                            children: [
                              SizedBox(width: 100),
                              Container(
                                  width: 250,
                                  child: Column(
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    children: [
                                      Text(
                                        _plant[index]['Name'],
                                        style: TextStyle(
                                            fontSize: 20.0,
                                            fontWeight: FontWeight.bold),
                                        textAlign: TextAlign.left,
                                      ),
                                      Text(
                                          getCompanies(_plant[index]).toString()),
                                      Text(getClients(_plant[index]).toString()),
                                    ],
                                  )),
                              SizedBox(width: 100),
                              Container(
                                width: 150,
                                child: Row(
                                  children: isOnline(_plant[index]) +
                                      getTopics(_plant[index]) +
                                      hasAlarm(_plant[index]),
                                ),
                              ),
                              SizedBox(width: 100),
                              Container(
                                  width: 150,
                                  child: Visibility(
                                      visible: isVisible(_plant[index]),
                                      child: Column(
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        children: [
                                          Text('Total'),
                                          SizedBox(height: 5),
                                          Row(
                                            crossAxisAlignment:
                                                CrossAxisAlignment.end,
                                            children: [
                                              Text(
                                                calculateProd(_plant[index])
                                                    .toString()
                                                    .replaceAll('.', ','),
                                                style: TextStyle(
                                                    fontSize: 20,
                                                    fontWeight: FontWeight.bold),
                                              ),
                                              Text(' ' + getUnit(_plant[index]))
                                            ],
                                          )
                                        ],
                                      ))),
                            ],
                          ),
                          onTap: () =&gt; {},
                        ),
                        Divider(
                          color: Colors.blue,
                          thickness: 5,
                        )
                      ],
                    ),
                  ),
                ]));
          });
    }
  </code></pre>
  <p>How Could I do it?</p>