Flutter bottom sheet invisible because of bottom navigation bar

Question

I'm trying to show bottom sheet and let user pick choice. I did like so

showModalBottomSheet(
  context: context,
  builder: (builder) {
   return Column(
     mainAxisSize: MainAxisSize.min,
      children: <Widget>[
       new ListTile(
        leading: new Icon(Icons.image),
        title: new Text('From gallary'),
       ),
       new ListTile(
        leading: new Icon(Icons.camera_alt),
        title: new Text('Take video'),
       ),
      ],
    );
   });

However it barely visible because of bottom navigation bar. It looks like this. I want to implement minimum height bottom sheet coming up from top edge of the bottom navigation bar. How can I achieve this?

Answer 1

The showModalBottomSheet has useRootNavigator which is by default false. The documentation says:

The useRootNavigator parameter ensures that the root navigator is used to display the [BottomSheet] when set to true. This is useful in the case that a modal [BottomSheet] needs to be displayed above all other content but the caller is inside another [Navigator].

I think that is solution to your problem.

Answer 2

Instead of Column try wrapping children with ListView and make sure shrinkWrap: true,

showModalBottomSheet(
    context: context,
    builder: (builder) {
      return ListView(
        shrinkWrap: true,
        children: <Widget>[
          new ListTile(
            leading: new Icon(Icons.image),
            title: new Text('From gallary'),
          ),
          new ListTile(
            leading: new Icon(Icons.camera_alt),
            title: new Text('Take video'),
          ),
        ],
      );
    });