Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shajin-sha/sha_alert
Sha alerts - Alert dialogs for flutter with UX in mind 😄🚀
https://github.com/shajin-sha/sha_alert
alert flutter mobile ux ux-design
Last synced: about 1 month ago
JSON representation
Sha alerts - Alert dialogs for flutter with UX in mind 😄🚀
- Host: GitHub
- URL: https://github.com/shajin-sha/sha_alert
- Owner: shajin-sha
- License: other
- Created: 2023-07-30T13:00:18.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-07-31T17:00:06.000Z (over 1 year ago)
- Last Synced: 2024-11-10T22:30:18.322Z (3 months ago)
- Topics: alert, flutter, mobile, ux, ux-design
- Language: C++
- Homepage: https://pub.dev/packages/sha_alert
- Size: 267 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
## Sha alerts - Alert dialogs for flutter with UX in mind.
[Sha alert](https://pub.dev/packages/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](https://fueler.io/shajin/how-to-design-alert-dialogs-ux-flutter)
## Screenshots
## Installation
```
dependencies:
sha_alert: ^0.0.1
```
## Usage
```dart
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:
1. `context` (BuildContext) - *(Required)* This context should contain the navigator for the alert to work properly and pop itself.
2. `title` (String) - *(Required)* The title of the alert dialog.
3. `message` (String) - *(Required)* The main message/content of the alert dialog.
4. `firstButtonTitle` (String) - *(Required)* The title of the first action button.
5. `secondButtonTitle` (String, optional) - The title of the second action button. If not provided, only one button will be shown.
6. `onFirstButtonPressed` (Function, optional) - Function to be called when the first action button is pressed.
7. `onSecondButtonPressed` (Function, optional) - Function to be called when the second action button is pressed.
8. `firstButtonType` (ButtonType, optional) - The type of the first action button. Default is `ButtonType.negative`. Possible values are `ButtonType.negative`, `ButtonType.positive`, and `ButtonType.secondary`.
9. `secondButtonType` (ButtonType, optional) - The type of the second action button. Default is `ButtonType.secondary`. Possible values are `ButtonType.negative`, `ButtonType.positive`, and `ButtonType.secondary`.
10. `height` (double, optional) - Height of the alert dialog. Default is 280 pixels.
11. `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 the `height` accordingly if you use this parameter.
12. `backdropColor` (Color, optional) - Backdrop color of the alert dialog. Default is `Colors.black54` (black with 54% opacity).
13. `transitionDuration` (Duration, optional) - Default transition duration for the alert dialog. Default is 120 milliseconds (0.12 seconds).
14. `onDismissed` (Function, optional) - Function to be called when the alert is dismissed (e.g., when the user taps outside the dialog).
15. `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.
16. `secondaryColor` (Color, optional) - Custom color for secondary elements in the alert dialog (e.g., button backgrounds). If `overrideTheme` is set to `false`, this color will be set to the secondary color of the current theme. Otherwise, the default is `Colors.grey.shade100`.
17. `primaryColor` (Color, optional) - Custom color for primary elements in the alert dialog (e.g., button text). If `overrideTheme` is set to `false`, this color will be set to the primary color of the current theme. Otherwise, the default is `Colors.blue`.
18. `errorColor` (Color, optional) - Custom color for error elements in the alert dialog (e.g., error button backgrounds). If `overrideTheme` is set to `false`, this color will be set to the error color of the current theme. Otherwise, the default is `Colors.red`.
19. `successColor` (Color, optional) - Custom color for success elements in the alert dialog (e.g., success button backgrounds). If `overrideTheme` is set to `false`, this color will be set to the primary color of the current theme. Otherwise, the default is `Colors.green`.
20. `overrideTheme` (bool, optional) - If set to `true`, the custom colors specified (`primaryColor`, `secondaryColor`, `errorColor`, `successColor`) will be used. If set to `false`, the colors will be set based on the current theme.
### Author
Shajin KP - [shajin.in](https://shajin.in)
### Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.