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.

CodePudding user response：

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
  },