Show Listile only when it holds data

Question

As the question suggests I have a ListView which shows all my "treibstoffData".

Code:

ListView.builder(
itemCount: this.variantData!.treibstoffData!.length,
itemBuilder: (context, index) => GestureDetector(
      onTap: () {}
      },
      child: Container(
        margin: EdgeInsets.all(10),
        height: MediaQuery.of(context).size.height * 0.05,
        width: MediaQuery.of(context).size.width * 0.9,
        child: Align(
          alignment: Alignment.center,
          child: Text(
            this.variantData!.treibstoffData![index].title!,
            textScaleFactor: 1.4,
          ),
        ),
        decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(16)),
      ),
    )),

As you can see in my Dataset the treibstoffData sometimes contains data & sometimes it doesn't contain data.

{
              "bigtitle":"placeholder",
              "title":"placeholder",
              "image":"Assets/Images/AlfaRomeo4C.jpeg",
              "treibstoffData":[
                 {
                    "title":"Benzin",
                    "leistungData":[
                       {
                          "title":"240 PS",
                          "unterscheidungsData":[
                             {
                                "difference":"-",
                                "title":"Coupe/Cabriolet",
                                "wholeText”:"BlaBla"
                             }
                          ]
                       }
                    ]
                 },
                 {
                    "title":"Diesel",
                    "leistungData":[
                       
                    ]
                 },
                 {
                    "title":"Andere",
                    "leistungData":[
                       
                    ]
                 }
              ]
           }

& now I was wondering how I have to formulate the if condition so that the list view is only populated with the TreibstoffData in which values are.

Hope I included all the necessary data, if not just write to me.

Answer 1

Check if the length value at index is > 0 then show the ListTile widget else show an empty Container widget.

AS:

itemBuilder: (context, index) =>
this.variantData!.treibstoffData![index].leistungData!.length > 0 ? GestureDetector() : Container()

Answer 2

1. Create a clone of list
2. Filter the list
3. Show the filtered list

List  a = List.from(this.variantData!.treibstoffData!. where((element) => element['leistungData'].length > 1));