WT 1.1.14+2 sales page update
This commit is contained in:
bossanyit
@@ -0,0 +1,304 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
enum PredefinedThemes {
|
||||
success,
|
||||
successOutline,
|
||||
danger,
|
||||
dangerOutline,
|
||||
warning,
|
||||
warningOutline,
|
||||
info,
|
||||
infoOutline,
|
||||
primary,
|
||||
primaryOutline,
|
||||
secondary,
|
||||
secondaryOutline,
|
||||
dark,
|
||||
darkOutline,
|
||||
light,
|
||||
}
|
||||
|
||||
List definedColors = [
|
||||
// success
|
||||
{"color": Color(0xFF5CB85C), "borderColor": Colors.black, "shadowColor": Colors.black, "blurColor": Colors.black},
|
||||
// successOutline
|
||||
{"color": Color(0xFFFAFAFA), "borderColor": Color(0xFF5CB85C), "shadowColor": Color(0xFF5CB85C), "blurColor": Color(0xFF5CB85C)},
|
||||
// danger
|
||||
{"color": Color(0xFFD9534F), "borderColor": Colors.black, "shadowColor": Colors.black, "blurColor": Colors.black},
|
||||
// dangerOutline
|
||||
{"color": Color(0xFFFAFAFA), "borderColor": Color(0xFFD9534F), "shadowColor": Color(0xFFD9534F), "blurColor": Color(0xFFD9534F)},
|
||||
// warning
|
||||
{"color": Color(0xFFF0AD4E), "borderColor": Colors.black, "shadowColor": Colors.black, "blurColor": Colors.black},
|
||||
// warningOutline
|
||||
{"color": Color(0xFFFAFAFA), "borderColor": Color(0xFFF0AD4E), "shadowColor": Color(0xFFF0AD4E), "blurColor": Color(0xFFF0AD4E)},
|
||||
// info
|
||||
{"color": Color(0xFF5BC0DE), "borderColor": Colors.black, "shadowColor": Colors.black, "blurColor": Colors.black},
|
||||
// infoOutline
|
||||
{"color": Color(0xFFFAFAFA), "borderColor": Color(0xFF5BC0DE), "shadowColor": Color(0xFF5BC0DE), "blurColor": Color(0xFF5BC0DE)},
|
||||
// primary
|
||||
{"color": Color(0xFF0275D8), "borderColor": Colors.black, "shadowColor": Colors.black, "blurColor": Colors.black},
|
||||
// primaryOutline
|
||||
{"color": Color(0xFFFAFAFA), "borderColor": Color(0xFF0275D8), "shadowColor": Color(0xFF0275D8), "blurColor": Color(0xFF0275D8)},
|
||||
// secondary
|
||||
{"color": Color(0xFF6B5B95), "borderColor": Colors.black, "shadowColor": Colors.black, "blurColor": Colors.black},
|
||||
// secondaryOutline
|
||||
{"color": Color(0xFFFAFAFA), "borderColor": Color(0xFF6B5B95), "shadowColor": Color(0xFF6B5B95), "blurColor": Color(0xFF6B5B95)},
|
||||
// dark
|
||||
{"color": Color(0xFF292B2C), "borderColor": Colors.black, "shadowColor": Colors.black, "blurColor": Colors.black},
|
||||
// darkOutline
|
||||
{"color": Color(0xFFFAFAFA), "borderColor": Color(0xFF292B2C), "shadowColor": Color(0xFF292B2C), "blurColor": Color(0xFF292B2C)},
|
||||
{"color": Color(0xFFF7F7F7), "borderColor": Colors.black, "shadowColor": Colors.black, "blurColor": Colors.black},
|
||||
{"color": Color(0xFFBFBFC4), "borderColor": Colors.black, "shadowColor": Colors.black, "blurColor": Colors.black}
|
||||
];
|
||||
|
||||
class AnimatedButton extends StatefulWidget {
|
||||
// * @param onTap The function that is called whenever the widget is tapped
|
||||
final GestureTapCallback onTap;
|
||||
final Widget child;
|
||||
// * @param type There are 16 predefined themes from which you can choose from if you dont want to customize the widget yourself
|
||||
final PredefinedThemes type;
|
||||
// * @param animationCurve The curve that the animation will follow
|
||||
final Curve animationCurve;
|
||||
// * @param enabled To check whether the button is enabbled or not
|
||||
final bool enabled;
|
||||
// * @param isMultiColor To check whether the button has multiple color gradient or not
|
||||
final bool isMultiColor;
|
||||
// * @param isOutline To check whether the button has a outline or not
|
||||
final bool isOutline;
|
||||
// * @param darkShadow To check whether the button has dark or light shadow
|
||||
final bool darkShadow;
|
||||
|
||||
// * @param duration The time that the animation takes in milliseconds
|
||||
final int duration;
|
||||
|
||||
// * @param height The height of the widget
|
||||
final double height;
|
||||
// * @param width The width of the widget
|
||||
final double width;
|
||||
// * @param blurRadius The radius of the blur effect of the widget
|
||||
final double blurRadius;
|
||||
// * @param borderRadius The radius of the borders of the widget
|
||||
final double borderRadius;
|
||||
// * @param shadowHeightBottom The height of the shadow and the animation of the widget from the bottom of the child widget
|
||||
final double shadowHeightBottom;
|
||||
// * @param shadowHeightLeft The height of the shadow and the animation of the widget from the left of the child widget
|
||||
final double shadowHeightLeft;
|
||||
// * @param borderWidth The width of the border of the widget
|
||||
final double borderWidth;
|
||||
|
||||
// * @param borderColor The color of the border of the widget(if type is not null, this will not work, is Outline should be true for this to work)
|
||||
final Color borderColor;
|
||||
// * @param blurColor The color of the blur of the widget(if type is not null, this will not work)
|
||||
final Color blurColor;
|
||||
// * @param color The color of the widget(if type is not null, this will not work)
|
||||
final Color color;
|
||||
// * @param shadowColor The color of the shadow of the widget(if type is not null, this will not work)
|
||||
final Color? shadowColor;
|
||||
|
||||
// * @param colors The list of colors for the gradient for the background of the widget(isMulticolor should be true for this to work)
|
||||
final List<Color>? colors;
|
||||
|
||||
AnimatedButton({
|
||||
Key? key,
|
||||
required this.onTap,
|
||||
required this.child,
|
||||
this.enabled = true,
|
||||
this.type = PredefinedThemes.primary,
|
||||
this.color = Colors.blue,
|
||||
this.height = 64,
|
||||
this.colors,
|
||||
this.isMultiColor = false,
|
||||
this.darkShadow = true,
|
||||
this.width = 200,
|
||||
this.duration = 70,
|
||||
this.blurRadius = 0,
|
||||
this.borderRadius = 12,
|
||||
this.animationCurve = Curves.easeIn,
|
||||
this.shadowHeightBottom = 4,
|
||||
this.shadowHeightLeft = 0,
|
||||
this.isOutline = false,
|
||||
this.borderColor = Colors.black,
|
||||
this.borderWidth = 1,
|
||||
this.blurColor = Colors.black,
|
||||
this.shadowColor,
|
||||
}) : assert(child != null),
|
||||
super(key: key);
|
||||
|
||||
@override
|
||||
_AnimatedButtonState createState() => _AnimatedButtonState(
|
||||
type: this.type,
|
||||
color: this.color,
|
||||
blurColor: this.blurColor,
|
||||
borderColor: this.borderColor,
|
||||
);
|
||||
}
|
||||
|
||||
class _AnimatedButtonState extends State<AnimatedButton> {
|
||||
late double btnPositionBottom;
|
||||
late double btnPositionTop;
|
||||
late double btnPositionLeft;
|
||||
late double btnPositionRight;
|
||||
PredefinedThemes? type;
|
||||
Color? color;
|
||||
Color? shadowColor;
|
||||
Color? borderColor;
|
||||
Color? blurColor;
|
||||
_AnimatedButtonState({
|
||||
this.type,
|
||||
this.color,
|
||||
this.shadowColor,
|
||||
this.borderColor,
|
||||
this.blurColor,
|
||||
});
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
// check if there is a PredefinedThemes type used in the widget
|
||||
// if yes, over-ride all the colors of the widget
|
||||
if (type != null) {
|
||||
int index = type!.index;
|
||||
setState(() {
|
||||
color = definedColors[index]["color"];
|
||||
shadowColor = definedColors[index]["shadowColor"];
|
||||
blurColor = definedColors[index]["blurColor"];
|
||||
borderColor = definedColors[index]["borderColor"];
|
||||
});
|
||||
} else {
|
||||
setState(() {
|
||||
color = widget.color;
|
||||
shadowColor = widget.shadowColor;
|
||||
blurColor = widget.blurColor;
|
||||
borderColor = widget.borderColor;
|
||||
});
|
||||
}
|
||||
// initialize the top widget with the defined bottom and left height
|
||||
setState(() {
|
||||
btnPositionBottom = widget.shadowHeightBottom;
|
||||
btnPositionLeft = widget.shadowHeightLeft;
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final double height = widget.height - btnPositionBottom;
|
||||
|
||||
return GestureDetector(
|
||||
child: Center(
|
||||
child: Container(
|
||||
width: widget.width + btnPositionLeft,
|
||||
height: height + btnPositionBottom,
|
||||
child: Stack(
|
||||
children: <Widget>[
|
||||
Positioned(
|
||||
bottom: 0,
|
||||
child: Container(
|
||||
height: height,
|
||||
width: widget.width,
|
||||
decoration: BoxDecoration(
|
||||
gradient: widget.isMultiColor
|
||||
? LinearGradient(
|
||||
colors: shadow(widget.colors!, widget.darkShadow),
|
||||
)
|
||||
: null,
|
||||
color: (widget.shadowColor != null)
|
||||
? widget.shadowColor
|
||||
: shadow((widget.isOutline) ? [color!] : [borderColor!], widget.darkShadow),
|
||||
borderRadius: BorderRadius.all(
|
||||
Radius.circular(
|
||||
widget.borderRadius,
|
||||
),
|
||||
),
|
||||
border: widget.isOutline
|
||||
? Border.all(
|
||||
color: borderColor!,
|
||||
width: widget.borderWidth,
|
||||
)
|
||||
: null,
|
||||
boxShadow: <BoxShadow>[
|
||||
BoxShadow(
|
||||
color: blurColor!,
|
||||
blurRadius: widget.blurRadius,
|
||||
offset: Offset(0.0, 0.0),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
AnimatedPositioned(
|
||||
curve: widget.animationCurve,
|
||||
duration: Duration(milliseconds: widget.duration),
|
||||
bottom: btnPositionBottom,
|
||||
left: btnPositionLeft,
|
||||
child: Container(
|
||||
height: height,
|
||||
width: widget.width,
|
||||
decoration: BoxDecoration(
|
||||
gradient: widget.isMultiColor
|
||||
? LinearGradient(
|
||||
colors: widget.colors!,
|
||||
)
|
||||
: null,
|
||||
color: color,
|
||||
borderRadius: BorderRadius.all(
|
||||
Radius.circular(
|
||||
widget.borderRadius,
|
||||
),
|
||||
),
|
||||
border: widget.isOutline
|
||||
? Border.all(
|
||||
color: borderColor!,
|
||||
width: widget.borderWidth,
|
||||
)
|
||||
: null,
|
||||
),
|
||||
child: Center(
|
||||
child: widget.child,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
onTapDown: widget.enabled ? _tapDown : null,
|
||||
onTapUp: widget.enabled ? _tapUp : null,
|
||||
onTapCancel: widget.enabled ? _unTap : null,
|
||||
);
|
||||
}
|
||||
|
||||
void _tapDown(_) {
|
||||
// when the widget is pressed make both the heights, bottom and left to zero
|
||||
setState(() {
|
||||
btnPositionBottom = 0;
|
||||
btnPositionLeft = 0;
|
||||
});
|
||||
}
|
||||
|
||||
// when the widget is released after being pressed, it returns to the given heights, bottom and left
|
||||
void _tapUp(_) => _unTap();
|
||||
|
||||
void _unTap() {
|
||||
setState(() {
|
||||
btnPositionLeft = widget.shadowHeightLeft;
|
||||
|
||||
btnPositionBottom = widget.shadowHeightBottom;
|
||||
});
|
||||
widget.onTap();
|
||||
}
|
||||
|
||||
// returns a list of color shades according to the params
|
||||
// * @param colors list of colors
|
||||
// * @param darkshadow whether to return a darker shadow or lighter shadow
|
||||
shadow(List<Color> colors, bool darkShadow) {
|
||||
List<Color> w = [];
|
||||
|
||||
colors.forEach((color) {
|
||||
double amount = darkShadow ? 0.22 : 0.1;
|
||||
final hsl = HSLColor.fromColor(color);
|
||||
final hslDark = hsl.withLightness((hsl.lightness - amount).clamp(0.0, 1.0));
|
||||
w.add(hslDark.toColor());
|
||||
});
|
||||
return (w.length == 1) ? w[0] : w;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user