CODEWITHSUNDEEP
flutter
Daibaku
Daibaku

Reputation: 12566

Flutter bottom sheet invisible because of bottom navigation bar

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.image I want to implement minimum height bottom sheet coming up from top edge of the bottom navigation bar. How can I achieve this?

Upvotes: 8

Views: 3803

Answers (3)

Alexandru Rusu
Alexandru Rusu

Reputation: 659

This could be a solution. Ensure that your main UI is a Stack.

 Widget _buildOffstageMenu() => AnimatedPositioned(
    duration: Duration(milliseconds: _showUpOffstageMenuDuration),
    width: MediaQuery.of(context).size.width,
    height: _offstageMenuHeight,
    bottom: !_showMenu ? _bottomMenuOffset : 0.0,
    curve: Curves.easeInOutExpo,
    child: InkWell(
      child: Container(
        height: _offstageMenuHeight,
        color: Colors.white,
        child: Column(
          children: [
            /// your options
          ],
        ),
      ),
      onTap: () {
        setState(() {
          _showMenu = !_showMenu;
        });
      },
    ),
  );

So in the end you will have something like this

Stack(
    children: [
    /// your widgets
    _buildOffstageMenu(),
    ],
)

Upvotes: 1

Kavin-K
Kavin-K

Reputation: 2117

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

Upvotes: 0

Lebohang Mbele
Lebohang Mbele

Reputation: 3758

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.

Upvotes: 2

Related Questions