DraggableScrollableSheet with Column won't drag to top

Viewed 171

I'm trying to create a draggable bottom sheet that will have a set header & footer. Between those, the body/content will vary. There may be an empty state or there may be a list of data. The user should be able to expand this sheet to the top of the screen as well.

Here is a base example where I can see all the data, but I can't get it to drag up to the max size. I can only scroll within that ListView between the header & footer.

How can I update this so I can still drag the sheet to snap to the top, or back to the middle, or dismiss?

Code Example:

void _showDraggableSheet(context) {
    showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      useRootNavigator: true,
      builder: (_) {
        return DraggableScrollableSheet(
          expand: false,
          initialChildSize: 0.65,
          minChildSize: 0.65,
          maxChildSize: 0.9,
          builder: (_, controller) {
            return Container(
              color: Colors.black,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  _buildHeader(),
                  _buildContent(),
                  _buildFooter(),
                ],
              ),
            );
          },
        );
      },
    );
  }


  Widget _buildContent() {
    return Expanded(
      child: Container(
        color: Colors.green,
        child: ListView.builder(
          itemCount: 100,
          itemBuilder: (_, i) => ListTile(title: Text('Item $i')),
        ),
      ),
    );
  }
0 Answers
Related