Question 79892 in Flutter Question posted in
The official Flutter documentation can be found here.

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

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.
Tags:

2

Answers


  1. 0

    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,
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search