dragableBottomSheetExample.dart

dragableBottomSheetExample.dart

import 'package:flutter/material.dart';
import 'package:novoadvisor/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,
      ),
    );
  }

  _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 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();
                                },
                              ),
                            ),
                          ),
                        ),
                      ),
                    )
                  ]);
                },
              ),
            ),
        backgroundColor: Colors.transparent,
        clipBehavior: Clip.none,
        elevation: 5);
  }

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