Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Supported Gradient Background Color #12

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Supported Gradient Background Color #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c9926da
Supported background gradient color
ahmetveysels Sep 5, 2022
c898961
Supported background gradient color
ahmetveysels Sep 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions example/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,9 @@ class _MyHomePageState extends State<MyHomePage> {
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(
Expand Down
11 changes: 11 additions & 0 deletions example/aa.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import 'package:flutter/material.dart';

Widget aa() {
return Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.blue, Colors.blue[700]],
),
),
);
}
6 changes: 4 additions & 2 deletions lib/src/base.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -98,6 +100,7 @@ class SideMenu extends StatefulWidget {
Key key,
this.child,
this.background,
this.backgroundGradient,
this.radius,
this.closeIcon = const Icon(
Icons.close,
Expand Down Expand Up @@ -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();
Expand Down
59 changes: 29 additions & 30 deletions lib/src/shrik_slide_menu.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
),
],
),
),
);
}
Expand All @@ -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();
Expand Down
61 changes: 27 additions & 34 deletions lib/src/shrink_slide_rotate_menu.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
),
],
),
),
);
}
Expand All @@ -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();
Expand Down
6 changes: 2 additions & 4 deletions lib/src/slide_menu.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand All @@ -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();
}
Expand Down
59 changes: 27 additions & 32 deletions lib/src/slide_rotate_menu.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
),
],
),
),
);
}
Expand All @@ -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();
Expand Down
Loading