diff --git a/CHANGELOG.md b/CHANGELOG.md index 9cbab63..2c66a73 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ +## [2.1.2] - Release + * replace `sliderShadow` to `sliderBoxShadow` + * Slider RightToLeft : Gesture area issue fixed + * Fixed issue : #21 and #23 + ## [2.1.1] - Release * Provide custom appBar feature * Slider LeftToRight and RightToLeft issue fixed diff --git a/example/lib/helper/colours.dart b/example/lib/helper/colours.dart index 3f97530..e207d7d 100644 --- a/example/lib/helper/colours.dart +++ b/example/lib/helper/colours.dart @@ -3,7 +3,7 @@ import 'dart:ui'; class Colours { Colours._(); - static Color blue() => const Color(0xff5e6ceb); + static Color blue = const Color(0xff5e6ceb); - static Color blueDark() => const Color(0xff4D5DFB); + static Color blueDark = const Color(0xff4D5DFB); } diff --git a/example/lib/main.dart b/example/lib/main.dart index 5f1144e..8254243 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -2,16 +2,19 @@ import 'package:flutter/material.dart'; import 'package:flutter_slider_drawer/flutter_slider_drawer.dart'; void main() { - runApp(MyApp()); + runApp(const MyApp()); } class MyApp extends StatefulWidget { + const MyApp({Key? key}) : super(key: key); + @override - _MyAppState createState() => _MyAppState(); + MyAppState createState() => MyAppState(); } -class _MyAppState extends State { - GlobalKey _key = GlobalKey(); +class MyAppState extends State { + final GlobalKey _sliderDrawerKey = + GlobalKey(); late String title; @override @@ -23,6 +26,7 @@ class _MyAppState extends State { @override Widget build(BuildContext context) { return MaterialApp( + theme: ThemeData(fontFamily: 'BalsamiqSans'), debugShowCheckedModeBanner: false, home: Scaffold( body: SliderDrawer( @@ -31,11 +35,11 @@ class _MyAppState extends State { title: Text(title, style: const TextStyle( fontSize: 22, fontWeight: FontWeight.w700))), - key: _key, + key: _sliderDrawerKey, sliderOpenSize: 179, slider: _SliderView( onItemClick: (title) { - _key.currentState!.closeSlider(); + _sliderDrawerKey.currentState!.closeSlider(); setState(() { this.title = title; }); @@ -57,10 +61,9 @@ class _SliderView extends StatelessWidget { return Container( color: Colors.white, padding: const EdgeInsets.only(top: 30), - child: Column( - crossAxisAlignment: CrossAxisAlignment.center, + child: ListView( children: [ - SizedBox( + const SizedBox( height: 30, ), CircleAvatar( @@ -68,41 +71,39 @@ class _SliderView extends StatelessWidget { backgroundColor: Colors.grey, child: CircleAvatar( radius: 60, - backgroundImage: AssetImage('assets/images/user_profile.jpg'), + backgroundImage: Image.network( + 'https://nikhilvadoliya.github.io/assets/images/nikhil_1.webp') + .image, ), ), - SizedBox( + const SizedBox( height: 20, ), - Text( + const Text( 'Nick', + textAlign: TextAlign.center, style: TextStyle( - color: Colors.black, - fontWeight: FontWeight.bold, - fontSize: 30, - fontFamily: 'BalsamiqSans'), + color: Colors.black, + fontWeight: FontWeight.bold, + fontSize: 30, + ), ), - SizedBox( + const 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), + ...[ + Menu(Icons.home, 'Home'), + Menu(Icons.add_circle, 'Add Post'), + Menu(Icons.notifications_active, 'Notification'), + Menu(Icons.favorite, 'Likes'), + Menu(Icons.settings, 'Setting'), + Menu(Icons.arrow_back_ios, 'LogOut') + ] + .map((menu) => _SliderMenuItem( + title: menu.title, + iconData: menu.iconData, + onTap: onItemClick)) + .toList(), ], ), ); @@ -125,7 +126,7 @@ class _SliderMenuItem extends StatelessWidget { Widget build(BuildContext context) { return ListTile( title: Text(title, - style: TextStyle( + style: const TextStyle( color: Colors.black, fontFamily: 'BalsamiqSans_Regular')), leading: Icon(iconData, color: Colors.black), onTap: () => onTap?.call(title)); @@ -135,32 +136,33 @@ class _SliderMenuItem extends StatelessWidget { class _AuthorList extends StatelessWidget { @override Widget build(BuildContext context) { - List dataList = []; - dataList.add(Data(Colors.amber, 'Amelia Brown', + List quotesList = []; + quotesList.add(Quotes(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', + quotesList.add(Quotes(Colors.orange, 'Olivia Smith', 'That proves you are unusual," returned the Scarecrow')); - dataList.add(Data(Colors.deepOrange, 'Sophia Jones', + quotesList.add(Quotes(Colors.deepOrange, 'Sophia Jones', 'Her name badge read: Hello! My name is DIE, DEMIGOD SCUM!')); - dataList.add(Data(Colors.red, 'Isabella Johnson', + quotesList.add(Quotes(Colors.red, 'Isabella Johnson', 'I am about as intimidating as a butterfly.')); - dataList.add(Data(Colors.purple, 'Emily Taylor', + quotesList.add(Quotes(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')); + quotesList + .add(Quotes(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), + decoration: BoxDecoration( + color: quotesList[index].color, + borderRadius: const BorderRadius.all( + Radius.circular(10.0), )), child: Column( mainAxisSize: MainAxisSize.min, @@ -169,8 +171,8 @@ class _AuthorList extends StatelessWidget { Padding( padding: const EdgeInsets.all(12), child: Text( - dataList[index].name, - style: TextStyle( + quotesList[index].author, + style: const TextStyle( fontFamily: 'BalsamiqSans_Blod', fontSize: 30, color: Colors.white), @@ -179,8 +181,8 @@ class _AuthorList extends StatelessWidget { Padding( padding: const EdgeInsets.all(10), child: Text( - dataList[index].detail, - style: TextStyle( + quotesList[index].quote, + style: const TextStyle( fontFamily: 'BalsamiqSans_Regular', fontSize: 15, color: Colors.white), @@ -192,26 +194,27 @@ class _AuthorList extends StatelessWidget { ); }, separatorBuilder: (builder, index) { - return Divider( + return const Divider( height: 10, thickness: 0, ); }, - itemCount: dataList.length), + itemCount: quotesList.length), ); } } -class Data { - MaterialColor color; - String name; - String detail; +class Quotes { + final MaterialColor color; + final String author; + final String quote; - Data(this.color, this.name, this.detail); + Quotes(this.color, this.author, this.quote); } -class ColoursHelper { - static Color blue() => Color(0xff5e6ceb); +class Menu { + final IconData iconData; + final String title; - static Color blueDark() => Color(0xff4D5DFB); + Menu(this.iconData, this.title); } diff --git a/lib/src/helper/slider_shadow.dart b/lib/src/helper/slider_shadow.dart index 62a1e4a..8227ac3 100644 --- a/lib/src/helper/slider_shadow.dart +++ b/lib/src/helper/slider_shadow.dart @@ -1,18 +1,18 @@ import 'package:flutter/widgets.dart'; -class SliderShadow { - final Color shadowColor; +class SliderBoxShadow { + final Color color; - ///[double] you can change blurRadius of shadow by this parameter [shadowBlurRadius] + ///[double] you can change blurRadius of shadow by this parameter [blurRadius] /// - final double shadowBlurRadius; + final double blurRadius; - ///[double] you can change spreadRadius of shadow by this parameter [shadowSpreadRadius] + ///[double] you can change spreadRadius of shadow by this parameter [spreadRadius] /// - final double shadowSpreadRadius; + final double spreadRadius; - SliderShadow( - {this.shadowColor = const Color(0xFF9E9E9E), - this.shadowBlurRadius = 25.0, - this.shadowSpreadRadius = 5.0}); + SliderBoxShadow( + {this.color = const Color(0xFF9E9E9E), + this.blurRadius = 25.0, + this.spreadRadius = 5.0}); } diff --git a/lib/src/helper/utils.dart b/lib/src/helper/utils.dart index 75de548..f8f870d 100644 --- a/lib/src/helper/utils.dart +++ b/lib/src/helper/utils.dart @@ -6,6 +6,7 @@ class Utils { /// /// This method get Offset base on [sliderOpen] type /// + Utils._(); static Offset getOffsetValues(SlideDirection direction, double value) { switch (direction) { diff --git a/lib/src/slider.dart b/lib/src/slider.dart index b5da19e..1ac125c 100644 --- a/lib/src/slider.dart +++ b/lib/src/slider.dart @@ -3,6 +3,7 @@ import 'package:flutter_slider_drawer/src/app_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/helper/utils.dart'; +import 'package:flutter_slider_drawer/src/slider_shadow.dart'; import 'package:flutter_slider_drawer/src/slider_bar.dart'; import 'package:flutter_slider_drawer/src/slider_direction.dart'; @@ -74,8 +75,8 @@ class SliderDrawer extends StatefulWidget { /// final Color splashColor; - ///[SliderShadow] you can enable shadow of [child] Widget by this parameter - final SliderShadow? sliderShadow; + ///[SliderBoxShadow] you can enable shadow of [child] Widget by this parameter + final SliderBoxShadow? sliderBoxShadow; ///[slideDirection] you can change slide direction by this parameter [slideDirection] ///There are three type of [SlideDirection] @@ -101,7 +102,7 @@ class SliderDrawer extends StatefulWidget { this.splashColor = const Color(0xffffff), this.sliderCloseSize = 0, this.slideDirection = SlideDirection.LEFT_TO_RIGHT, - this.sliderShadow, + this.sliderBoxShadow, this.appBar = const SliderAppBar(), this.isCupertino = false}) : super(key: key); @@ -117,27 +118,27 @@ class SliderDrawerState extends State static const double BLUR_SHADOW = 20.0; double _percent = 0.0; - AnimationController? _animationDrawerController; + late AnimationController _animationDrawerController; late Animation _animation; bool _isDragging = false; /// check whether drawer is open - bool get isDrawerOpen => _animationDrawerController!.isCompleted; + bool get isDrawerOpen => _animationDrawerController.isCompleted; /// it's provide [animationController] for handle and lister drawer animation - AnimationController? get animationController => _animationDrawerController; + AnimationController get animationController => _animationDrawerController; /// Toggle drawer - void toggle() => _animationDrawerController!.isCompleted - ? _animationDrawerController!.reverse() - : _animationDrawerController!.forward(); + void toggle() => _animationDrawerController.isCompleted + ? _animationDrawerController.reverse() + : _animationDrawerController.forward(); /// Open slider - void openSlider() => _animationDrawerController!.forward(); + void openSlider() => _animationDrawerController.forward(); /// Close slider - void closeSlider() => _animationDrawerController!.reverse(); + void closeSlider() => _animationDrawerController.reverse(); Color _appBarColor = Color(0xffffffff); @override @@ -151,7 +152,7 @@ class SliderDrawerState extends State _animation = Tween(begin: widget.sliderCloseSize, end: widget.sliderOpenSize) .animate(CurvedAnimation( - parent: _animationDrawerController!, + parent: _animationDrawerController, curve: Curves.decelerate, reverseCurve: Curves.decelerate)); if (widget.appBar is SliderAppBar) { @@ -162,29 +163,29 @@ class SliderDrawerState extends State @override Widget build(BuildContext context) { return LayoutBuilder(builder: (context, constrain) { - return Container( - child: Stack(children: [ - /// Menu + return SizedBox( + child: Stack(children: [ + ///Menu SliderBar( slideDirection: widget.slideDirection, sliderMenu: widget.slider, sliderMenuOpenSize: widget.sliderOpenSize, ), - /// Displaying the shadow - if (widget.sliderShadow != null) ...[ - _Shadow( + /// Shadow + if (widget.sliderBoxShadow != null) ...[ + SliderShadow( animationDrawerController: _animationDrawerController, slideDirection: widget.slideDirection, sliderOpenSize: widget.sliderOpenSize, animation: _animation, - sliderShadow: widget.sliderShadow!, + sliderBoxShadow: widget.sliderBoxShadow!, ), ], //Child AnimatedBuilder( - animation: _animationDrawerController!, + animation: _animationDrawerController, builder: (_, child) { return Transform.translate( offset: Utils.getOffsetValues( @@ -193,7 +194,6 @@ class SliderDrawerState extends State ); }, child: GestureDetector( - behavior: HitTestBehavior.deferToChild, onHorizontalDragStart: _onHorizontalDragStart, onHorizontalDragEnd: _onHorizontalDragEnd, onHorizontalDragUpdate: (detail) => @@ -209,7 +209,7 @@ class SliderDrawerState extends State isCupertino: widget.isCupertino, slideDirection: widget.slideDirection, onTap: () => toggle(), - animationController: _animationDrawerController!, + animationController: _animationDrawerController, splashColor: widget.splashColor, sliderAppBar: widget.appBar as SliderAppBar, ), @@ -228,18 +228,19 @@ class SliderDrawerState extends State @override void 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 + final rightSideWidthGesture = + MediaQuery.of(context).size.width - WIDTH_GESTURE; if ((widget.slideDirection == SlideDirection.LEFT_TO_RIGHT && detail.localPosition.dx <= WIDTH_GESTURE) || (widget.slideDirection == SlideDirection.RIGHT_TO_LEFT && detail.localPosition.dx >= - WIDTH_GESTURE) /*&& + rightSideWidthGesture) /*&& detail.localPosition.dy <= widget.appBarHeight*/ ) { this.setState(() { @@ -270,9 +271,10 @@ class SliderDrawerState extends State BoxConstraints constraints, ) { if (!widget.isDraggable) return; - // open drawer for left/right type drawer - if (_isDragging && widget.slideDirection == SlideDirection.LEFT_TO_RIGHT || - widget.slideDirection == SlideDirection.RIGHT_TO_LEFT) { + // Open Drawer : Slider Open -> Left/Right + if (_isDragging && + (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; @@ -281,7 +283,7 @@ class SliderDrawerState extends State : (1 - position); move(realPosition); } - // open drawer for top/bottom type drawer + // Open Drawer : Slider Open -> Top/Bottom /*if (dragging && widget.slideDirection == SlideDirection.TOP_TO_BOTTOM) { var globalPosition = detail.globalPosition.dx; globalPosition = globalPosition < 0 ? 0 : globalPosition; @@ -292,7 +294,7 @@ class SliderDrawerState extends State move(realPosition); }*/ - // close drawer for left/right type drawer + // Close Drawer : Slider Open -> Left/Right if (isDrawerOpen && (widget.slideDirection == SlideDirection.LEFT_TO_RIGHT || widget.slideDirection == SlideDirection.RIGHT_TO_LEFT) && @@ -303,63 +305,8 @@ class SliderDrawerState extends State move(double percent) { _percent = percent; - _animationDrawerController!.value = percent; + _animationDrawerController.value = percent; } - openOrClose() { - if (_percent > 0.3) { - openSlider(); - } else { - 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 - ), - ) - ]), - ), - ); - } + openOrClose() => _percent > 0.3 ? openSlider() : closeSlider(); } diff --git a/lib/src/slider_bar.dart b/lib/src/slider_bar.dart index 1f7e128..0f35ba3 100644 --- a/lib/src/slider_bar.dart +++ b/lib/src/slider_bar.dart @@ -18,10 +18,7 @@ class SliderBar extends StatelessWidget { @override Widget build(BuildContext context) { - var container = Container( - width: sliderMenuOpenSize, - child: sliderMenu, - ); + var container = SizedBox(width: sliderMenuOpenSize, child: sliderMenu); switch (slideDirection) { case SlideDirection.LEFT_TO_RIGHT: return container; diff --git a/lib/src/slider_shadow.dart b/lib/src/slider_shadow.dart new file mode 100644 index 0000000..ebd2033 --- /dev/null +++ b/lib/src/slider_shadow.dart @@ -0,0 +1,49 @@ +import 'package:flutter/widgets.dart'; +import 'package:flutter_slider_drawer/src/helper/utils.dart'; + +import 'helper/slider_shadow.dart'; +import 'slider_direction.dart'; + +class SliderShadow extends StatelessWidget { + const SliderShadow({ + Key? key, + required AnimationController? animationDrawerController, + required this.animation, + required this.sliderBoxShadow, + required this.slideDirection, + required this.sliderOpenSize, + }) : _animationDrawerController = animationDrawerController, + super(key: key); + + final AnimationController? _animationDrawerController; + final Animation animation; + final SliderBoxShadow sliderBoxShadow; + 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: sliderBoxShadow.color, + blurRadius: sliderBoxShadow.blurRadius, + spreadRadius: sliderBoxShadow.spreadRadius, + offset: Offset(15.0, 15.0), + ) + ]), + ), + ); + } +} diff --git a/slider_d_2.png b/slider_d_2.png old mode 100755 new mode 100644 index e0b9574..0d78845 Binary files a/slider_d_2.png and b/slider_d_2.png differ