sha_alert 1.0.0+1 sha_alert: ^1.0.0+1 copied to clipboard
Sha alerts - Alert dialogs for flutter with UX in mind.
Sha alerts - Alert dialogs for flutter with UX in mind. #
Sha alert is alert dialogs designed by considering user experience and user interface in first place.
Sha alert supports 5 types of alert dialogs. - Primary
- Secondary
- Positive
- Negative
- Warning
Features and UX #
- Haptic feedbacks on supported devices.
- Naturally animated (Not starting scale from 0 to 1 instead 0.7 to 1).
- Scale animation + alpha animation.
- Two action buttons.
- Customizable title, message, action buttons and colors.
PRO TIP 🚀 : Read my article on fueler on how to design alert dialogs here
Screenshots #
Installation #
dependencies:
sha_alert: ^0.0.1
Usage #
ShaAlert.showHozzoAlert(
context: context,
title: 'Welcome Note',
message: 'Happy to see you on board! Please read the terms and conditions carefully.',
firstButtonTitle: "I Agree",
firstButtonType: ButtonType.primary,
onFirstButtonPressed: () {
// Code to be executed when the first button is pressed
},
secondButtonTitle: "Read Terms and Conditions",
onSecondButtonPressed: () {
// Code to be executed when the second button is pressed
},
);
Parameters: #
-
context
(BuildContext) - (Required) This context should contain the navigator for the alert to work properly and pop itself. -
title
(String) - (Required) The title of the alert dialog. -
message
(String) - (Required) The main message/content of the alert dialog. -
firstButtonTitle
(String) - (Required) The title of the first action button. -
secondButtonTitle
(String, optional) - The title of the second action button. If not provided, only one button will be shown. -
onFirstButtonPressed
(Function, optional) - Function to be called when the first action button is pressed. -
onSecondButtonPressed
(Function, optional) - Function to be called when the second action button is pressed. -
firstButtonType
(ButtonType, optional) - The type of the first action button. Default isButtonType.negative
. Possible values areButtonType.negative
,ButtonType.positive
, andButtonType.secondary
. -
secondButtonType
(ButtonType, optional) - The type of the second action button. Default isButtonType.secondary
. Possible values areButtonType.negative
,ButtonType.positive
, andButtonType.secondary
. -
height
(double, optional) - Height of the alert dialog. Default is 280 pixels. -
child
(Widget, optional) - Use this for showing custom widgets or even images. This can be used to add additional content to the alert dialog. Make sure to set theheight
accordingly if you use this parameter. -
backdropColor
(Color, optional) - Backdrop color of the alert dialog. Default isColors.black54
(black with 54% opacity). -
transitionDuration
(Duration, optional) - Default transition duration for the alert dialog. Default is 120 milliseconds (0.12 seconds). -
onDismissed
(Function, optional) - Function to be called when the alert is dismissed (e.g., when the user taps outside the dialog). -
customHapticFeedback
(Function, optional) - Custom haptic feedback function to be called when the alert is displayed. If not provided, default haptic feedback will be used. This function will be called after 100 milliseconds. -
secondaryColor
(Color, optional) - Custom color for secondary elements in the alert dialog (e.g., button backgrounds). IfoverrideTheme
is set tofalse
, this color will be set to the secondary color of the current theme. Otherwise, the default isColors.grey.shade100
. -
primaryColor
(Color, optional) - Custom color for primary elements in the alert dialog (e.g., button text). IfoverrideTheme
is set tofalse
, this color will be set to the primary color of the current theme. Otherwise, the default isColors.blue
. -
errorColor
(Color, optional) - Custom color for error elements in the alert dialog (e.g., error button backgrounds). IfoverrideTheme
is set tofalse
, this color will be set to the error color of the current theme. Otherwise, the default isColors.red
. -
successColor
(Color, optional) - Custom color for success elements in the alert dialog (e.g., success button backgrounds). IfoverrideTheme
is set tofalse
, this color will be set to the primary color of the current theme. Otherwise, the default isColors.green
. -
overrideTheme
(bool, optional) - If set totrue
, the custom colors specified (primaryColor
,secondaryColor
,errorColor
,successColor
) will be used. If set tofalse
, the colors will be set based on the current theme.
Author #
Shajin KP - shajin.in
Contributing #
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.