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

how to set modal bottom sheet sized based on its content while expanded child is used in flutter

I have a container and expanded listview inside showmodelbottomsheet ..

by default modalbottomsheet occupy 50% height of screen height..Thats fine when data are bigger… but i want to size bottom sheet to minimum height when data are less…

listview should be in scrolling way..

Scaffold(
      body: TextButton(
        onPressed: () {
          showModalBottomSheet(
              context: context,
              builder: (context) {
                return Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Container(
                      color: Colors.red,
                      height: 50,
                      child: Center(child: Text('Data')),
                    ),
                    Expanded(
                      child: ListView.builder(
                          itemCount: data.length,
                          itemBuilder: (context, index) {
                            return ListTile(
                              title: Text(data[index]),
                            );
                          }),
                    )
                  ],
                );
              });
        },
        child: Text('Show Bottom Sheet'),
      ),
    ))

here is an image , i wantt to remove this blank space in expanded widget

enter image description here

Tags:

2

Answers


  1. 0
    • Replace the Expanded widget with Flexible.
    • Add shrinkWrap: true to the ListView widget.

    Final result:

    Widget build(BuildContext context) {
    return Scaffold(
      body: TextButton(
        onPressed: () {
          showModalBottomSheet(
              context: context,
              builder: (context) {
                return Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Container(
                      color: Colors.red,
                      height: 50,
                      child: Center(child: Text('Data')),
                    ),
                    Flexible(
                      child: ListView.builder(
                          shrinkWrap: true,
                          itemCount: data.length,
                          itemBuilder: (context, index) {
                            return ListTile(
                              title: Text(data[index]),
                            );
                          }),
                    )
                  ],
                );
              });
        },
        child: Text('Show Bottom Sheet'),
      ),
    );
  }
    Login or Signup to reply.
  2. 0 
    Scaffold(
      body: Center(
        child: TextButton(
          onPressed: () {
            showModalBottomSheet(
                isScrollControlled: true,
                context: context,
                builder: (context) {
                  return Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Container(
                        color: Colors.red,
                        height: 50,
                        child: const Center(child: Text('Data')),
                      ),
                      ListView.builder(
                          shrinkWrap: true,
                          itemCount: 5,
                          itemBuilder: (context, index) {
                            return const ListTile(
                              title: Text("Sample"),
                            );
                          })
                    ],
                  );
                });
          },
          child: Text('Show Bottom Sheet'),
        ),
      ),
    );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search