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.

