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

Flutter – BottomSheet with dynamic height and horizontally scrollable ListView

I want to achieve a BottomSheet which adapts in height to its content and contains a short list of horizonal items (max. 20 items).

showModalBottomSheet(
                  context: context,
                  builder: (context) {
                    return SafeArea(
                      child: Wrap(
                        children: [
                          ListTile(title: Text('Foo')),
                          ListTile(title: Text('Bar')),
                          Expanded(
                            child: ListView.builder(
                              scrollDirection: Axis.horizontal,
                              itemCount: 100,
                              itemBuilder: (_, index) {
                                return Card(
                                  child: Padding(
                                    padding: EdgeInsets.all(8),
                                    child: Text("Item $index"),
                                  ),
                                );
                              },
                            ),
                          ),
                        ],
                      ),
                    );
                  },
                );

Problem:

No matter what I try, wrapping in Expanded etc., I always get the error Failed assertion... hasSize.

I would like to achieve a horizontally scrollabe list inside the bottom sheet, like in the picture of the material docs

How is that possible?

Thanks for your help!

Tags:

2

Answers


  1. 0

    You need to wrap your ListView.builder in SizedBox with a height.

    Example:

    showModalBottomSheet(
      context: context,
      builder: (context) {
        return SafeArea(
          child: Wrap(
            children: [
              const ListTile(title: Text('Foo')),
              const ListTile(title: Text('Bar')),
              SizedBox(
                height: 50,
                width: double.infinity,
                child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  itemCount: 100,
                  itemBuilder: (_, index) {
                    return Card(
                      child: Padding(
                        padding: const EdgeInsets.all(8),
                        child: Text("Item $index"),
                      ),
                    );
                  },
                ),
              )
            ],
          ),
        );
      },
    );
    Login or Signup to reply.
  2. 0

    Add your ListView inside SizedBox or Container and give it to specific height, because Expanded takes full height

    Try below code:

    showModalBottomSheet(
  isScrollControlled: false,
  clipBehavior: Clip.antiAlias,
  context: context,
  backgroundColor: Colors.white,
  builder: (context) => Column(
    children: [
      const ListTile(title: Text('Foo')),
      const ListTile(title: Text('Bar')),
      SizedBox(
        height: 50,
        width: double.infinity,
        child: ListView.builder(
          padding: EdgeInsets.symmetric(horizontal: 10),
          scrollDirection: Axis.horizontal,
          itemCount: 20,
          itemBuilder: (context, index) {
            return Card(
              color: Colors.white,
              child: Padding(
                padding: const EdgeInsets.all(8),
                child: Text("Item $index"),
              ),
            );
          },
        ),
      )
    ],
  ),
);

    Result with SizedBox

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search