dart - Flutter Tried calling: [] error on list builder

Question

I am showing list-builder i need to show just a static data right now I am just check itemCount right now later'll show data but it's showing error .

Here is my code

class _OrderPageState extends State<OrderPage> {
  bool showCards = false;
  var data;

  @override
  void initState() {
    this.getOrders();
  }



  getOrders() async{
    final storage = new FlutterSecureStorage();

    String userId = await storage.read(key: "_userID");
    String url =
        'http://retailapi.airtechsolutions.pk/api/orders/customer/${userId}/0';

    print(url);
    http.Response res = await http.get(
      url,
    );
    var data = json.decode(res.body.toString());
    print(data);

    if(data['description'].toString() == "Success"){
      print(data['Orders']);
      print(data['Orders'].length); //its printing 6 here 

      setState(() {
        showCards = true;

      });}
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Order', style: Theme.of(context).textTheme.headline4),
      ),
      body: showCards ? Container(
        child: ListView.builder(
          itemCount: data['Orders'].length,
          shrinkWrap: true,
          padding: EdgeInsets.symmetric(horizontal: 18.0, vertical: 20.0),
          itemBuilder: (context, index) {
            var order = orderList[index];
            return SideInAnimation(index, child:GestureDetector(
              onTap: () {
                // Get.to(OrderDetailPage(order: order));
              },
              child: Container(
                width: double.infinity,
                padding: EdgeInsets.all(12.0),
                margin: EdgeInsets.only(bottom: 15.0),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(15.0),
                  border: Border.all(color: Theme.of(context).accentColor),
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(order.id,
                        style: Theme.of(context)
                            .textTheme
                            .headline3
                            .copyWith(color: Theme.of(context).primaryColor)),
                    SizedBox(height: 12.0),
                    Text(order.dateOrder, style: Theme.of(context).textTheme.subtitle2),
                    Divider(),
                    orderCardItem(context,
                        title: "order.orderstatus", data: order.orderStatus),
                    SizedBox(height: 12.0),
                    orderCardItem(context,
                        title: "order.items",
                        data: "${order.totalItem} " + tr("order.itemspurchased")),
                    SizedBox(height: 12.0),
                    priceItem(context,
                        title: "order.price", data: "$ ${order.totalPrice}"),
                  ],
                ),
              ),
            ));
          },
        ),
      ) : Container(),
    );
  }
}

In my function its printing the length by in List builder its showing an error that Tried calling: ` But on the print where API load it's showing the length 6.

question from:https://stackoverflow.com/questions/65941348/flutter-tried-calling-error-on-list-builder

Answer 1

First you need to initalize a list or array then simply add your data into that variable and then call this variable to your listview builder

var ordersData = [];

then your getData() method should be like this

  getOrders() async {
    ...
    
    if (data['description'].toString() == "Success") {
      ordersData.add(data['Orders']);  // Add your data to array or list 
      print(ordersData.length); //its printing 6 here
    }
    ...
  }

Here your Listview like this

  ListView.builder(
    itemCount: ordersData.length,  // Here you need to pass this lenght
    ...
  )