gradient_button.dart 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. // @dart=2.9
  2. import 'package:flutter/material.dart';
  3. class GradientButton extends StatelessWidget {
  4. final List<Color> linearGradientColors;
  5. final Function onTap;
  6. final Widget child;
  7. // text is ignored if child is specified
  8. final String text;
  9. // nullable
  10. final IconData iconData;
  11. // padding between the text and icon
  12. final double paddingValue;
  13. const GradientButton({
  14. Key key,
  15. this.child,
  16. this.linearGradientColors = const [
  17. Color(0xFF2CD267),
  18. Color(0xFF1DB954),
  19. ],
  20. this.onTap,
  21. this.text = '',
  22. this.iconData,
  23. this.paddingValue = 0.0,
  24. }) : super(key: key);
  25. @override
  26. Widget build(BuildContext context) {
  27. Widget buttonContent;
  28. if (child != null) {
  29. buttonContent = child;
  30. } else if (iconData == null) {
  31. buttonContent = Text(
  32. text,
  33. style: const TextStyle(
  34. color: Colors.white,
  35. fontWeight: FontWeight.w600,
  36. fontFamily: 'Inter-SemiBold',
  37. fontSize: 18,
  38. ),
  39. );
  40. } else {
  41. buttonContent = Row(
  42. mainAxisAlignment: MainAxisAlignment.center,
  43. crossAxisAlignment: CrossAxisAlignment.center,
  44. children: [
  45. Icon(
  46. iconData,
  47. color: Colors.white,
  48. ),
  49. Padding(padding: EdgeInsets.all(paddingValue)),
  50. Text(
  51. text,
  52. style: const TextStyle(
  53. color: Colors.white,
  54. fontWeight: FontWeight.w600,
  55. fontFamily: 'Inter-SemiBold',
  56. fontSize: 18,
  57. ),
  58. ),
  59. ],
  60. );
  61. }
  62. return InkWell(
  63. onTap: onTap,
  64. child: Container(
  65. height: 56,
  66. decoration: BoxDecoration(
  67. gradient: LinearGradient(
  68. begin: const Alignment(0.1, -0.9),
  69. end: const Alignment(-0.6, 0.9),
  70. colors: linearGradientColors,
  71. ),
  72. borderRadius: BorderRadius.circular(8),
  73. ),
  74. child: Center(child: buttonContent),
  75. ),
  76. );
  77. }
  78. }