Adding Column widget in ModalBottomSheet showing Transparent View- Flutter-CodePudding

I have to show ModalBottomSheet with this widget : showModalBottomSheet

For that I set all the required properties of ModalBottomSheet and as a builder part I am doing it as below :

builder: (_) {
      return Column(
        children: [
          Text("Sample "),
          ListView.builder(
              itemCount: 2,
              itemBuilder: (BuildContext context, int index) {
                return NagarTiming();
              }),
        ],
      );
    }

You can see that There is a Text widget inside Column widget which I have used there to consider it as a Title of my ModalBottomSheet.

But unfortunately, when I execute or call showModalBottomSheet method, Its showing me just transparent window or view.

Note that without Column widget and Text widget If I return only ListView as builder for ModalBottomSheet, Its working fine for me.

What might be the issue in showing Title (Text in Column widget) ?

CodePudding user response：

add shrinkWrap:true parameter to ListView widget and mainAxisSize:MainAxisSize.min to your Column widget It should work fine

CodePudding user response：

You need to wrap your ListView with Expanded inside Column in order to get available height. Else, it will raise unbounded height issue. To set background color you can use backgroundColor from showModalBottomSheet.

showModalBottomSheet(
    context: context,
    backgroundColor: Colors.green,
    builder: (_) {
      return Column(
        children: [
          Text("Sample "),
          Expanded(
            child: ListView.builder(

You can check Unbounded height / width | Decoding Flutter and ShrinkWrap vs slivers

CodePudding user response：

It was the issue with the vertical size. ListView inside Column widget should have height concern. So used Flexible widget as below :

builder: (_) {
      return Column(
        children: [
          Text("Sample "),
          Flexible(
          child: ListView.builder(
              itemCount: 2,
              itemBuilder: (BuildContext context, int index) {
                return NagarTiming();
              }),
          ),
        ],
      );
    }