MUIGradient Button

A customizable gradient button by ModularUI with optional icons.

Properties

  • text: The Text to display inside the button.

  • onPressed: On Pressed Function.

  • bgGradient: Background Gradient of The Gradient Button, default: black and grey.

  • textColor: Text Color of the Gradient Button, default: white.

  • borderRadius: Border Radius for Gradient Button, default: 10.

  • animationDuration: Animation Duration in Milliseconds, default: 250 ms.

  • hapticsEnabled: Enables Light Haptic Feedback.

  • widthFactorUnpressed: A double value multiplied by the current screen width when the button is not pressed.

  • widthFactorPressed: A double value multiplied by the current screen width when the button is pressed.

  • heightFactorPressed: A double value multiplied by the current screen height when the button is pressed.

  • heightFactorUnPressed: A double value multiplied by the current screen height when the button is not pressed.

  • maxHorizontalPadding: A double value determining the maximum horizontal padding a button can accumulate. Play with this value if you want to use the button on a larger screen size.

  • leadingIcon: Optional leading icon for the button.

  • actionIcon: Optional action icon for the button.

  • iconColor: Icon color for both leading and action icons, default: white.

  • boxShadows: Box shadows for the button.

Component

MUIGradientButton(
        text: 'Gradient Button',
        onPressed: () {},
        bgGradient: const LinearGradient(
          colors: [Color(0xff5a44fd), Color(0xff1c2c7d)],
          stops: [0.25, 0.75],
          begin: Alignment.bottomRight,
          end: Alignment.topLeft,
        ),
        boxShadows: [
        BoxShadow(
          color: const Color.fromARGB(255, 0, 15, 110).withOpacity(1),
          offset: const Offset(-8, -1),
          blurRadius: 50,
          spreadRadius: -1,
        ),
      ],
      )

Notes

  • This component uses a GestureDetector to handle tap events and provides customizable visual feedback.

  • The button adjusts its size and appearance based on the screen width and height factors, providing responsiveness.

  • Icons can be added to the leading and action positions with customizable colors and sizes.

  • Haptic feedback can be enabled for a subtle tactile response.

  • Box shadows can be customized to add depth and elevation to the button.

Last updated