MUILoading Button

A customizable loading button by ModularUI with optional icons.

Properties

  • text: Text for Loading Button.

  • onPressed: Future Function to be passed, must be awaited.

  • loadingStateText: Text to be shown when the widget is in the loading state, empty string by default.

  • bgColor: Background color of the loading button, default: black.

  • textColor: Text color of the loading button, default: white.

  • loadingStateBackgroundColor: Background Color when the button is in the loading state, default: grey.

  • loadingStateTextColor: Text Color when the button is in the loading state, default: white.

  • borderRadius: Border radius, default value is 10.

  • animationDuration: Animation duration in milliseconds, default value is 250ms.

  • 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

MUILoadingButton(
text: 'Register Now!',
onPressed: () async {
await Future.delayed(const Duration(milliseconds: 1000));
},
loadingStateText: 'Please wait',
)

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.

  • When pressed, the button enters a loading state, showing a loading indicator and custom loading text.

Last updated