CODEWITHSUNDEEP
dartflutter
bimsina
bimsina

Reputation: 444

How to close a Persistent Bottom Sheet programatically in Flutter?

How to close a Persistent BottomSheet programatically in Flutter? Also is is there a way to show only a part of persistent bottom sheet and the user can drag the sheet upwards to view the full content?

The following code is to show the persistent bottom sheet.

homeScaffoldKey.currentState.showBottomSheet<Null>((BuildContext context) {
  return Container(
      height: 300.0,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Padding(
              padding: EdgeInsets.all(16.0),
              child: Text(
                'Persistent header for bottom bar!',
                textAlign: TextAlign.left,
              )),
          Text(
            'Then here there will likely be some other content '
                'which will be displayed within the bottom bar',
            textAlign: TextAlign.left,
          ),
        ],
      ));
});

Upvotes: 6

Views: 8499

Answers (2)

Stephen
Stephen

Reputation: 1

Yes, you can show only a part of the bottom sheet by setting the isScrollControlled property to true in the showModalBottomSheet method. This allows the modal bottom sheet to take up only part of the screen and then be dragged up to show the rest of the content.

  showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    builder: (BuildContext context) {
      return SingleChildScrollView(
        child: Container(
          height: MediaQuery.of(context).size.height * 0.8,
          padding: EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Text(
                'This is the partial modal',
                style: TextStyle(
                  fontSize: 24.0,
                  fontWeight: FontWeight.bold,
                ),
              ),
              SizedBox(height: 16.0),
              Text(
                'Drag up to see more content',
                textAlign: TextAlign.center,
              ),
              SizedBox(height: 16.0),
            ],
          ),
        ),
      );
    },
  );
}

Upvotes: 0

CopsOnRoad
CopsOnRoad

Reputation: 267554

You can close the bottom sheet using 

Navigator.of(context).pop();

Alternatively, you can use PersistentBottomSheetController to close the bottom sheet. Here is how you'll do it. 

PersistentBottomSheetController _controller; // instance variable

The following can be put in onPressed() type of event that would show bottom sheet. 

_controller = homeScaffoldKey
    .currentState
    .showBottomSheet((BuildContext context) {
     return YourWidgetImplementation();
  },
);

And you can close it using

_controller.close();

Also is is there a way to show only a part of persistent bottom sheet and the user can drag the sheet upwards to view the full content?

Sorry, you have to do it by your own, there is no inbuilt thing like this in Flutter as of now. You can use GestureDetector to manipulate the things your way.

You can use this answer

Upvotes: 9

Related Questions