flutter open bottom sheet as wrap content and then set maximum height

Question

when the bottom sheet appears it does not has that much height. but when a checkbox clicked in the bottom sheet it is expanding to the top regardless the screen size. what I have been trying to do is to set max height for bottom sheet. can't find proper solution for that so far. any helps are welcome!

ps: what I have been trying do is open bottom sheet dialog as wrap content initially. after the checkbox is checked its height should have max value. in other words I want to expand it regarding the max height of bottom sheet that will be given.

senario:

1. bottom model should be opened as wrap_content
2. when an item in bottom sheet is clicked the height of the bottom sheet should change to specific a value.

Answer 1

For the bottom sheet, you need to set the height of the sheet.

and before you set the height set to enable this option

isScrollControlled: true,


height: MediaQuery.of(context).size.height - 100,

Answer 2

Updated:

What you want is to update the state of the bottomsheet using StatefulBuilder

Here's the sample code

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  bool setToMaxHeight = false;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        child: const Text('showModalBottomSheet'),
        onPressed: () {
          showModalBottomSheet<void>(
            isScrollControlled: true,
            context: context,
            builder: (BuildContext context) {
              return StatefulBuilder(builder: (BuildContext context,
                  StateSetter setState) { //this
                return Container(
                  height: setToMaxHeight ? 600 : 300, //this
                  color: Colors.amber,
                  child: Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        Text('Max Height: ${setToMaxHeight ? 600 : 300}'),
                        const SizedBox(height: 12),
                        ElevatedButton(
                          child: const Text('Toggle BottomSheet Size'),
                          onPressed: () {
                            setState(() {
                              setToMaxHeight = !setToMaxHeight;
                            }); //this

                          },
                        ),
                        const SizedBox(height: 12),
                        ElevatedButton(
                          child: const Text('Close BottomSheet'),
                          onPressed: () => Navigator.pop(context),
                        ),
                      ],
                    ),
                  ),
                );
              });
            },
          );
        },
      ),
    );
  }
}

Take note on isScrollControlled property and set it to true