gradient_btn.dart 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. import 'package:flutter/cupertino.dart';
  2. import 'package:flutter/material.dart';
  3. import 'package:flutter_screenutil/flutter_screenutil.dart';
  4. import '../resource/assets.gen.dart';
  5. import '../resource/colors.gen.dart';
  6. import '../resource/string.gen.dart';
  7. /// 渐变色按钮
  8. class GradientBtn extends StatelessWidget {
  9. /// 纯色颜色
  10. final Color? color;
  11. /// 渐变颜色参数
  12. final List<Color> colors;
  13. /// 渐变方向
  14. final AlignmentGeometry begin;
  15. final AlignmentGeometry end;
  16. /// 按钮圆角半径
  17. final double radius;
  18. /// 内边距
  19. final EdgeInsetsGeometry? padding;
  20. /// 子组件
  21. final Widget child;
  22. /// 点击回调
  23. final VoidCallback onPressed;
  24. const GradientBtn({
  25. super.key,
  26. required this.colors,
  27. this.color,
  28. this.begin = Alignment.centerLeft,
  29. this.end = Alignment.centerRight,
  30. this.radius = 50,
  31. this.padding = const EdgeInsets.symmetric(vertical: 14),
  32. required this.child,
  33. required this.onPressed,
  34. });
  35. @override
  36. Widget build(BuildContext context) {
  37. Decoration decoration;
  38. // 优先使用纯色,如果没有纯色,则使用渐变色
  39. if (color != null) {
  40. decoration = BoxDecoration(
  41. color: color,
  42. borderRadius: BorderRadius.all(Radius.circular(radius)),
  43. );
  44. } else {
  45. // 渐变色
  46. decoration = ShapeDecoration(
  47. gradient: LinearGradient(colors: colors, begin: begin, end: end),
  48. shape: RoundedRectangleBorder(
  49. borderRadius: BorderRadius.circular(radius),
  50. ),
  51. );
  52. }
  53. return GestureDetector(
  54. onTap: () {
  55. onPressed();
  56. },
  57. child: Container(
  58. padding: padding,
  59. width: double.maxFinite,
  60. // 渐变背景
  61. decoration: decoration,
  62. child: Center(child: child),
  63. ),
  64. );
  65. }
  66. }
  67. /// 渐变按钮,中间为文字,文字左边是一个图标
  68. class GradientTextBtn extends StatelessWidget {
  69. /// 文字左边的图标
  70. final Image? leftIcon;
  71. /// 按钮文字
  72. final String text;
  73. /// 描述文字
  74. final String? desc;
  75. /// 纯色颜色
  76. final Color? color;
  77. /// 渐变颜色参数
  78. final List<Color> colors;
  79. /// 渐变方向
  80. final AlignmentGeometry begin;
  81. final AlignmentGeometry end;
  82. /// 按钮圆角半径
  83. final double radius;
  84. /// 内边距
  85. final EdgeInsetsGeometry? padding;
  86. /// 点击回调
  87. final VoidCallback onPressed;
  88. /// 操作按钮,带解锁按钮
  89. static GradientTextBtn withUnlock({
  90. String? text,
  91. Color? color,
  92. String? desc,
  93. double radius = 50,
  94. EdgeInsetsGeometry? padding = const EdgeInsets.symmetric(vertical: 14),
  95. required VoidCallback onPressed,
  96. }) {
  97. String btnText = text ?? "";
  98. if (btnText.isEmpty) {
  99. btnText = StringName.intimacyUnlockAnalyse;
  100. }
  101. return GradientTextBtn(
  102. btnText,
  103. desc: desc,
  104. color: color ?? ColorName.colorBrand,
  105. leftIcon: Assets.images.iconIntimacyAnalyseUnlock.image(
  106. width: 22,
  107. height: 22,
  108. ),
  109. radius: radius,
  110. padding: padding,
  111. onPressed: onPressed,
  112. );
  113. }
  114. const GradientTextBtn(
  115. this.text, {
  116. super.key,
  117. this.leftIcon,
  118. this.desc,
  119. this.color,
  120. this.colors = const [ColorName.purpleGradient3, ColorName.purpleGradient4],
  121. this.begin = Alignment.centerLeft,
  122. this.end = Alignment.centerRight,
  123. this.radius = 50,
  124. this.padding = const EdgeInsets.symmetric(vertical: 14),
  125. required this.onPressed,
  126. });
  127. @override
  128. Widget build(BuildContext context) {
  129. String descStr = desc ?? "";
  130. return GradientBtn(
  131. color: color,
  132. colors: colors,
  133. radius: radius,
  134. onPressed: onPressed,
  135. padding: padding,
  136. child: Column(
  137. children: [
  138. Row(
  139. mainAxisAlignment: MainAxisAlignment.center,
  140. children: [
  141. // 左侧图标
  142. Visibility(
  143. visible: leftIcon != null,
  144. child: Container(
  145. margin: EdgeInsets.only(right: 4.w),
  146. child: leftIcon,
  147. ),
  148. ),
  149. // 文字
  150. Text(
  151. text,
  152. style: TextStyle(
  153. color: ColorName.white,
  154. fontSize: 16.sp,
  155. fontWeight: FontWeight.bold,
  156. ),
  157. ),
  158. ],
  159. ),
  160. // 描述
  161. Visibility(
  162. visible: descStr.isNotEmpty,
  163. child: Container(
  164. margin: EdgeInsets.only(top: 3.h),
  165. child: Text(
  166. descStr,
  167. style: TextStyle(
  168. color: ColorName.white,
  169. fontSize: 10.sp,
  170. fontWeight: FontWeight.w400,
  171. ),
  172. ),
  173. ),
  174. ),
  175. ],
  176. ),
  177. );
  178. }
  179. }