skip to Main Content

I am trying to code a modal bottom sheet with a stream list inside.The list can be scrollable but I continuing having this error: Vertical viewport was given unbounded height. What am I doing wrong?
Here is my code

  _showModal(BuildContext context) {
    showModalBottomSheet(
        context: context,
        builder: (context) => Container(
            margin: const EdgeInsets.only(top: 10),
            child: Column(children: [
              Row(mainAxisAlignment: MainAxisAlignment.center, children: [
                Text('Select event',
                    style: Theme.of(context).textTheme.headlineMedium)
              ]),
              ListView.builder(
                  physics: const ScrollPhysics(),
                  itemCount: widget.user.myEvents!.length,
                  itemBuilder: (contex, index) {
                    return StreamBuilder(
                        stream: di
                            .gt<GetSingleEventUseCase>()
                            .call(widget.user.myEvents![index]),
                        builder: (context, snapshot) {
                          if (snapshot.hasData) {
                            return TileSettings(
                                title: snapshot.data!.first.eventName!,
                                leading: snapshot.data!.first.guestsid!
                                            .contains(widget.otherUser.uid) ||
                                        snapshot.data!.first.guestsid!
                                            .contains(widget.otherUser.uid)
                                    ? const Image(image: ticketLinear)
                                    : const Image(image: ticket),
                                onTap: () {},
                                trailing: const SizedBox.shrink());
                          } else {
                            return TileSettings(
                                title: 'No events',
                                leading: const Image(image: cross),
                                onTap: () {},
                                trailing: const SizedBox.shrink());
                          }
                        });
                  })
            ])));
  }

2

Answers


  1. You can try wrap Column with Container and give maxHeight in constrains.

           _showModal(BuildContext context) {
        showModalBottomSheet(
            context: context,
            builder: (context) => Container(
                margin: const EdgeInsets.only(top: 10),
                child: Container(
                  constraints: const BoxConstraints(maxHeight: 250),
                  child: Column(children: [
                    Row(mainAxisAlignment: MainAxisAlignment.center, children: [
                      Text('Select event',
                          style: Theme.of(context).textTheme.headlineMedium)
                    ]),
                    ListView.builder(
                        physics: const ScrollPhysics(),
                        itemCount: widget.user.myEvents!.length,
                        itemBuilder: (contex, index) {
                          return StreamBuilder(
                              stream: di
                                  .gt<GetSingleEventUseCase>()
                                  .call(widget.user.myEvents![index]),
                              builder: (context, snapshot) {
                                if (snapshot.hasData) {
                                  return TileSettings(
                                      title: snapshot.data!.first.eventName!,
                                      leading: snapshot.data!.first.guestsid!
                                                  .contains(widget.otherUser.uid) ||
                                              snapshot.data!.first.guestsid!
                                                  .contains(widget.otherUser.uid)
                                          ? const Image(image: ticketLinear)
                                          : const Image(image: ticket),
                                      onTap: () {},
                                      trailing: const SizedBox.shrink());
                                } else {
                                  return TileSettings(
                                      title: 'No events',
                                      leading: const Image(image: cross),
                                      onTap: () {},
                                      trailing: const SizedBox.shrink());
                                }
                              });
                        })
                  ]),
                )));
      }
    
    Login or Signup to reply.
  2. i think you should set fixed height of the container here is modified code for you and also i have mentioned that in which line i changed the code ( changed code by me) –

    _showModal(BuildContext context) {
      showModalBottomSheet(
        context: context,
        builder: (context) => Container(
          height: 400, // Set a fix height of container , changed code by me
          margin: const EdgeInsets.only(top: 10),
          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    'Select event',
                    style: Theme.of(context).textTheme.headlineMedium,
                  ),
                ],
              ),
              Expanded( // changed code by me
                child: ListView.builder(
                  physics: const ScrollPhysics(),
                  itemCount: widget.user.myEvents!.length,
                  itemBuilder: (contex, index) {
                    return StreamBuilder(
                      stream: di
                          .gt<GetSingleEventUseCase>()
                          .call(widget.user.myEvents![index]),
                      builder: (context, snapshot) {
                        if (snapshot.hasData) {
                          return TileSettings(
                            title: snapshot.data!.first.eventName!,
                            leading:
                                snapshot.data!.first.guestsid!.contains(widget.otherUser.uid) ||
                                        snapshot.data!.first.guestsid!.contains(widget.otherUser.uid)
                                    ? const Image(image: ticketLinear)
                                    : const Image(image: ticket),
                            onTap: () {},
                            trailing: const SizedBox.shrink(),
                          );
                        } else {
                          return TileSettings(
                            title: 'No events',
                            leading: const Image(image: cross),
                            onTap: () {},
                            trailing: const SizedBox.shrink(),
                          );
                        }
                      },
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      );
    }
    

    hope this will work, if it works then hit up and mark it as answer so other can take help

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search