diff --git a/example/README.md b/example/README.md index 50996cc..3efd8dc 100644 --- a/example/README.md +++ b/example/README.md @@ -49,6 +49,9 @@ class _MyHomePageState extends State { key: _endSideMenuKey, inverse: true, // end side menu background: Colors.green[700], + backgroundGradient: LinearGradient( + colors: [Colors.blue, Colors.blue[700]], + ), type: SideMenuType.slideNRotate, menu: buildMenu(), child: SideMenu( diff --git a/example/aa.dart b/example/aa.dart new file mode 100644 index 0000000..dafc80a --- /dev/null +++ b/example/aa.dart @@ -0,0 +1,11 @@ +import 'package:flutter/material.dart'; + +Widget aa() { + return Container( + decoration: BoxDecoration( + gradient: LinearGradient( + colors: [Colors.blue, Colors.blue[700]], + ), + ), + ); +} diff --git a/lib/src/base.dart b/lib/src/base.dart index b3037e1..5094ce8 100644 --- a/lib/src/base.dart +++ b/lib/src/base.dart @@ -38,6 +38,8 @@ class SideMenu extends StatefulWidget { /// default: Color(0xFF112473) final Color background; + final LinearGradient backgroundGradient; + /// Radius for the child when side menu opens final BorderRadius radius; @@ -98,6 +100,7 @@ class SideMenu extends StatefulWidget { Key key, this.child, this.background, + this.backgroundGradient, this.radius, this.closeIcon = const Icon( Icons.close, @@ -126,8 +129,7 @@ class SideMenu extends StatefulWidget { @override SideMenuState createState() { - if (type == SideMenuType.shrikNRotate) - return ShrinkSlideRotateSideMenuState(); + if (type == SideMenuType.shrikNRotate) return ShrinkSlideRotateSideMenuState(); if (type == SideMenuType.shrinkNSlide) return ShrinkSlideSideMenuState(); if (type == SideMenuType.slide) return SlideSideMenuState(); if (type == SideMenuType.slideNRotate) return SlideRotateSideMenuState(); diff --git a/lib/src/shrik_slide_menu.dart b/lib/src/shrik_slide_menu.dart index 56ebfe1..c037c38 100644 --- a/lib/src/shrik_slide_menu.dart +++ b/lib/src/shrik_slide_menu.dart @@ -8,29 +8,34 @@ class ShrinkSlideSideMenuState extends SideMenuState { final statusBarHeight = mq.padding.top; return Material( - color: widget.background ?? const Color(0xFF112473), - child: Stack( - fit: StackFit.expand, - children: [ - Positioned( - top: statusBarHeight + (widget?.closeIcon?.size ?? 25.0) * 2, - bottom: 0.0, - width: min(size.width * 0.70, widget.maxMenuWidth), - right: widget._inverse == 1 ? null : 0, - child: widget.menu, - ), - _getCloseButton(statusBarHeight), - AnimatedContainer( - duration: const Duration(milliseconds: 350), - curve: Curves.fastLinearToSlowEaseIn, - alignment: Alignment.topLeft, - transform: _getMatrix4(size), - decoration: BoxDecoration( - borderRadius: _getBorderRadius(), + child: Container( + decoration: BoxDecoration( + color: widget.background ?? const Color(0xFF112473), + gradient: widget.backgroundGradient, + ), + child: Stack( + fit: StackFit.expand, + children: [ + Positioned( + top: statusBarHeight + (widget?.closeIcon?.size ?? 25.0) * 2, + bottom: 0.0, + width: min(size.width * 0.70, widget.maxMenuWidth), + right: widget._inverse == 1 ? null : 0, + child: widget.menu, ), - child: _getChild(), - ), - ], + _getCloseButton(statusBarHeight), + AnimatedContainer( + duration: const Duration(milliseconds: 350), + curve: Curves.fastLinearToSlowEaseIn, + alignment: Alignment.topLeft, + transform: _getMatrix4(size), + decoration: BoxDecoration( + borderRadius: _getBorderRadius(), + ), + child: _getChild(), + ), + ], + ), ), ); } @@ -45,18 +50,12 @@ class ShrinkSlideSideMenuState extends SideMenuState { ) : widget.child; - BorderRadius _getBorderRadius() => _opened - ? (widget.radius ?? BorderRadius.circular(34.0)) - : BorderRadius.zero; + BorderRadius _getBorderRadius() => _opened ? (widget.radius ?? BorderRadius.circular(34.0)) : BorderRadius.zero; Matrix4 _getMatrix4(Size size) { if (_opened) { return Matrix4.identity() - ..translate( - min(size.width, widget.maxMenuWidth) * - widget._inverse * - (widget.inverse ? 0.6 : 0.9), - (size.height * 0.1)) + ..translate(min(size.width, widget.maxMenuWidth) * widget._inverse * (widget.inverse ? 0.6 : 0.9), (size.height * 0.1)) ..scale(widget.maxMenuWidth / size.width ?? 0.8, 0.8); } return Matrix4.identity(); diff --git a/lib/src/shrink_slide_rotate_menu.dart b/lib/src/shrink_slide_rotate_menu.dart index a555dc8..96f2a02 100644 --- a/lib/src/shrink_slide_rotate_menu.dart +++ b/lib/src/shrink_slide_rotate_menu.dart @@ -9,32 +9,31 @@ class ShrinkSlideRotateSideMenuState extends SideMenuState { return Material( color: widget.background ?? const Color(0xFF112473), - child: Stack( - fit: StackFit.expand, - children: [ - Positioned( - top: statusBarHeight + (widget?.closeIcon?.size ?? 25.0) * 2, - bottom: 0.0, - width: min(size.width * 0.70, widget.maxMenuWidth), - right: widget._inverse == 1 ? null : 0, - child: widget.menu, - ), - _getCloseButton(statusBarHeight), - AnimatedContainer( - duration: const Duration(milliseconds: 350), - curve: Curves.fastLinearToSlowEaseIn, - transform: _getMatrix4(size), - decoration: BoxDecoration( - borderRadius: _getBorderRadius(), - boxShadow: [ - BoxShadow( - offset: Offset(0, 18.0), - color: Colors.black12, - blurRadius: 32.0) - ]), - child: _getChild(), - ), - ], + child: Container( + decoration: BoxDecoration( + color: widget.background ?? const Color(0xFF112473), + gradient: widget.backgroundGradient, + ), + child: Stack( + fit: StackFit.expand, + children: [ + Positioned( + top: statusBarHeight + (widget?.closeIcon?.size ?? 25.0) * 2, + bottom: 0.0, + width: min(size.width * 0.70, widget.maxMenuWidth), + right: widget._inverse == 1 ? null : 0, + child: widget.menu, + ), + _getCloseButton(statusBarHeight), + AnimatedContainer( + duration: const Duration(milliseconds: 350), + curve: Curves.fastLinearToSlowEaseIn, + transform: _getMatrix4(size), + decoration: BoxDecoration(borderRadius: _getBorderRadius(), boxShadow: [BoxShadow(offset: Offset(0, 18.0), color: Colors.black12, blurRadius: 32.0)]), + child: _getChild(), + ), + ], + ), ), ); } @@ -49,20 +48,14 @@ class ShrinkSlideRotateSideMenuState extends SideMenuState { ) : widget.child; - BorderRadius _getBorderRadius() => _opened - ? (widget.radius ?? BorderRadius.circular(34.0)) - : BorderRadius.zero; + BorderRadius _getBorderRadius() => _opened ? (widget.radius ?? BorderRadius.circular(34.0)) : BorderRadius.zero; Matrix4 _getMatrix4(Size size) { if (_opened) { return Matrix4.identity() ..rotateZ(widget.degToRad(5.0 * widget._inverse)) ..invertRotation() - ..translate( - min(size.width, widget.maxMenuWidth) * - widget._inverse * - (widget.inverse ? 0.6 : 0.9), - (size.height * 0.1)) + ..translate(min(size.width, widget.maxMenuWidth) * widget._inverse * (widget.inverse ? 0.6 : 0.9), (size.height * 0.1)) ..scale(widget.maxMenuWidth / size.width ?? 0.8, 0.8); } return Matrix4.identity(); diff --git a/lib/src/slide_menu.dart b/lib/src/slide_menu.dart index 26eadfd..fb52d1b 100644 --- a/lib/src/slide_menu.dart +++ b/lib/src/slide_menu.dart @@ -8,7 +8,7 @@ class SlideSideMenuState extends SideMenuState { final statusBarHeight = mq.padding.top; return Material( - color: widget.background ?? const Color(0xFF112473), + color: Colors.red, child: Stack( fit: StackFit.expand, children: [ @@ -33,9 +33,7 @@ class SlideSideMenuState extends SideMenuState { Matrix4 _getMatrix4(Size size) { if (_opened) { - return Matrix4.identity() - ..translate( - min(size.width * 0.70, widget.maxMenuWidth) * widget._inverse); + return Matrix4.identity()..translate(min(size.width * 0.70, widget.maxMenuWidth) * widget._inverse); } return Matrix4.identity(); } diff --git a/lib/src/slide_rotate_menu.dart b/lib/src/slide_rotate_menu.dart index dc83b30..e6d3f55 100644 --- a/lib/src/slide_rotate_menu.dart +++ b/lib/src/slide_rotate_menu.dart @@ -8,33 +8,31 @@ class SlideRotateSideMenuState extends SideMenuState { final statusBarHeight = mq.padding.top; return Material( - color: widget.background ?? const Color(0xFF112473), - child: Stack( - fit: StackFit.expand, - children: [ - Positioned( - top: statusBarHeight + (widget?.closeIcon?.size ?? 25.0) * 2, - bottom: 0.0, - width: min(size.width * 0.70, widget.maxMenuWidth), - right: widget._inverse == 1 ? null : 0, - child: widget.menu, - ), - _getCloseButton(statusBarHeight), - AnimatedContainer( - duration: const Duration(milliseconds: 350), - curve: Curves.fastLinearToSlowEaseIn, - transform: _getMatrix4(size), - decoration: BoxDecoration( - borderRadius: _getBorderRadius(), - boxShadow: [ - BoxShadow( - offset: Offset(0, 18.0), - color: Colors.black12, - blurRadius: 32.0) - ]), - child: _getChild(), - ), - ], + child: Container( + decoration: BoxDecoration( + color: widget.background ?? const Color(0xFF112473), + gradient: widget.backgroundGradient, + ), + child: Stack( + fit: StackFit.expand, + children: [ + Positioned( + top: statusBarHeight + (widget?.closeIcon?.size ?? 25.0) * 2, + bottom: 0.0, + width: min(size.width * 0.70, widget.maxMenuWidth), + right: widget._inverse == 1 ? null : 0, + child: widget.menu, + ), + _getCloseButton(statusBarHeight), + AnimatedContainer( + duration: const Duration(milliseconds: 350), + curve: Curves.fastLinearToSlowEaseIn, + transform: _getMatrix4(size), + decoration: BoxDecoration(borderRadius: _getBorderRadius(), boxShadow: [BoxShadow(offset: Offset(0, 18.0), color: Colors.black12, blurRadius: 32.0)]), + child: _getChild(), + ), + ], + ), ), ); } @@ -49,17 +47,14 @@ class SlideRotateSideMenuState extends SideMenuState { ) : widget.child; - BorderRadius _getBorderRadius() => _opened - ? (widget.radius ?? BorderRadius.circular(34.0)) - : BorderRadius.zero; + BorderRadius _getBorderRadius() => _opened ? (widget.radius ?? BorderRadius.circular(34.0)) : BorderRadius.zero; Matrix4 _getMatrix4(Size size) { if (_opened) { return Matrix4.identity() ..rotateZ(widget.degToRad(-5.0 * widget._inverse)) // ..scale(0.8, 0.8) - ..translate(min(size.width, widget.maxMenuWidth) * widget._inverse, - (size.height * 0.15)) + ..translate(min(size.width, widget.maxMenuWidth) * widget._inverse, (size.height * 0.15)) ..invertRotation(); } return Matrix4.identity(); diff --git a/pubspec.lock b/pubspec.lock index ad6d1df..e15edce 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -7,7 +7,7 @@ packages: name: async url: "https://pub.dartlang.org" source: hosted - version: "2.6.1" + version: "2.9.0" boolean_selector: dependency: transitive description: @@ -21,35 +21,28 @@ packages: name: characters url: "https://pub.dartlang.org" source: hosted - version: "1.1.0" - charcode: - dependency: transitive - description: - name: charcode - url: "https://pub.dartlang.org" - source: hosted - version: "1.2.0" + version: "1.2.1" clock: dependency: transitive description: name: clock url: "https://pub.dartlang.org" source: hosted - version: "1.1.0" + version: "1.1.1" collection: dependency: transitive description: name: collection url: "https://pub.dartlang.org" source: hosted - version: "1.15.0" + version: "1.16.0" fake_async: dependency: transitive description: name: fake_async url: "https://pub.dartlang.org" source: hosted - version: "1.2.0" + version: "1.3.1" flutter: dependency: "direct main" description: flutter @@ -66,21 +59,28 @@ packages: name: matcher url: "https://pub.dartlang.org" source: hosted - version: "0.12.10" + version: "0.12.12" + material_color_utilities: + dependency: transitive + description: + name: material_color_utilities + url: "https://pub.dartlang.org" + source: hosted + version: "0.1.5" meta: dependency: transitive description: name: meta url: "https://pub.dartlang.org" source: hosted - version: "1.3.0" + version: "1.8.0" path: dependency: transitive description: name: path url: "https://pub.dartlang.org" source: hosted - version: "1.8.0" + version: "1.8.2" sky_engine: dependency: transitive description: flutter @@ -92,7 +92,7 @@ packages: name: source_span url: "https://pub.dartlang.org" source: hosted - version: "1.8.1" + version: "1.9.0" stack_trace: dependency: transitive description: @@ -113,34 +113,27 @@ packages: name: string_scanner url: "https://pub.dartlang.org" source: hosted - version: "1.1.0" + version: "1.1.1" term_glyph: dependency: transitive description: name: term_glyph url: "https://pub.dartlang.org" source: hosted - version: "1.2.0" + version: "1.2.1" test_api: dependency: transitive description: name: test_api url: "https://pub.dartlang.org" source: hosted - version: "0.3.0" - typed_data: - dependency: transitive - description: - name: typed_data - url: "https://pub.dartlang.org" - source: hosted - version: "1.3.0" + version: "0.4.12" vector_math: dependency: transitive description: name: vector_math url: "https://pub.dartlang.org" source: hosted - version: "2.1.0" + version: "2.1.2" sdks: - dart: ">=2.12.0 <3.0.0" + dart: ">=2.17.0-0 <3.0.0"