Question 76404 in Flutter Question posted in
The official Flutter documentation can be found here.

How to improve the performance of a listview within a listview without using shrinkwrap in flutter?

The logic I want is to show a list of categories, and when a category is selected, the category under it will get pushed down and the selected category products will be shown.

Here is a minimal code that I’m currently working with:

class CategoryPage extends StatefulWidget {
  const CategoryPage({Key key}) : super(key: key);

  @override
  State<CategoryPage> createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage> {
  Category selectedCategory;

  final List<Category> categories = [
    Category(name: 'Breakfast', products: ['Cake', 'Sandwich']),
    Category(name: 'Lunch', products: ['Chicken', 'Pizza']),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Minimal Example')),
      body: ListView.builder(
        itemCount: categories.length,
        itemBuilder: (context, index) {
          final category = categories[index];
          return Column(
            children: [
              GestureDetector(
                onTap: () {
                  setState(() {
                    selectedCategory = category;
                  });
                },
                child: Container(
                  padding: const EdgeInsets.symmetric(vertical: 10),
                  margin: const EdgeInsets.only(top: 10),
                  alignment: Alignment.center,
                  width: double.infinity,
                  decoration: BoxDecoration(
                    color: selectedCategory == category
                        ? Colors.green
                        : Colors.grey,
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      Text(category.name),
                      Icon(
                        selectedCategory == category
                            ? Icons.keyboard_arrow_up
                            : Icons.keyboard_arrow_down,
                      ),
                    ],
                  ),
                ),
              ),
              if (selectedCategory == category)
                ListView.builder(
                  shrinkWrap: true,
                  itemCount: category.products.length,
                  itemBuilder: (context, index) {
                    final product = category.products[index];
                    return Text(product);
                  },
                )
            ],
          );
        },
      ),
    );
  }
}

And a screenshot:
enter image description here
enter image description here

Now what I want is to not use shrinkWrap as that will remove the performance gain of using ListView.builder().

Any way I can solve this

Tags:

2

Answers


  1. 0

    Try CustomScrollView (sliver). For huge number of data’s, Sliver always the better option either for small numbers ListView.builder(shrinkWrap) works fine

    Login or Signup to reply.
  2. 0

    I don’t know about Category class you created but this will help you to list your categories with the help of DropdownFormField.
    You just have to handle the selections with onChange.

    @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Minimal Example')),
      body: ListView.builder(
        itemCount: categories.length,
        itemBuilder: (context, index) {
          final category = categories[index];
          return DropdownButtonFormField(
              hint: Text(category.name),
              items: category.products
                  .map<DropdownMenuItem<String>>(
                      (categoryitem) => DropdownMenuItem<String>(
                            value: categoryitem,
                            child: Text(categoryitem),
                          ))
                  .toList(),
              onChanged: (value) {
                // selections to manage
              });
        },
      ),
    );
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search