bottom_draggable_drawer
A flutter draggable drawer
Getting Started
class TestPage extends StatelessWidget { final BottomDraggableDrawerController controller = BottomDraggableDrawerController(); @override Widget build(BuildContext context) { return Scaffold( appBar: CupertinoNavigationBar( middle: Text('Drawer Example'), trailing: GestureDetector( onTap: () { controller.switchDrawerStatus(); }, child: Text('switch')), ), body: Stack( children: <Widget>[ Center( child: Container( height: 100, width: 300, child: Text('this is your main body!', style: TextStyle(fontSize: 30)), ), ), ///this is your drawer,wrapped with a Positioned widget Positioned( bottom: 0, child: BottomDraggableDrawer( controller: controller, draggableHeader: _buildHeader(), content: _buildContent(), maxOffsetDistance: ScreenUtil.screenHeightDp * 0.16, originalOffset: ScreenUtil.screenHeightDp * 0.85, ), ) ], ), ); } Widget _buildHeader() { return Container( height: ScreenUtil().setHeight(90), width: ScreenUtil.screenWidthDp, decoration: BoxDecoration( color: Colors.grey[200], borderRadius: BorderRadius.only( topLeft: Radius.circular(10), topRight: Radius.circular(10), ), ), child: Container( margin: EdgeInsets.only(top: ScreenUtil().setHeight(10)), child: Center( child: Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(10), color: Colors.grey, ), height: ScreenUtil().setHeight(10), width: ScreenUtil().setWidth(100), ), ), ), ); } Widget _buildContent() { return Container( height: ScreenUtil.screenHeightDp * 0.9, width: ScreenUtil.screenWidthDp, color: Colors.white, child: ListView.builder( itemCount: 30, itemBuilder: (ctx, index) { return Padding( padding: const EdgeInsets.all(12.0), child: Text('this is item $index', style: TextStyle(fontSize: 24)), ); }), ); } }
params:
- double originalOffset:The distance to top when Closed(required)
- double minOffsetDistance:The distance to top when open(required)
- Widget draggableHeader: The widget that you can drag(required)
- Widget content: Content widget(required)
- int animationDuration: Animation duration
- ValueChanged onOpened; A callback that you can know the drawer is open or closed
- BottomDraggableDrawerController controller: The drawer controller
Download flutter draggable drawer source code on GitHub
https://github.com/luckysmg/bottom_draggable_drawer
Provides the list of the opensource Flutter apps collection with GitHub repository.