Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Updating list in memory doesn't change UI in Flutter

I am currently modifying my app to support large devices. In this app I want to have a list of categories at the left and when I tap the list tile I want to show the list of the items which the category holds on the left. By the approach I am using the list updates in memory but doesnt change the UI. This is my current approach ->

class _OrderCategoryScreenState extends State<OrderCategoryScreen> {

  List<FoodItem> filteredLists = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: Row(
        children: [
          ValueListenableBuilder<Box<FoodCategory>>(
            valueListenable: Boxes.getFoodCategories().listenable(),
            builder: (context, box, child) {
              final categories = box.values.toList().cast<FoodCategory>();
              return categories.length == 0
                  ? Container(
                      color: Color(0xFFFCF9F9),
                      height: double.infinity,
                      width: MediaQuery.of(context).size.height * 0.30,
                      child: Center(
                        child: Text("No Categories"),
                      ))
                  : Container(
                      height: double.infinity,
                      width: MediaQuery.of(context).size.height * 0.35,
                      child: Drawer(
                        backgroundColor: Color(0xFFFCF9F9),
                        elevation: 0,
                        child: ListView(
                          children: <Widget>[
                            DrawerHeader(
                              child: ListView(
                                children: [
                                  Container(
                                    height: MediaQuery.of(context).size.height,
                                    child: ValueListenableBuilder<
                                        Box<FoodCategory>>(
                                      builder: (context, value, child) {
                                        final foodCategories = box.values
                                            .toList()
                                            .cast<FoodCategory>();
                                        return ListView.builder(
                                          itemCount: foodCategories.length,
                                          itemBuilder: (context, index) {
                                            return ListTile(
                                              tileColor: Colors.green,
                                              
                                              onTap: () {
                                                filteredLists = Boxes
                                                        .getFoodItems()
                                                    .values
                                                    .where((element) =>
                                                        element.categoryName ==
                                                        foodCategories[index]
                                                            .name)
                                                    .toList();
                                                print(filteredLists.length);
                                                print("object");
                                              },
                                              title: Text(
                                                  foodCategories[index].name),
                                            );
                                          },
                                        );
                                      },
                                      valueListenable: Boxes.getFoodCategories()
                                          .listenable(),
                                    ),
                                  )
                                ],
                              ),
                            ),
                          ],
                        ),
                      ));
            },
          ),
          Container(
            width: MediaQuery.of(context).size.width * 0.5,
            height: MediaQuery.of(context).size.height * 0.5,
            color: Colors.amberAccent,
            child: filteredLists.isEmpty
                ? Center(
                    child: Text("Choose A Category"),
                  )
                : ListView.builder(itemCount: filteredLists.length,
                    itemBuilder: (context, index) {
                      return ListTile(
                        title: Text(filteredLists[index].itemName),
                      );
                    },
                  ),
          ),
        ],
      )
      
      
      ),
    );
  }
}

When I hot reload using this approach it works on the UI as well.

Please Help.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

Try calling setState to update the UI.

onTap: () {
    filteredLists = Boxes
            .getFoodItems()
        .values
        .where((element) =>
            element.categoryName ==
            foodCategories[index]
                .name)
        .toList();
    print(filteredLists.length);
    print("object");
    setState((){}); //this
  },
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading