Example of screen with DraggableScrollableSheet

home_screen.dart

import 'package:flutter/material.dart';
import 'package:someapp/commons/screen_size_helpers.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  PersistentBottomSheetController _controller;
  GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: const Text('Home'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.filter_list),
            onPressed: () {
              _showFilter();
            },
          )
        ],
      ),
      body: Container(
        color: Colors.amber,
        child: Center(
          child: RaisedButton(
            child: Text('press me'),
            onPressed: () {
              _scaffoldKey.currentState.showSnackBar(SnackBar(
                content: Text('Button pressed...'),
              ));
            },
          ),
        ),
      ),
    );
  }

  _showFilter() {
    _controller = _scaffoldKey.currentState.showBottomSheet<void>(
        (ctx) => SizedBox.expand(
              child: DraggableScrollableSheet(
                initialChildSize: 1.0,
                maxChildSize: 1.0,
                minChildSize: 0.0,
                builder:
                    (BuildContext context, ScrollController scrollController) {
                  print('dragable sheet builder...');
                  return _bottomSheetBody(scrollController);
                },
              ),
            ),
        backgroundColor: Colors.transparent,
        clipBehavior: Clip.none,
        elevation: 5);
  }

  Widget _bottomSheetBody(ScrollController scrollController) =>
      Stack(children: <Widget>[
        Container(
          color: Theme.of(context).backgroundColor,
          child: SingleChildScrollView(
            controller: scrollController,
            child: Column(
              children: <Widget>[
                Container(
                    color: Theme.of(context).backgroundColor,
                    width: screenWidth(context),
                    height: 100,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.all(18.0),
                          child: Text(
                            'Filter',
                            style: TextStyle(color: Colors.white),
                          ),
                        ),
                        IconButton(
                          icon: Icon(
                            Icons.close,
                            size: 30,
                            color: Colors.white,
                          ),
                          onPressed: () {
                            _controller.close();
                          },
                        )
                      ],
                    )),
                ...List.generate(20, (i) => getListTile(i))
              ],
            ),
          ),
        ),
        Positioned(
          top: screenHeight(context,
              reducedBy: screenHeight(context, dividedBy: 3.5)),
          child: Container(
            color: Theme.of(context).backgroundColor,
            width: screenWidth(context),
            height: screenHeight(context, dividedBy: 7),
            child: Center(
              child: SizedBox.expand(
                child: Padding(
                  padding: const EdgeInsets.fromLTRB(18.0, 18, 18, 30),
                  child: RaisedButton(
                    child: Text('Apply'),
                    onPressed: () {
                      _controller.close();
                    },
                  ),
                ),
              ),
            ),
          ),
        )
      ]);

  Widget getListTile(int i) => ListTile(
        title: Text(
          'Filter Item $i',
          style: TextStyle(color: Colors.blue),
        ),
      );
}