CODEWITHSUNDEEP
flutterdartflutter-layoutandroid-bottomsheetdialogflutter-showmodalbottomsheet
Jaimin Modi
Jaimin Modi

Reputation: 1667

Adding Column widget in ModalBottomSheet showing Transparent View- Flutter

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) ?

Upvotes: 2

Views: 760

Answers (4)

Kiran Kumar
Kiran Kumar

Reputation: 1

Wrap with sizedbox and assign width double.infinity

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

Upvotes: 0

Jaimin Modi
Jaimin Modi

Reputation: 1667

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();
              }),
          ),
        ],
      );
    }

Upvotes: 0

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63549

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

Upvotes: 2

BosS
BosS

Reputation: 500

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

Upvotes: 1

Related Questions