gradient_button.dart 2.0 KB

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