Skip to content
Flutter Scrollable Persistent Bottom Sheet
Dart Ruby Java Swift Objective-C
Branch: master
Clone or download
Latest commit 35f4a6b Jun 20, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
android up to 0.2.0+1 Apr 2, 2019
example up to 0.2.0+1 Apr 2, 2019
ios up to 0.2.2 Jun 20, 2019
lib cancel drag when not full height Apr 7, 2019
.gitignore up to 0.2.0+1 Apr 2, 2019
.metadata up to 0.2.0+1 Apr 2, 2019
CHANGELOG.md up to 0.2.2 Jun 20, 2019
LICENSE up to 0.2.0+1 Apr 2, 2019
README.md up to 0.2.2 Jun 20, 2019
pubspec.yaml up to 0.2.2 Jun 20, 2019

README.md

Scrollable Bottom Sheet

This is a temporary workaround to achieve Scrollable Persistent Bottom Sheet that i created.

Installation

First, add scrollable_bottom_sheet as a dependency in your pubspec.yaml file.

scrollable_bottom_sheet: ^0.2.1

## Notes

For version ^0.2.0 and later is AndroidX compatible version
For version below 0.1.0+2 is AndroidX incompatible version

I haven't refactor this plugin to Flutter 1.2.1, so maybe if you're using Flutter 1.2.1 this may cause errors

Feel free to fork this if you want to customize or refactor to Flutter 1.2.1

Example

class _BottomSheetDemoState extends State<BottomSheetDemo> with TickerProviderStateMixin {
  bool _bottomSheetActive = false;
  String _currentState = "initial";
  String _currentDirection = "up";
  final controller = ScrollableController();

  void _showMessage(BuildContext context) {
    showDialog<void>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          content: const Text('You tapped the floating action button.'),
          actions: <Widget>[
            FlatButton(
                onPressed: () {
                  Navigator.pop(context);
                },
                child: const Text('OK'))
          ],
        );
      },
    );
  }

  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: const Text('Persistent bottom sheet'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _showMessage(context);
        },
        backgroundColor: Colors.redAccent,
        child: const Icon(
          Icons.add,
          semanticLabel: 'Add',
        ),
      ),
      body: Builder(
        builder: (BuildContext context) {
          return Column(children: [
            Expanded(
                child: Center(
                    child: RaisedButton(
                        onPressed: _bottomSheetActive
                            ? null
                            : () {
                                setState(() {
                                  //disable button
                                  _bottomSheetActive = true;
                                });
                                _showBottomSheet(context);
                              },
                        child: const Text('Show bottom sheet')))),
            Expanded(
                child: Center(
                    child: RaisedButton(
                        onPressed: () {
                          Navigator.push(context, MaterialPageRoute(builder: (context) => AnotherScrollable()));
                        },
                        child: const Text('Show bottom sheet')))),
          ]);
        },
      ),
    );
  }

  Widget _bottomSheetBuilder(BuildContext context) {
    final ThemeData themeData = Theme.of(context);

    return Stack(children: [
      ScrollableBottomSheet(
        controller: controller,
        halfHeight: 250.0,
        minimumHeight: 50.0,
        autoPop: false,
        scrollTo: ScrollState.minimum,
        snapAbove: false,
        snapBelow: false,
        callback: (state) {
          if (state == ScrollState.minimum) {
            _currentState = "minimum";
            _currentDirection = "up";
          } else if (state == ScrollState.half) {
            if (_currentState == "minimum") {
              _currentDirection = "up";
            } else {
              _currentDirection = "down";
            }
            _currentState = "half";
          } else {
            _currentState = "full";
            _currentDirection = "down";
          }
        },
        child: Container(
            color: Colors.greenAccent,
            margin: EdgeInsets.only(bottom: 50.0),
            child: Padding(
                padding: const EdgeInsets.all(32.0),
                child: Column(children: [
                  InkWell(
                    child: Container(color: Colors.red, height: 57.0),
                    onTap: () {
                      controller.animateToZero(context, willPop: true);
                    },
                  ),
                  Text('This is a Material persistent bottom sheet. Drag downwards to dismiss it.',
                      textAlign: TextAlign.center, style: TextStyle(color: themeData.accentColor, fontSize: 24.0)),
                  Column(
                      children: List.generate(100, (index) {
                    return Text("Text $index");
                  }))
                ]))),
      ),
      Positioned(
          bottom: 0.0,
          left: 0.0,
          right: 0.0,
          height: 50.0,
          child: Material(
            elevation: 15.0,
            child: IconButton(
                icon: Icon(Icons.location_on),
                onPressed: () {
                  if (_currentState == "half") {
                    if (_currentDirection == "up") {
                      controller.animateToFull(context);
                    } else {
                      controller.animateToMinimum(context);
                    }
                  } else {
                    controller.animateToHalf(context);
                  }
                }),
          ))
    ]);
  }

  _showBottomSheet(BuildContext context) {
    showBottomSheet<void>(context: context, builder: _bottomSheetBuilder).closed.whenComplete(() {
      if (mounted) {
        setState(() {
          // re-enable the button
          _bottomSheetActive = false;
        });
      }
    });
  }
}
You can’t perform that action at this time.