listview.separated flutter showing blank page even it has data

Question

hi I am new to flutter and dart, i have this issue that the page is showing no data , even though there is data inside listView.seperator , when i check with dubugger , i get data in snapshot.data[index].finishedProductId Or finishedProductName or categoryShortName, but debugger finish it shows blank page, even deleting all i just but Text , still it shows blank page i am giving the code, plz help me. i am giving my code as below thanks in advance. I have marked my website link with start , just for security. Sorry for this.

import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart' as http;

class DetailsPage extends StatefulWidget {
  final String itemCode;

  DetailsPage({Key key, this.itemCode}) : super(key: key);

  @override
  _DetailsPageState createState() => _DetailsPageState();
}

class _DetailsPageState extends State<DetailsPage> {
  // ignore: missing_return
  Future<List<ItemDetails>> _getItemDetails() async {
    final response = await http.get(
        'https://www.****.com/appfiles/getprodcontent.php?getContent=' +
            this.widget.itemCode );

    var jsonData = jsonDecode(response.body);

    print(jsonData);

    List<ItemDetails> itemDet = [];

    for (var it in jsonData) {
      ItemDetails iDet = ItemDetails(
          it['imgPath'],
          it['finishedProductId'],
          it["finishedProductName"],
          it["categoryShortName"],
          );

      itemDet.add(iDet);
      
    }
    print(itemDet.length);
    return itemDet;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey[200],
      appBar: AppBar(
        title: Text("Product Details of " + this.widget.itemCode),
      ),
      body: Container(
          child: FutureBuilder(
              
              initialData: [],
              future: _getItemDetails(),
              // ignore: missing_return
              builder: (BuildContext context, AsyncSnapshot snapshot) {
              
              //if(snapshot.connectionState == ConnectionState.done){  
              
                //if (snapshot.data == null) {
                 // return Container(
                   //   child: Center(
                   // child: Text('Loading...'),
                 /// ));
               // } else {

                  return Column(

                    children: <Widget> [
                      SizedBox(
                        height:200,
                      
                     child: ListView.seperated(
                        
                          padding: const EdgeInsets.all(8),
                          itemCount: snapshot.data.length,
                          // ignore: missing_return
                          itemBuilder: (BuildContext context, int index) {
                            
                            Container (
                              child: 
                                Center(child: Text("finished product id") ,),                  
                            );
                    
                            Container(
                              height: 50,
                              color: Colors.amber[200],
                              child: Center(
                                child: CircleAvatar(
                                  radius: 50.0,
                                  backgroundImage: NetworkImage(
                                      "https://www.shardaudyogmandir.com/assets/thumbs/javaschatni.png")
                                      != null ?NetworkImage("https://www.****.com/assets/thumbs/***.png") : Container()                             ,
                                ),
                              ),
                            );
                           
                            
                            Container(
                              height: 50,
                              color: Colors.amber[200],
                              child: Center(
                                child: Text(snapshot.data[index].finishedProductId != null ? snapshot.data[index].finishedProductId: "",
                                    style: TextStyle(
                                        color: Colors.black,
                                        fontSize: 20,
                                        fontWeight: FontWeight.bold)),
                              ),
                            );

                            Container(
                              height: 50,
                              color: Colors.amber[200],
                              child: Center(
                                child: Text(snapshot.data[index].finishedProductName != null ? snapshot.data[index].finishedProductName: "",
                                                style: TextStyle(color: Colors.black)),
                                            
                              ),
                            );

                            Container(
                              height: 50,
                              color: Colors.amber[200],
                              child: Center(
                                child: Text(snapshot.data[index].categoryShortName != null ? snapshot.data[index].categoryShortName : "",
                                                style: TextStyle(color: Colors.black)),
                                            
                              ),
                            );

                            Container(
                              height: 50,
                              color: Colors.amber[200],
                              child: Center(
                                child:  RaisedButton(
                                              color: Colors.green[700],
                                              onPressed: () {
                                                //print("press view details");
                                              },
                                              child: const Text('Add To Cart',
                                                  style: TextStyle(
                                                      fontSize: 20,
                                                      color: Colors.white)),
                                            ),
                                            
                              ),
                            );
                          },
                          //separatorBuilder: (BuildContext context, int index) =>
                          //const Divider(),
                        ),
                      )
                    ],
                  );
                 
                //}
              //}
              }
              )
              ),
    );
  }
}

class ItemDetails {
  final String finishedProductId;
  final String finishedProductName;
  final String categoryShortName;
  //final String rawMaterialName;
  final String imgPath;

  ItemDetails(this.imgPath, this.finishedProductId, this.finishedProductName,
      this.categoryShortName);
}

Answer 1

You need to add return inside Item Builder method like this :

                itemBuilder: (BuildContext context, int index) {
                  
                  return Column(
                    children: [
                      Container(
                    height: 50,
                    color: Colors.amber[200],
                    child: Center(
                      child: CircleAvatar(
                        radius: 50.0,
                        backgroundImage: NetworkImage(
                            "https://www.******.com/assets/thumbs/****.png")
                            != null ?NetworkImage("https://www.shardaudyogmandir.com/assets/thumbs/javaschatni.png") : Container()                             ,
                      ),
                    ),
                  ),
                 
                  Container (
                    child: 
                      Center(child: Text("finished product id") ,),                  
                  ),
                  Container(
                    height: 50,
                    color: Colors.amber[200],
                    child: Center(
                      child: Text(snapshot.data[index].finishedProductId != null ? snapshot.data[index].finishedProductId: "",
                          style: TextStyle(
                              color: Colors.black,
                              fontSize: 20,
                              fontWeight: FontWeight.bold)),
                    ),
                  ),

                  Container(
                    height: 50,
                    color: Colors.amber[200],
                    child: Center(
                      child: Text(snapshot.data[index].finishedProductName != null ? snapshot.data[index].finishedProductName: "",
                                      style: TextStyle(color: Colors.black)),
                                  
                    ),
                  ),

                  Container(
                    height: 50,
                    color: Colors.amber[200],
                    child: Center(
                      child: Text(snapshot.data[index].categoryShortName != null ? snapshot.data[index].categoryShortName : "",
                                      style: TextStyle(color: Colors.black)),
                                  
                    ),
                  ),

                  Container(
                    height: 50,
                    color: Colors.amber[200],
                    child: Center(
                      child:  RaisedButton(
                                    color: Colors.green[700],
                                    onPressed: () {
                                      //print("press view details"),
                                    },
                                    child: const Text('Add To Cart',
                                        style: TextStyle(
                                            fontSize: 20,
                                            color: Colors.white)),
                                  ),
                                  
                    ),
                  ),
                    ],
                  );
                },

And wrap it inside column. I don't know how the UI will be look like but that's the problem from your code. For further information head on Flutter.Dev