relese : v2.1.0

- Code refactor
- added plugin document image file
master
NikhilVadoliya 3 years ago
parent f35d1fa1db
commit e6d2ed9ff7

@ -5,7 +5,7 @@
A Flutter package with custom implementation of the Slider Drawer Menu A Flutter package with custom implementation of the Slider Drawer Menu
![Plugin example demo](demo.gif) ![Plugin example demo](demo.gif)![Plugin example demo](slider_2.gif)
@ -24,7 +24,7 @@ dependencies:
# Features # Features
- Slider with custom animation time - Slider with custom animation time
- Provide Basic Appbar with customization of color, sizes and title - Provide Basic Appbar with customization of color, size and title
- Dynamic slider open and close offset - Dynamic slider open and close offset
- Provide drawer icon animation - Provide drawer icon animation
- Provide shadow of Main screen with customization of shadow colors,blurRadius and spreadRadius - Provide shadow of Main screen with customization of shadow colors,blurRadius and spreadRadius
@ -33,26 +33,21 @@ dependencies:
# Code # Code
``` ```
return SliderMenuContainer( Scaffold(
appBarColor: Colors.white, body: SliderDrawer(
key: _key, key: _key,
sliderMenuOpenSize: 200, appBar: SliderAppBar(
title: Text( appBarColor: Colors.white,
title, title: Text(title,
style: TextStyle(fontSize: 22, fontWeight: FontWeight.w700), style: const TextStyle(
), fontSize: 22, fontWeight: FontWeight.w700))),
sliderMenu: MenuWidget( slider: Container(color: Colors.red),
onItemClick: (title) { child: Container(color: Colors.amber),
_key.currentState.closeDrawer(); ))
setState(() {
this.title = title;
});
},
),
sliderMain: MainWidget());
``` ```
![slider_document](slider_d_1.png)
![slider_document](slider_d_2.png)
# Slider open # Slider open
@ -67,28 +62,26 @@ dependencies:
### Controlling the drawer ### Controlling the drawer
``` ```
GlobalKey<SliderMenuContainerState> _key = GlobalKey<SliderDrawerState> _key =
new GlobalKey<SliderMenuContainerState>(); new GlobalKey<SliderDrawerState>();
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return SliderMenuContainer( return Scaffold(
appBarColor: Colors.white, body: SliderDrawer(
key: _key, key: _key,
sliderMenuOpenSize: 200, appBar: SliderAppBar(
sliderMenu: MenuWidget( appBarColor: Colors.white,
onItemClick: (title) { title: Text(title,
_key.currentState.closeDrawer(); style: const TextStyle(
setState(() { fontSize: 22, fontWeight: FontWeight.w700))),
this.title = title; slider: Container(color: Colors.red),
}); child: Container(color: Colors.amber),
}, )),
),
sliderMain: MainWidget()),
``` ```
* Using the below methods for controll drawer . * Using the below methods to control drawer .
``` ```
_key.currentState.closeDrawer(); _key.currentState.closeDrawer();
_key.currentState.openDrawer(); _key.currentState.openDrawer();
@ -96,7 +89,7 @@ GlobalKey<SliderMenuContainerState> _key =
_key.currentState.isDrawerOpen(); _key.currentState.isDrawerOpen();
``` ```
* Use below variable if you want to controlle animation. * Use below variable if you want to control animation.
``` _key.currentState.animationController``` ``` _key.currentState.animationController```
@ -105,4 +98,3 @@ License
---- ----
BSD 2-Clause License BSD 2-Clause License

@ -1,7 +0,0 @@
import 'package:flutter/material.dart';
class ColoursHelper {
static Color blue() => Color(0xff5e6ceb);
static Color blueDark() => Color(0xff4D5DFB);
}

@ -1,9 +1,6 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_slider_drawer/flutter_slider_drawer.dart'; import 'package:flutter_slider_drawer/flutter_slider_drawer.dart';
import 'main_widget.dart';
import 'menu_widget.dart';
void main() { void main() {
runApp(MyApp()); runApp(MyApp());
} }
@ -14,8 +11,7 @@ class MyApp extends StatefulWidget {
} }
class _MyAppState extends State<MyApp> { class _MyAppState extends State<MyApp> {
GlobalKey<SliderMenuContainerState> _key = GlobalKey<SliderDrawerState> _key = GlobalKey<SliderDrawerState>();
new GlobalKey<SliderMenuContainerState>();
late String title; late String title;
@override @override
@ -29,24 +25,193 @@ class _MyAppState extends State<MyApp> {
return MaterialApp( return MaterialApp(
debugShowCheckedModeBanner: false, debugShowCheckedModeBanner: false,
home: Scaffold( home: Scaffold(
body: SliderMenuContainer( body: SliderDrawer(
appBarColor: Colors.white, appBar: SliderAppBar(
appBarColor: Colors.white,
title: Text(title,
style: const TextStyle(
fontSize: 22, fontWeight: FontWeight.w700))),
key: _key, key: _key,
sliderMenuOpenSize: 200, sliderOpenSize: 179,
title: Text( slider: _SliderView(
title,
style: TextStyle(fontSize: 22, fontWeight: FontWeight.w700),
),
sliderMenu: MenuWidget(
onItemClick: (title) { onItemClick: (title) {
_key.currentState!.closeDrawer(); _key.currentState!.closeSlider();
setState(() { setState(() {
this.title = title; this.title = title;
}); });
}, },
), ),
sliderMain: MainWidget()), child: _AuthorList()),
),
);
}
}
class _SliderView extends StatelessWidget {
final Function(String)? onItemClick;
const _SliderView({Key? key, this.onItemClick}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
padding: const EdgeInsets.only(top: 30),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 30,
),
CircleAvatar(
radius: 65,
backgroundColor: Colors.grey,
child: CircleAvatar(
radius: 60,
backgroundImage: AssetImage('assets/images/user_profile.jpg'),
),
),
SizedBox(
height: 20,
),
Text(
'Nick',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 30,
fontFamily: 'BalsamiqSans'),
),
SizedBox(
height: 20,
),
_SliderMenuItem(
title: 'Home', iconData: Icons.home, onTap: onItemClick),
_SliderMenuItem(
title: 'Add Post',
iconData: Icons.add_circle,
onTap: onItemClick),
_SliderMenuItem(
title: 'Notification',
iconData: Icons.notifications_active,
onTap: onItemClick),
_SliderMenuItem(
title: 'Likes', iconData: Icons.favorite, onTap: onItemClick),
_SliderMenuItem(
title: 'Setting', iconData: Icons.settings, onTap: onItemClick),
_SliderMenuItem(
title: 'LogOut',
iconData: Icons.arrow_back_ios,
onTap: onItemClick),
],
), ),
); );
} }
} }
class _SliderMenuItem extends StatelessWidget {
final String title;
final IconData iconData;
final Function(String)? onTap;
const _SliderMenuItem(
{Key? key,
required this.title,
required this.iconData,
required this.onTap})
: super(key: key);
@override
Widget build(BuildContext context) {
return ListTile(
title: Text(title,
style: TextStyle(
color: Colors.black, fontFamily: 'BalsamiqSans_Regular')),
leading: Icon(iconData, color: Colors.black),
onTap: () => onTap?.call(title));
}
}
class _AuthorList extends StatelessWidget {
@override
Widget build(BuildContext context) {
List<Data> dataList = [];
dataList.add(Data(Colors.amber, 'Amelia Brown',
'Life would be a great deal easier if dead things had the decency to remain dead.'));
dataList.add(Data(Colors.orange, 'Olivia Smith',
'That proves you are unusual," returned the Scarecrow'));
dataList.add(Data(Colors.deepOrange, 'Sophia Jones',
'Her name badge read: Hello! My name is DIE, DEMIGOD SCUM!'));
dataList.add(Data(Colors.red, 'Isabella Johnson',
'I am about as intimidating as a butterfly.'));
dataList.add(Data(Colors.purple, 'Emily Taylor',
'Never ask an elf for help; they might decide your better off dead, eh?'));
dataList.add(Data(Colors.green, 'Maya Thomas', 'Act first, explain later'));
return Container(
padding: const EdgeInsets.symmetric(horizontal: 10),
child: ListView.separated(
scrollDirection: Axis.vertical,
// physics: BouncingScrollPhysics(),
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
itemBuilder: (builder, index) {
return LimitedBox(
maxHeight: 150,
child: Container(
decoration: new BoxDecoration(
color: dataList[index].color,
borderRadius: new BorderRadius.all(
const Radius.circular(10.0),
)),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(12),
child: Text(
dataList[index].name,
style: TextStyle(
fontFamily: 'BalsamiqSans_Blod',
fontSize: 30,
color: Colors.white),
),
),
Padding(
padding: const EdgeInsets.all(10),
child: Text(
dataList[index].detail,
style: TextStyle(
fontFamily: 'BalsamiqSans_Regular',
fontSize: 15,
color: Colors.white),
),
)
],
),
),
);
},
separatorBuilder: (builder, index) {
return Divider(
height: 10,
thickness: 0,
);
},
itemCount: dataList.length),
);
}
}
class Data {
MaterialColor color;
String name;
String detail;
Data(this.color, this.name, this.detail);
}
class ColoursHelper {
static Color blue() => Color(0xff5e6ceb);
static Color blueDark() => Color(0xff4D5DFB);
}

@ -1,90 +0,0 @@
import 'package:flutter/material.dart';
class MainWidget extends StatefulWidget {
@override
_MainWidgetState createState() => _MainWidgetState();
}
class _MainWidgetState extends State<MainWidget> {
List<Data> dataList = [];
@override
void initState() {
super.initState();
dataList.add(Data(Colors.amber, 'Amelia Brown',
'Life would be a great deal easier if dead things had the decency to remain dead.'));
dataList.add(Data(Colors.orange, 'Olivia Smith',
'That proves you are unusual," returned the Scarecrow'));
dataList.add(Data(Colors.deepOrange, 'Sophia Jones',
'Her name badge read: Hello! My name is DIE, DEMIGOD SCUM!'));
dataList.add(Data(Colors.red, 'Isabella Johnson',
'I am about as intimidating as a butterfly.'));
dataList.add(Data(Colors.purple, 'Emily Taylor',
'Never ask an elf for help; they might decide your better off dead, eh?'));
dataList.add(Data(Colors.green, 'Maya Thomas', 'Act first, explain later'));
}
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.all(20),
child: ListView.separated(
scrollDirection: Axis.vertical,
// physics: BouncingScrollPhysics(),
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
itemBuilder: (builder, index) {
return LimitedBox(
maxHeight: 150,
child: Container(
decoration: new BoxDecoration(
color: dataList[index].color,
borderRadius: new BorderRadius.all(
const Radius.circular(10.0),
)),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(12),
child: Text(
dataList[index].name,
style: TextStyle(
fontFamily: 'BalsamiqSans_Blod',
fontSize: 30,
color: Colors.white),
),
),
Padding(
padding: const EdgeInsets.all(10),
child: Text(
dataList[index].detail,
style: TextStyle(
fontFamily: 'BalsamiqSans_Regular',
fontSize: 15,
color: Colors.white),
),
)
],
),
),
);
},
separatorBuilder: (builder, index) {
return Divider(
height: 10,
thickness: 0,
);
},
itemCount: dataList.length),
);
}
}
class Data {
MaterialColor color;
String name;
String detail;
Data(this.color, this.name, this.detail);
}

@ -1,65 +0,0 @@
import 'package:flutter/material.dart';
class MenuWidget extends StatelessWidget {
final Function(String)? onItemClick;
const MenuWidget({Key? key, this.onItemClick}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
padding: const EdgeInsets.only(top: 30),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 30,
),
CircleAvatar(
radius: 65,
backgroundColor: Colors.grey,
child: CircleAvatar(
radius: 60,
backgroundImage: AssetImage('assets/images/user_profile.jpg'),
),
),
SizedBox(
height: 20,
),
Text(
'Nick',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 30,
fontFamily: 'BalsamiqSans'),
),
SizedBox(
height: 20,
),
sliderItem('Home', Icons.home),
sliderItem('Add Post', Icons.add_circle),
sliderItem('Notification', Icons.notifications_active),
sliderItem('Likes', Icons.favorite),
sliderItem('Setting', Icons.settings),
sliderItem('LogOut', Icons.arrow_back_ios)
],
),
);
}
Widget sliderItem(String title, IconData icons) => ListTile(
title: Text(
title,
style:
TextStyle(color: Colors.black, fontFamily: 'BalsamiqSans_Regular'),
),
leading: Icon(
icons,
color: Colors.black,
),
onTap: () {
onItemClick!(title);
});
}

@ -2,3 +2,5 @@ library flutter_slider_drawer;
export 'package:flutter_slider_drawer/src/slider_direction.dart'; export 'package:flutter_slider_drawer/src/slider_direction.dart';
export 'package:flutter_slider_drawer/src/slider.dart'; export 'package:flutter_slider_drawer/src/slider.dart';
export 'package:flutter_slider_drawer/src/helper/slider_shadow.dart';
export 'package:flutter_slider_drawer/src/helper/slider_app_bar.dart';

@ -1,44 +1,37 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_slider_drawer/flutter_slider_drawer.dart';
import 'package:flutter_slider_drawer/src/helper/slider_app_bar.dart';
import 'package:flutter_slider_drawer/src/slider_direction.dart'; import 'package:flutter_slider_drawer/src/slider_direction.dart';
class SliderAppBar extends StatelessWidget { class SAppBar extends StatelessWidget {
final EdgeInsets appBarPadding;
final Color appBarColor;
final Widget? drawerIcon; final Widget? drawerIcon;
final Color splashColor; final Color splashColor;
final Color drawerIconColor; final Color drawerIconColor;
final double drawerIconSize; final double drawerIconSize;
final double appBarHeight;
final AnimationController animationController; final AnimationController animationController;
final VoidCallback onTap; final VoidCallback onTap;
final Widget title;
final bool isTitleCenter;
final Widget? trailing;
final SlideDirection slideDirection; final SlideDirection slideDirection;
const SliderAppBar( final SliderAppBar sliderAppBar;
const SAppBar(
{Key? key, {Key? key,
this.appBarPadding = const EdgeInsets.only(top: 24),
this.appBarColor = Colors.blue,
this.drawerIcon, this.drawerIcon,
this.splashColor = Colors.black, this.splashColor = Colors.black,
this.drawerIconColor = Colors.black87, this.drawerIconColor = Colors.black87,
this.drawerIconSize = 27, this.drawerIconSize = 27,
required this.animationController, required this.animationController,
required this.onTap, required this.onTap,
required this.title,
required this.isTitleCenter,
this.trailing,
required this.slideDirection, required this.slideDirection,
required this.appBarHeight}) required this.sliderAppBar})
: super(key: key); : super(key: key);
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Container( return Container(
height: appBarHeight, height: sliderAppBar.appBarHeight,
padding: appBarPadding, padding: sliderAppBar.appBarPadding,
color: appBarColor, color: sliderAppBar.appBarColor,
child: Row( child: Row(
children: appBar(), children: appBar(),
), ),
@ -57,13 +50,13 @@ class SliderAppBar extends StatelessWidget {
progress: animationController), progress: animationController),
onPressed: () => onTap()), onPressed: () => onTap()),
Expanded( Expanded(
child: isTitleCenter child: sliderAppBar.isTitleCenter
? Center( ? Center(
child: title, child: sliderAppBar.title,
) )
: title, : sliderAppBar.title,
), ),
trailing ?? sliderAppBar.trailing ??
SizedBox( SizedBox(
width: 35, width: 35,
) )

@ -0,0 +1,52 @@
import 'package:flutter/material.dart';
class SliderAppBar {
/// [double] you can change appBar height by this parameter [appBarHeight]
///
final double appBarHeight;
/// [Widget] you can set appbar title by this parameter [title]
///
final Widget title;
///[bool] you can set title in center by this parameter
/// By default it's [true]
///
final bool isTitleCenter;
///[Color] you can change appbar color by this parameter [appBarColor]
///
final Color appBarColor;
///[EdgeInsets] you can change appBarPadding by this parameter [appBarPadding]
///
final EdgeInsets? appBarPadding;
///[Widget] you can set trailing of appbar by this parameter [trailing]
///
final Widget? trailing;
///[Color] you can change drawer icon by this parameter [drawerIconColor]
///
final Color drawerIconColor;
///[Widget] you can change drawer icon by this parameter [drawerIcon]
///
final Widget? drawerIcon;
///[double] you can change drawer icon size by this parameter [drawerIconSize]
///
final double drawerIconSize;
const SliderAppBar({
this.appBarHeight = 70,
this.title = const Text('AppBar'),
this.isTitleCenter = true,
this.appBarColor = Colors.white,
this.appBarPadding = const EdgeInsets.only(top: 24),
this.trailing,
this.drawerIconColor = Colors.black,
this.drawerIcon,
this.drawerIconSize = 27,
});
}

@ -0,0 +1,20 @@
import 'dart:ui';
import 'package:flutter/material.dart';
class SliderShadow {
final Color shadowColor;
///[double] you can change blurRadius of shadow by this parameter [shadowBlurRadius]
///
final double shadowBlurRadius;
///[double] you can change spreadRadius of shadow by this parameter [shadowSpreadRadius]
///
final double shadowSpreadRadius;
SliderShadow(
{this.shadowColor = Colors.grey,
this.shadowBlurRadius = 25.0,
this.shadowSpreadRadius = 5.0});
}

@ -1,76 +1,68 @@
import 'package:flutter/animation.dart'; import 'package:flutter/animation.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_slider_drawer/src/app_bar.dart'; import 'package:flutter_slider_drawer/src/app_bar.dart';
import 'package:flutter_slider_drawer/src/menu_bar.dart'; import 'package:flutter_slider_drawer/src/helper/slider_app_bar.dart';
import 'package:flutter_slider_drawer/src/helper/slider_shadow.dart';
import 'package:flutter_slider_drawer/src/slider_bar.dart';
import 'package:flutter_slider_drawer/src/helper/utils.dart'; import 'package:flutter_slider_drawer/src/helper/utils.dart';
import 'package:flutter_slider_drawer/src/slider_direction.dart'; import 'package:flutter_slider_drawer/src/slider_direction.dart';
/// SliderMenuContainer which have two [sliderMain] and [sliderMenu] parameter /// SliderDrawer which have two [child] and [slider] parameter
/// ///
///For Example : ///For Example :
/// ///
/// SliderMenuContainer( /// Scaffold(
/// appBarColor: Colors.white, /// body: SliderDrawer(
/// sliderMenuOpenSize: 200, /// appBar: SliderAppBar(
/// title: Text( /// appBarColor: Colors.white,
/// title, /// title: Text(title,
/// style: TextStyle(fontSize: 22, fontWeight: FontWeight.w700), /// style: const TextStyle(
/// ), /// fontSize: 22, fontWeight: FontWeight.w700))),
/// sliderMenu: MenuWidget( /// key: _key,
/// sliderOpenSize: 200,
/// slider: SliderView(
/// onItemClick: (title) { /// onItemClick: (title) {
/// _key.currentState.closeDrawer(); /// _key.currentState!.closeSlider();
/// setState(() { /// setState(() {
/// this.title = title; /// this.title = title;
/// }); /// });
/// }, /// },
/// ), /// ),
/// sliderMain: MainWidget()) /// child: AuthorList()),
/// /// )
/// ///
/// ///
class SliderMenuContainer extends StatefulWidget { class SliderDrawer extends StatefulWidget {
/// [Widget] which display when user open drawer /// [Widget] which display when user open drawer
/// ///
final Widget sliderMenu; final Widget slider;
/// [Widget] main screen widget /// [Widget] main screen widget
/// ///
final Widget sliderMain; final Widget child;
/// [int] you can changes sliderDrawer open/close animation times with this [animationDuration] /// [int] you can changes sliderDrawer open/close animation times with this [animationDuration]
/// parameter /// parameter
/// ///
final int animationDuration; final int animationDuration;
/// [double] you can change open drawer size by this parameter [sliderMenuOpenSize] /// [double] you can change open drawer size by this parameter [sliderOpenSize]
/// ///
final double sliderMenuOpenSize; final double sliderOpenSize;
///[double] you can change close drawer size by this parameter [sliderMenuCloseSize] ///[double] you can change close drawer size by this parameter [sliderCloseSize]
/// by Default it is 0. if you set 30 then drawer will not close full it will display 30 size of width always /// by Default it is 0. if you set 30 then drawer will not close full it will display 30 size of width always
/// ///
final double sliderMenuCloseSize; final double sliderCloseSize;
///[bool] if you set [false] then swipe to open feature disable. ///[bool] if you set [false] then swipe to open feature disable.
///By Default it's true ///By Default it's true
/// ///
final bool isDraggable; final bool isDraggable;
///[bool] if you set [false] then it will not display app bar ///[appBar] if you set [null] then it will not display app bar
///
final bool hasAppBar;
///[Color] you can change drawer icon by this parameter [drawerIconColor]
///
final Color drawerIconColor;
///[Widget] you can change drawer icon by this parameter [drawerIcon]
/// ///
final Widget? drawerIcon; final SliderAppBar? appBar;
///[double] you can change drawer icon size by this parameter [drawerIconSize]
///
final double drawerIconSize;
/// The primary color of the button when the drawer button is in the down (pressed) state. /// The primary color of the button when the drawer button is in the down (pressed) state.
/// The splash is represented as a circular overlay that appears above the /// The splash is represented as a circular overlay that appears above the
@ -83,47 +75,8 @@ class SliderMenuContainer extends StatefulWidget {
/// ///
final Color splashColor; final Color splashColor;
/// [double] you can change appBar height by this parameter [appBarHeight] ///[SliderShadow] you can enable shadow of [child] Widget by this parameter
/// final SliderShadow? sliderShadow;
final double appBarHeight;
/// [Widget] you can set appbar title by this parameter [title]
///
final Widget title;
///[bool] you can set title in center by this parameter
/// By default it's [true]
///
final bool isTitleCenter;
///[bool] you can enable shadow of [sliderMain] Widget by this parameter
///By default it's [false]
///
final bool isShadow;
///[Color] you can change shadow color by this parameter [shadowColor]
///
final Color shadowColor;
///[double] you can change blurRadius of shadow by this parameter [shadowBlurRadius]
///
final double shadowBlurRadius;
///[double] you can change spreadRadius of shadow by this parameter [shadowSpreadRadius]
///
final double shadowSpreadRadius;
///[Widget] you can set trailing of appbar by this parameter [trailing]
///
final Widget? trailing;
///[Color] you can change appbar color by this parameter [appBarColor]
///
final Color appBarColor;
///[EdgeInsets] you can change appBarPadding by this parameter [appBarPadding]
///
final EdgeInsets? appBarPadding;
///[slideDirection] you can change slide direction by this parameter [slideDirection] ///[slideDirection] you can change slide direction by this parameter [slideDirection]
///There are three type of [SlideDirection] ///There are three type of [SlideDirection]
@ -135,50 +88,35 @@ class SliderMenuContainer extends StatefulWidget {
/// ///
final SlideDirection slideDirection; final SlideDirection slideDirection;
const SliderMenuContainer({ const SliderDrawer({
Key? key, Key? key,
required this.sliderMenu, required this.slider,
required this.sliderMain, required this.child,
this.isDraggable = true, this.isDraggable = true,
this.animationDuration = 200, this.animationDuration = 400,
this.sliderMenuOpenSize = 265, this.sliderOpenSize = 265,
this.drawerIconColor = Colors.black,
this.drawerIcon,
this.splashColor = Colors.transparent, this.splashColor = Colors.transparent,
this.isTitleCenter = true, this.sliderCloseSize = 0,
this.trailing,
this.appBarColor = Colors.white,
this.appBarPadding = const EdgeInsets.only(top: 24),
this.title = const Text('AppBar'),
this.drawerIconSize = 27,
this.appBarHeight = 70,
this.sliderMenuCloseSize = 0,
this.slideDirection = SlideDirection.LEFT_TO_RIGHT, this.slideDirection = SlideDirection.LEFT_TO_RIGHT,
this.isShadow = false, this.sliderShadow,
this.shadowColor = Colors.grey, this.appBar = const SliderAppBar(),
this.shadowBlurRadius = 25.0,
this.shadowSpreadRadius = 5.0,
this.hasAppBar = true,
}) : super(key: key); }) : super(key: key);
@override @override
SliderMenuContainerState createState() => SliderMenuContainerState(); SliderDrawerState createState() => SliderDrawerState();
} }
class SliderMenuContainerState extends State<SliderMenuContainer> class SliderDrawerState extends State<SliderDrawer>
with TickerProviderStateMixin { with TickerProviderStateMixin {
static const double WIDTH_GESTURE = 50.0; static const double WIDTH_GESTURE = 50.0;
static const double HEIGHT_GESTURE = 30.0; static const double HEIGHT_GESTURE = 30.0;
static const double BLUR_SHADOW = 20.0; static const double BLUR_SHADOW = 20.0;
double slideAmount = 0.0;
double _percent = 0.0; double _percent = 0.0;
AnimationController? _animationDrawerController; AnimationController? _animationDrawerController;
late Animation animation; late Animation _animation;
bool dragging = false;
Widget? drawerIcon; bool _isDragging = false;
/// check whether drawer is open /// check whether drawer is open
bool get isDrawerOpen => _animationDrawerController!.isCompleted; bool get isDrawerOpen => _animationDrawerController!.isCompleted;
@ -191,11 +129,11 @@ class SliderMenuContainerState extends State<SliderMenuContainer>
? _animationDrawerController!.reverse() ? _animationDrawerController!.reverse()
: _animationDrawerController!.forward(); : _animationDrawerController!.forward();
/// Open drawer /// Open slider
void openDrawer() => _animationDrawerController!.forward(); void openSlider() => _animationDrawerController!.forward();
/// Close drawer /// Close slider
void closeDrawer() => _animationDrawerController!.reverse(); void closeSlider() => _animationDrawerController!.reverse();
@override @override
void initState() { void initState() {
@ -205,12 +143,12 @@ class SliderMenuContainerState extends State<SliderMenuContainer>
vsync: this, vsync: this,
duration: Duration(milliseconds: widget.animationDuration)); duration: Duration(milliseconds: widget.animationDuration));
animation = Tween<double>( _animation =
begin: widget.sliderMenuCloseSize, end: widget.sliderMenuOpenSize) Tween<double>(begin: widget.sliderCloseSize, end: widget.sliderOpenSize)
.animate(CurvedAnimation( .animate(CurvedAnimation(
parent: _animationDrawerController!, parent: _animationDrawerController!,
curve: Curves.easeIn, curve: Curves.decelerate,
reverseCurve: Curves.easeOut)); reverseCurve: Curves.decelerate));
} }
@override @override
@ -218,51 +156,31 @@ class SliderMenuContainerState extends State<SliderMenuContainer>
return LayoutBuilder(builder: (context, constrain) { return LayoutBuilder(builder: (context, constrain) {
return Container( return Container(
child: Stack(children: <Widget>[ child: Stack(children: <Widget>[
/// Display Menu /// Menu
SlideMenuBar( SliderBar(
slideDirection: widget.slideDirection, slideDirection: widget.slideDirection,
sliderMenu: widget.sliderMenu, sliderMenu: widget.slider,
sliderMenuOpenSize: widget.sliderMenuOpenSize, sliderMenuOpenSize: widget.sliderOpenSize,
), ),
/// Displaying the shadow /// Displaying the shadow
if (widget.isShadow) ...[ if (widget.sliderShadow != null) ...[
AnimatedBuilder( _Shadow(
animation: _animationDrawerController!, animationDrawerController: _animationDrawerController,
builder: (_, child) { slideDirection: widget.slideDirection,
return Transform.translate( sliderOpenSize: widget.sliderOpenSize,
offset: Utils.getOffsetValueForShadow(widget.slideDirection, animation: _animation,
animation.value, widget.sliderMenuOpenSize), sliderShadow: widget.sliderShadow!,
child: 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 //Child
AnimatedBuilder( AnimatedBuilder(
animation: _animationDrawerController!, animation: _animationDrawerController!,
builder: (_, child) { builder: (_, child) {
return Transform.translate( return Transform.translate(
offset: offset: Utils.getOffsetValues(
Utils.getOffsetValues(widget.slideDirection, animation.value), widget.slideDirection, _animation.value),
child: child, child: child,
); );
}, },
@ -275,26 +193,21 @@ class SliderMenuContainerState extends State<SliderMenuContainer>
child: Container( child: Container(
width: double.infinity, width: double.infinity,
height: double.infinity, height: double.infinity,
color: widget.appBarColor, color: widget.appBar?.appBarColor ?? Colors.transparent,
child: Column( child: Column(
children: <Widget>[ children: <Widget>[
if (widget.hasAppBar) if (widget.appBar != null)
SliderAppBar( SAppBar(
slideDirection: widget.slideDirection, slideDirection: widget.slideDirection,
onTap: () => toggle(), onTap: () => toggle(),
appBarHeight: widget.appBarHeight,
animationController: _animationDrawerController!, animationController: _animationDrawerController!,
appBarColor: widget.appBarColor, drawerIcon: widget.appBar!.drawerIcon,
appBarPadding: widget.appBarPadding!, drawerIconColor: widget.appBar!.drawerIconColor,
drawerIcon: widget.drawerIcon, drawerIconSize: widget.appBar!.drawerIconSize,
drawerIconColor: widget.drawerIconColor,
drawerIconSize: widget.drawerIconSize,
isTitleCenter: widget.isTitleCenter,
splashColor: widget.splashColor, splashColor: widget.splashColor,
title: widget.title, sliderAppBar: widget.appBar!,
trailing: widget.trailing,
), ),
Expanded(child: widget.sliderMain), Expanded(child: widget.child),
], ],
), ),
), ),
@ -322,24 +235,24 @@ class SliderMenuContainerState extends State<SliderMenuContainer>
detail.localPosition.dy <= widget.appBarHeight*/ detail.localPosition.dy <= widget.appBarHeight*/
) { ) {
this.setState(() { this.setState(() {
dragging = true; _isDragging = true;
}); });
} }
//Check use start dragging from top edge / bottom edge then enable dragging //Check use start dragging from top edge / bottom edge then enable dragging
if (widget.slideDirection == SlideDirection.TOP_TO_BOTTOM && if (widget.slideDirection == SlideDirection.TOP_TO_BOTTOM &&
detail.localPosition.dy >= HEIGHT_GESTURE) { detail.localPosition.dy >= HEIGHT_GESTURE) {
this.setState(() { this.setState(() {
dragging = true; _isDragging = true;
}); });
} }
} }
void _onHorizontalDragEnd(DragEndDetails detail) { void _onHorizontalDragEnd(DragEndDetails detail) {
if (!widget.isDraggable) return; if (!widget.isDraggable) return;
if (dragging) { if (_isDragging) {
openOrClose(); openOrClose();
setState(() { setState(() {
dragging = false; _isDragging = false;
}); });
} }
} }
@ -350,7 +263,7 @@ class SliderMenuContainerState extends State<SliderMenuContainer>
) { ) {
if (!widget.isDraggable) return; if (!widget.isDraggable) return;
// open drawer for left/right type drawer // open drawer for left/right type drawer
if (dragging && widget.slideDirection == SlideDirection.LEFT_TO_RIGHT || if (_isDragging && widget.slideDirection == SlideDirection.LEFT_TO_RIGHT ||
widget.slideDirection == SlideDirection.RIGHT_TO_LEFT) { widget.slideDirection == SlideDirection.RIGHT_TO_LEFT) {
var globalPosition = detail.globalPosition.dx; var globalPosition = detail.globalPosition.dx;
globalPosition = globalPosition < 0 ? 0 : globalPosition; globalPosition = globalPosition < 0 ? 0 : globalPosition;
@ -376,7 +289,7 @@ class SliderMenuContainerState extends State<SliderMenuContainer>
(widget.slideDirection == SlideDirection.LEFT_TO_RIGHT || (widget.slideDirection == SlideDirection.LEFT_TO_RIGHT ||
widget.slideDirection == SlideDirection.RIGHT_TO_LEFT) && widget.slideDirection == SlideDirection.RIGHT_TO_LEFT) &&
detail.delta.dx < 15) { detail.delta.dx < 15) {
closeDrawer(); closeSlider();
} }
} }
@ -388,9 +301,58 @@ class SliderMenuContainerState extends State<SliderMenuContainer>
openOrClose() { openOrClose() {
if (_percent > 0.3) { if (_percent > 0.3) {
openDrawer(); openSlider();
} else { } else {
closeDrawer(); closeSlider();
} }
} }
} }
class _Shadow extends StatelessWidget {
const _Shadow({
Key? key,
required AnimationController? animationDrawerController,
required this.animation,
required this.sliderShadow,
required this.slideDirection,
required this.sliderOpenSize,
}) : _animationDrawerController = animationDrawerController,
super(key: key);
final AnimationController? _animationDrawerController;
final Animation animation;
final SliderShadow sliderShadow;
final SlideDirection slideDirection;
final double sliderOpenSize;
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _animationDrawerController!,
builder: (_, child) {
return Transform.translate(
offset: Utils.getOffsetValueForShadow(
slideDirection, animation.value, sliderOpenSize),
child: child,
);
},
child: Container(
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(shape: BoxShape.rectangle, boxShadow: [
BoxShadow(
color: sliderShadow.shadowColor,
blurRadius: sliderShadow.shadowBlurRadius,
// soften the shadow
spreadRadius: sliderShadow.shadowSpreadRadius,
//extend the shadow
offset: Offset(
15.0, // Move to right 15 horizontally
15.0, // Move to bottom 15 Vertically
),
)
]),
),
);
}
}

@ -4,12 +4,12 @@ import 'package:flutter_slider_drawer/src/slider_direction.dart';
/// ///
/// Build and Align the Menu widget based on the slide open type /// Build and Align the Menu widget based on the slide open type
/// ///
class SlideMenuBar extends StatelessWidget { class SliderBar extends StatelessWidget {
final SlideDirection slideDirection; final SlideDirection slideDirection;
final double sliderMenuOpenSize; final double sliderMenuOpenSize;
final Widget sliderMenu; final Widget sliderMenu;
const SlideMenuBar( const SliderBar(
{Key? key, {Key? key,
required this.slideDirection, required this.slideDirection,
required this.sliderMenuOpenSize, required this.sliderMenuOpenSize,

@ -1,6 +1,6 @@
name: flutter_slider_drawer name: flutter_slider_drawer
description: A Flutter package with custom implementation of the Slider Drawer Menu description: A Flutter package with custom implementation of the Slider Drawer Menu
version: 2.0.0 version: 2.1.0
homepage: https://github.com/NikhilVadoliya/Flutter_slider_drawer homepage: https://github.com/NikhilVadoliya/Flutter_slider_drawer
environment: environment:

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 148 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 137 KiB

Loading…
Cancel
Save