ListView is not showing the result if empty list

Question

I am loading data from a remote api:

This is the dart file that provides the connection and download:

clinica-api.dart

import 'package:flutter_capenergy/modelos/clinica.dart';
import 'package:http/http.dart' as http;


Future<List<Clinica>> fetchClinicas(String idUsuario) async {

  
  String url ="https://..flutter_api/get_clinicas.php";
  final response = await http.get(url);
  
  if (response.body == "[]"){
    

  }
  return clinicaFromJson(response.body);

}

And this is the piece of code from misclinicas.dart where I am showing the list:

 Expanded(
              child: Container(
                child: FutureBuilder(
                  future: fetchClinicas(miId),
                  builder: (context, snapshot) {
                    if (snapshot.hasData) {
                      return ListView.builder(
                        itemCount: snapshot.data.length,
                        shrinkWrap: true,
                        itemBuilder: (BuildContext context, index) {
                          print(index.toString());
                          Clinica clinica = snapshot.data[index];
                          return new GestureDetector(
                            onTap: () {
                              clinicaProvider.setClinica(clinica.nombreClinica);
                              clinicaProvider.setClinicaId(clinica.idClinica);
                            } ,
                            child: new Card(
                              elevation: 6,
                              child: new Column(
                                children: [
                                  new Padding(
                                    padding: const EdgeInsets.all(8.0),
                                    child: Column(
                                      crossAxisAlignment: CrossAxisAlignment
                                          .start,
                                      children: [
                                        Row(
                                          crossAxisAlignment: CrossAxisAlignment
                                              .center,
                                          mainAxisAlignment: MainAxisAlignment
                                              .center,
                                          children: <Widget>[
                                            Image.network(
                                              'https://.../${clinica
                                                  .logoClinica}',
                                              height: 180,
                                              alignment: Alignment.center,),

                                          ],

                                        ),
                                        Text(
                                          '${clinica.nombreClinica}',
                                          style: TextStyle(fontSize: 16,
                                              fontWeight: FontWeight.bold,
                                              color: Colors.blue),

                                        ),
                                        Text(
                                          '${clinica.direccionClinica}',
                                          style: TextStyle(fontSize: 14,
                                              color: Colors.grey,
                                              fontStyle: FontStyle.italic),
                                        ),
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          );
                        },
                      );
                    }
                    else {
                       Text ("NO HAY CLINICAS");
                    }

                    return Text("Cargando clínicas");
                  },
                ),
              ),
            ),

If there are items on the list, they are shown, but if the list is empty I would like to show a text with a message reporting that the list is empty.

I am trying to do it putting this text widget if snapshot.hasdata is false:

Text ("NO HAY CLINICAS");

but it is not shown, I am only getting a blank listView.

Answer 1

in the api call return empty list if response.body ="[]"

  if (response.body == "[]"){
    List<Clinica> emptyClinica = [];
    return emptyClinica;
  }

in misclinicas.dart

snapshot.data.lenth > 0 ? your list work  : Text('No Data Found') 

Answer 2

In the empty list case, snapshot.hasData will be true and snapshot.data.length will be 0.

snapshot.hasData == false means it's either loading or an error has happened.