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

Flutter – How to remove the default height limit a BottomSheet is allowed to grow?

Consider the following example:

import 'package:flutter/material.dart';

void main() {
  const project = MaterialApp(
    home: HomeScreen(),
  );

  runApp(project);
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  Widget bottomSheetView() {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          width: 128,
          height: 128,
          color: Colors.black,
        ),
        Container(
          width: 128,
          height: 128,
          color: Colors.black,
        ),
        Container(
          width: 128,
          height: 128,
          color: Colors.black,
        ),
        /* ... */
      ],
    );
  }

  void gotoBottomSheet() {
    showModalBottomSheet(
      context: context,
      builder: (context) {
        return bottomSheetView();
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text('HomeScreen'),
      ),
      body: SafeArea(
        child: Center(
          child: ElevatedButton(
            onPressed: () => gotoBottomSheet(),
            child: const Text('BottomSheet'),
          ),
        ),
      ),
    );
  }
}

If you keep adding containers, eventually you will reach a RenderFlex overflow error because the bottom sheet has a height limit by default.

How can I remove such a limit so that the column that takes minimum size can grow a bit more?

This is just a verbose paragraph because it seems to be the unfortunate case that StackOverflow does not like issues whose main content is mostly code.

Tags:

2

Answers


  1. 0

    Easiest way to do is that wrap your Column of bottomSheetView method with SingleChildScrollView like below

    Widget bottomSheetView() {
    return SingleChildScrollView(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            width: 128,
            height: 300,
            color: Colors.black,
          ),
          Container(
            width: 128,
            height: 400,
            color: Colors.red,
          ),
          Container(
            width: 128,
            height: 400,
            color: Colors.white,
          ),
          /* ... */
        ],
      ),
    );

    And In your goToBottomSheet method add isScrollControlled: true like below

    void gotoBottomSheet() {
    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      builder: (context) {
        return bottomSheetView();
      },
    );
  }
    Login or Signup to reply.
  2. 0

    Wrap the bottomSheet widget in the Container widget because every widget takes the height of the parent widget and Container has 0 height & 0 width by default.

    And In your goToBottomSheet method add

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

Back To Top
Search