CODEWITHSUNDEEP
flutterwidget
Bright
Bright

Reputation: 1067

Flutter change Height of DraggableScrollableSheet dynamically

I would like to change the height of DraggableScrollableSheet when a certain button is pressed. So far this is what i have

..other code up here...
  double _sheetSize=0.8;

  @override
  Widget build(BuildContext context) {  
  return DraggableScrollableSheet(
        initialChildSize: 0.29,
        minChildSize: 0.05,
        maxChildSize: _sheetSize,
        builder: (BuildContext context, _myScrollController) {
        return Container(
          padding:EdgeInsets.symmetric(horizontal: 40,vertical: 10),
          decoration: BoxDecoration(
              color: Colors.white,
              boxShadow: [
                BoxShadow(
                    color: Colors.grey.withOpacity(.8),
                    offset: Offset(3, 2),
                    blurRadius: 7)
              ]),
          child: PageView(
            physics: NeverScrollableScrollPhysics(),
            controller: _stepController,
            children: [
              NotificationListener<NextStep>(
                  child: SelectTimeWidget(myScrollController: _myScrollController),
                  onNotification: (notification) {
                    if(notification.moveToNextStep){
                      moveToNextStep();
                      setState(() {
                        _sheetSize=0.5;
                      });
                    }else{
                      moveToPreviousStep();
                    }
                    return null;
                  }
              ),
...some other code here...

In this widget, i have used a notification listener to fire up an event that i desired to change the height of the sheet

              NotificationListener<NextStep>(
                  child: SelectTimeWidget(myScrollController: _myScrollController),
                  onNotification: (notification) {
                    if(notification.moveToNextStep){
                      moveToNextStep();
                      setState(() {
                        _sheetSize=0.5;
                      });
                    }else{
                      moveToPreviousStep();
                    }
                    return null;
                  }
              ),

Sheet height

maxChildSize: _sheetSize,

What could i be doing wrong

Upvotes: 5

Views: 3399

Answers (3)

Олександр Бабіч
Олександр Бабіч

Reputation: 1452

The key is initialChildSize . You can use setState or other state management tool to change its value and it will do the trick.

Upvotes: 0

Nadpescador
Nadpescador

Reputation: 13

Sliding Up Panel is a good widget, althought in my experience, there are some trouble with the lateral expantion of the widget in smaller devices or trying it with smaller with, and the github project has not recently updated their issues.

Upvotes: 0

Bright
Bright

Reputation: 1067

After Some real struggle I later discovered that its not possible to do this for the DraggableScrollableSheet Api at the time of this publishing but there is another way to achieve this using the package: sliding_up_panel.

Upvotes: 3

Related Questions