Flutter: List<Map<String, dynamic>> doesn't update ui

Question

I do function about increasing number of product. First I separate each product followed by its category using List<Map<String, dynamic>> that includes name and amount . When I click + button, it can print the increased number correctly in console. But in ui the number of product doesn't change immediately. It needs to click ExpansionTile to collapse and click it again to expand, then the number will increase.

This is my code for creating ExpansionTile .

ListView.builder(
   shrinkWrap: true,
   physics: NeverScrollableScrollPhysics(),
   itemCount: categories.length,
   itemBuilder: (context, index) {
   return Container(
      margin: EdgeInsets.only(bottom: 10),
      decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(10),
         color: CollectionsColors.purple,
      ),
      child: ExpansionTile(
         title: Text(
            categories[index],
            style: FontCollection.bodyBoldTextStyle,
         ),
         children: [
            Container(
               color: CollectionsColors.white,
               child: listData(categories[index]),
            ),
         ],
       ),
    );
  },
)

This is code for creating list of product in ExpansionTile.

Widget listData(String category) {
    ProductNotifier productNotifier = Provider.of<ProductNotifier>(context);
    List<Map<String, dynamic>> products = [];

    productNotifier.productList.forEach((product) {
      if (product.category == category) {
        products.add({'name': product.name, 'amount': 0});
      }
    });
    print(products);

    return ListView.separated(
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
      itemCount: products.length,
      itemBuilder: (context, index) {
        return Container(
          margin: EdgeInsets.only(bottom: 5),
          padding: EdgeInsets.fromLTRB(20, 0, 20, 0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Container(
                child: Text(
                  products[index]['name'],
                  style: FontCollection.bodyBlackTextStyle,
                ),
              ),
              Container(
                  key: UniqueKey(),
                  child: CustomStepper(
                      value: products[index]['amount'],
                      iconSize: 25,
                      increaseAmount: () {
                        products[index].update('amount', (value) => ++value);
                        print(products);
                      }
                  )),
            ],
          ),
        );
      },
    );
  }

When I click + button in morning glory, it print in console correctly.

[{name: Morning Glory, amount: 1}, {name: Collard greens, amount: 0}, {name:  Cucumber, amount: 0}, {name: Carrot, amount: 0}]

But in ui doesn't change the value to 1. I need to click ExpansionTile to collapse and click it again to expand, then the number will change.

Answer 1

use stateFull Widget and setState((){});

  increaseAmount: () {              
     setState((){
      products[index].update('amount', (value) => ++value);
      print(products);
     });
   }