hyperzlib
/
flutter_slider_drawer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

implement swipe gesture in left and right drawer

Browse Source
master
Nikhil Vadoliya 5 years ago
parent bc279be86f
commit d44608ffa1
3 changed files with 199 additions and 91 deletions
Show Stats Download Patch File Download Diff File

42
example/lib/main.dart
Unescape Escape View File

@ -16,7 +16,7 @@ class MyApp extends StatefulWidget {
class _MyAppState extends State<MyApp> { class _MyAppState extends State<MyApp> {
GlobalKey<SliderMenuContainerState> _key = GlobalKey<SliderMenuContainerState> _key =
new GlobalKey<SliderMenuContainerState>(); new GlobalKey<SliderMenuContainerState>();
String title; String title;
@override @override
@ -30,26 +30,26 @@ class _MyAppState extends State<MyApp> {
return MaterialApp( return MaterialApp(
debugShowCheckedModeBanner: false, debugShowCheckedModeBanner: false,
home: Scaffold( home: Scaffold(
body: SliderMenuContainer( body: Padding(
appBarColor: Colors.white, padding: const EdgeInsets.only(top: 0),
key: _key, child: SliderMenuContainer(
appBarPadding: const EdgeInsets.only(top: 20), appBarColor: Colors.white,
sliderMenuOpenSize: 200, key: _key,
sliderMenuCloseSize: 60, sliderMenuOpenSize: 200,
appBarHeight: 60, title: Text(
title: Text( title,
title, style: TextStyle(fontSize: 22, fontWeight: FontWeight.w700),
style: TextStyle(fontSize: 22, fontWeight: FontWeight.w700), ),
), sliderMenu: MenuWidget(
sliderMenu: MenuWidget( onItemClick: (title) {
onItemClick: (title) { _key.currentState.closeDrawer();
_key.currentState.closeDrawer(); setState(() {
setState(() { this.title = title;
this.title = title; });
}); },
}, ),
), sliderMain: MainWidget()),
sliderMain: MainWidget()), ),
), ),
); );
} }

5
example/lib/main_widget.dart
Unescape Escape View File

@ -27,8 +27,11 @@ class _MainWidgetState extends State<MainWidget> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Container( return Container(
margin: const EdgeInsets.all(20),
child: ListView.separated( child: ListView.separated(
padding: const EdgeInsets.symmetric(horizontal: 10), scrollDirection: Axis.vertical,
// physics: BouncingScrollPhysics(),
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
itemBuilder: (builder, index) { itemBuilder: (builder, index) {
return LimitedBox( return LimitedBox(
maxHeight: 150, maxHeight: 150,

243
lib/src/slider.dart
Unescape Escape View File

@ -11,6 +11,7 @@ class SliderMenuContainer extends StatefulWidget {
final int animationDuration; final int animationDuration;
final double sliderMenuOpenSize; final double sliderMenuOpenSize;
final double sliderMenuCloseSize; final double sliderMenuCloseSize;
final bool isDraggable;
final bool hasAppBar; final bool hasAppBar;
final Color drawerIconColor; final Color drawerIconColor;
@ -34,6 +35,7 @@ class SliderMenuContainer extends StatefulWidget {
Key key, Key key,
this.sliderMenu, this.sliderMenu,
this.sliderMain, this.sliderMain,
this.isDraggable = true,
this.animationDuration = 200, this.animationDuration = 200,
this.sliderMenuOpenSize = 265, this.sliderMenuOpenSize = 265,
this.drawerIconColor = Colors.black, this.drawerIconColor = Colors.black,
@ -63,9 +65,17 @@ class SliderMenuContainer extends StatefulWidget {
class SliderMenuContainerState extends State<SliderMenuContainer> class SliderMenuContainerState extends State<SliderMenuContainer>
with TickerProviderStateMixin { with TickerProviderStateMixin {
static const double WIDTH_GESTURE = 50.0;
static const double HEIGHT_GESTURE = 30.0;
static const double BLUR_SHADOW = 20.0;
double slideAmount = 0.0;
double _percent = 0.0;
AnimationController _animationDrawerController; AnimationController _animationDrawerController;
Animation animation; Animation animation;
bool dragging = false;
Widget drawerIcon; Widget drawerIcon;
/// check whether drawer is open /// check whether drawer is open
@ -103,83 +113,94 @@ class SliderMenuContainerState extends State<SliderMenuContainer>
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Container( return LayoutBuilder(builder: (context, constrain) {
child: Stack(children: <Widget>[ return Container(
/// Display Menu child: Stack(children: <Widget>[
SlideMenuBar( /// Display Menu
slideDirection: widget.slideDirection, SlideMenuBar(
sliderMenu: widget.sliderMenu, slideDirection: widget.slideDirection,
sliderMenuOpenSize: widget.sliderMenuOpenSize, sliderMenu: widget.sliderMenu,
), sliderMenuOpenSize: widget.sliderMenuOpenSize,
),
/// Displaying the shadow
if (widget.isShadow) ...[ /// Displaying the shadow
if (widget.isShadow) ...[
AnimatedBuilder(
animation: _animationDrawerController,
builder: (_, child) {
return Transform.translate(
offset: Utils.getOffsetValueForShadow(widget.slideDirection,
animation.value, widget.sliderMenuOpenSize),
child: child,
);
return child;
},
child: Container(
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(shape: BoxShape.rectangle, boxShadow: [
BoxShadow(
color: widget.shadowColor,
blurRadius: widget.shadowBlurRadius,
// soften the shadow
spreadRadius: widget.shadowSpreadRadius,
//extend the shadow
offset: Offset(
15.0, // Move to right 15 horizontally
15.0, // Move to bottom 15 Vertically
),
)
]),
),
),
],
//Display Main Screen
AnimatedBuilder( AnimatedBuilder(
animation: _animationDrawerController, animation: _animationDrawerController,
builder: (anim, child) { builder: (_, child) {
return Transform.translate( return Transform.translate(
offset: Utils.getOffsetValueForShadow(widget.slideDirection, offset:
animation.value, widget.sliderMenuOpenSize), Utils.getOffsetValues(widget.slideDirection, animation.value),
child: child, child: child,
); );
return child;
}, },
child: Container( child: GestureDetector(
width: double.infinity, behavior: HitTestBehavior.deferToChild,
height: double.infinity, onHorizontalDragStart: _onHorizontalDragStart,
decoration: BoxDecoration(shape: BoxShape.rectangle, boxShadow: [ onHorizontalDragEnd: _onHorizontalDragEnd,
BoxShadow( onHorizontalDragUpdate: (detail) =>
color: widget.shadowColor, _onHorizontalDragUpdate(detail, constrain),
blurRadius: widget.shadowBlurRadius, // soften the shadow child: Container(
spreadRadius: widget.shadowSpreadRadius, //extend the shadow width: double.infinity,
offset: Offset( height: double.infinity,
15.0, // Move to right 15 horizontally color: widget.appBarColor,
15.0, // Move to bottom 15 Vertically child: Column(
), children: <Widget>[
) if (widget.hasAppBar)
]), SliderAppBar(
), slideDirection: widget.slideDirection,
), onTap: () => toggle(),
], appBarHeight: widget.appBarHeight,
animationController: _animationDrawerController,
//Display Main Screen appBarColor: widget.appBarColor,
AnimatedBuilder( appBarPadding: widget.appBarPadding,
animation: _animationDrawerController, drawerIcon: widget.drawerIcon,
builder: (anim, child) { drawerIconColor: widget.drawerIconColor,
return Transform.translate( drawerIconSize: widget.drawerIconSize,
offset: isTitleCenter: widget.isTitleCenter,
Utils.getOffsetValues(widget.slideDirection, animation.value), splashColor: widget.splashColor,
child: child, title: widget.title ?? '',
); trailing: widget.trailing,
}, ),
child: Container( Expanded(child: widget.sliderMain),
width: double.infinity, ],
height: double.infinity, ),
color: widget.appBarColor, ),
child: Column(
children: <Widget>[
if (widget.hasAppBar)
SliderAppBar(
slideDirection: widget.slideDirection,
onTap: () => toggle(),
appBarHeight: widget.appBarHeight,
animationController: _animationDrawerController,
appBarColor: widget.appBarColor,
appBarPadding: widget.appBarPadding,
drawerIcon: widget.drawerIcon,
drawerIconColor: widget.drawerIconColor,
drawerIconSize: widget.drawerIconSize,
isTitleCenter: widget.isTitleCenter,
splashColor: widget.splashColor,
title: widget.title ?? '',
trailing: widget.trailing,
),
Expanded(child: widget.sliderMain),
],
), ),
), ),
), ]));
])); });
} }
@override @override
@ -187,4 +208,88 @@ class SliderMenuContainerState extends State<SliderMenuContainer>
super.dispose(); super.dispose();
_animationDrawerController.dispose(); _animationDrawerController.dispose();
} }
void _onHorizontalDragStart(DragStartDetails detail) {
if (!widget.isDraggable) return;
//Check use start dragging from left edge / right edge then enable dragging
if ((widget.slideDirection == SlideDirection.LEFT_TO_RIGHT &&
detail.localPosition.dx <= WIDTH_GESTURE) ||
(widget.slideDirection == SlideDirection.RIGHT_TO_LEFT &&
detail.localPosition.dx >=
WIDTH_GESTURE) /*&&
detail.localPosition.dy <= widget.appBarHeight*/
) {
this.setState(() {
dragging = true;
});
}
//Check use start dragging from top edge / bottom edge then enable dragging
if (widget.slideDirection == SlideDirection.TOP_TO_BOTTOM &&
detail.localPosition.dy >= HEIGHT_GESTURE) {
this.setState(() {
dragging = true;
});
}
}
void _onHorizontalDragEnd(DragEndDetails detail) {
if (!widget.isDraggable) return;
if (dragging) {
openOrClose();
setState(() {
dragging = false;
});
}
}
void _onHorizontalDragUpdate(
DragUpdateDetails detail,
BoxConstraints constraints,
) {
if (!widget.isDraggable) return;
// open drawer for left/right type drawer
if (dragging && widget.slideDirection == SlideDirection.LEFT_TO_RIGHT ||
widget.slideDirection == SlideDirection.RIGHT_TO_LEFT) {
var globalPosition = detail.globalPosition.dx;
globalPosition = globalPosition < 0 ? 0 : globalPosition;
double position = globalPosition / constraints.maxWidth;
var realPosition = widget.slideDirection == SlideDirection.LEFT_TO_RIGHT
? position
: (1 - position);
move(realPosition);
}
// open drawer for top/bottom type drawer
/*if (dragging && widget.slideDirection == SlideDirection.TOP_TO_BOTTOM) {
var globalPosition = detail.globalPosition.dx;
globalPosition = globalPosition < 0 ? 0 : globalPosition;
double position = globalPosition / constraints.maxHeight;
var realPosition = widget.slideDirection == SlideDirection.TOP_TO_BOTTOM
? position
: (1 - position);
move(realPosition);
}*/
// close drawer for left/right type drawer
if (isDrawerOpen &&
(widget.slideDirection == SlideDirection.LEFT_TO_RIGHT ||
widget.slideDirection == SlideDirection.RIGHT_TO_LEFT) &&
detail.delta.dx < 15) {
closeDrawer();
}
}
move(double percent) {
_percent = percent;
_animationDrawerController.value = percent;
_animationDrawerController.notifyListeners();
}
openOrClose() {
if (_percent > 0.3) {
openDrawer();
} else {
closeDrawer();
}
}
} }

Write Preview
Loading…
Cancel
Save