RatelHub / Rflutter_alert
Licence: mit
RFlutter Alert is super customizable and easy-to-use alert / popup dialog library for Flutter. You may create reusable alert styles or add buttons as much as you want with ease.
Stars: ✭ 271
Projects that are alternatives of or similar to Rflutter alert
react-st-modal
Simple and flexible modal dialog component for React JS
Stars: ✭ 41 (-84.87%)
Mutual labels: alert, dialog
android-suspend-dialogs
A helper library for Android to display Dialogs by suspending the coroutine till finish of the dialog.
Stars: ✭ 32 (-88.19%)
Mutual labels: alert, dialog
alert
Cross-platform, isomorphic alert, for Node and browser (previously alert-node)
Stars: ✭ 27 (-90.04%)
Mutual labels: alert, dialog
Razor.SweetAlert2
A Razor class library for interacting with SweetAlert2
Stars: ✭ 98 (-63.84%)
Mutual labels: alert, dialog
Nativepopup
Clone of Apple iOS App's feedback popup, and easily customizable.
Stars: ✭ 247 (-8.86%)
Mutual labels: dialog, alert
Sweetalert2
A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies.
Stars: ✭ 13,929 (+5039.85%)
Mutual labels: dialog, alert
mac-ibm-notifications
macOS agent used to display custom notifications and alerts to the end user.
Stars: ✭ 206 (-23.99%)
Mutual labels: alert, dialog
Android-Dialog
Android Dialog(BaseDialog、AlertDialog、ProgressDialog、SuccessDdialog、ErrorDialog、BottomDialog)
Stars: ✭ 36 (-86.72%)
Mutual labels: alert, dialog
Alertview
A library to create simple alerts easily with some customization.
Stars: ✭ 222 (-18.08%)
Mutual labels: dialog, alert
BalloonPopup
Forget Android Toast! BalloonPopup displays a round or squared popup and attaches it to a View, like a callout. Uses the Builder pattern for maximum ease. The popup can automatically hide and can persist when the value is updated.
Stars: ✭ 32 (-88.19%)
Mutual labels: alert, dialog
Wc Messagebox
基于 Vue 2.0 开发的 Alert, Toast, Confirm 插件, UI仿照 iOS 原生
Stars: ✭ 203 (-25.09%)
Mutual labels: dialog, alert
mobile-message
基于移动端的弹窗组件,默认提供info、success、warning、error、alert、confirm、multiple、vertical、bottomSheet、prompt,可自定义弹窗。它可以包含任何Html内容可以自定义弹窗的样式,也可以加入自定以的弹窗动画。
Stars: ✭ 13 (-95.2%)
Mutual labels: alert, dialog
Pmalertcontroller
PMAlertController is a great and customizable alert that can substitute UIAlertController
Stars: ✭ 2,397 (+784.5%)
Mutual labels: dialog, alert
eins-modal
Simple to use modal / alert / dialog / popup. Created with pure JS. No javascript knowledge required! Works on every browser and device! IE9
Stars: ✭ 30 (-88.93%)
Mutual labels: alert, dialog
Alerttoast
Create Apple-like alerts & toasts using SwiftUI
Stars: ✭ 151 (-44.28%)
Mutual labels: dialog, alert
Bdialog
Extend the Bootstrap Modal features, making dialog more functions and easier to use, dialog type including modal, alert, mask and toast types
Stars: ✭ 174 (-35.79%)
Mutual labels: dialog, alert
react-redux-modal-flex
[DEPRECATED] Make easy a modal/popup with Redux
Stars: ✭ 14 (-94.83%)
Mutual labels: alert, dialog
svelte-accessible-dialog
An accessible dialog component for Svelte apps
Stars: ✭ 24 (-91.14%)
Mutual labels: alert, dialog
RFlutter Alert
RFlutter Alert is super customizable and easy-to-use alert/popup dialogs for Flutter. You may create reusable alert styles or add buttons as much as you want with ease.
Features
- Single line basic alert
- Adding buttons dynamically (as much as you want)
- Predefined beautiful alert styles (success, error, warning, info)
- Reusable alert styles
- Super customizable
- Change animation (fromTop, fromBottom, fromRight, fromLeft, grow, shrink) & Custom Animation
- Set animation duration
- Show/hide close button
- Set overlay tap to dismiss
- Assign Title and desc styles
- Change dialog border style
Getting started
You must add the library as a dependency to your project.
dependencies:
rflutter_alert: ^2.0.2
You can also reference the git repo directly if you want:
dependencies:
rflutter_alert:
git: git://github.com/RatelHub/rflutter_alert.git
You should then run flutter packages get
Example Project
There is a detailed example project in the example
folder. You can directly run and play on it. There are code snippets from example project below.
Basic Alert
Alert(context: context, title: "RFLUTTER", desc: "Flutter is awesome.").show();
Alert with Button
Alert(
context: context,
type: AlertType.error,
title: "RFLUTTER ALERT",
desc: "Flutter is more awesome with RFlutter Alert.",
buttons: [
DialogButton(
child: Text(
"COOL",
style: TextStyle(color: Colors.white, fontSize: 20),
),
onPressed: () => Navigator.pop(context),
width: 120,
)
],
).show();
Alert with Buttons
Alert(
context: context,
type: AlertType.warning,
title: "RFLUTTER ALERT",
desc: "Flutter is more awesome with RFlutter Alert.",
buttons: [
DialogButton(
child: Text(
"FLAT",
style: TextStyle(color: Colors.white, fontSize: 20),
),
onPressed: () => Navigator.pop(context),
color: Color.fromRGBO(0, 179, 134, 1.0),
),
DialogButton(
child: Text(
"GRADIENT",
style: TextStyle(color: Colors.white, fontSize: 20),
),
onPressed: () => Navigator.pop(context),
gradient: LinearGradient(colors: [
Color.fromRGBO(116, 116, 191, 1.0),
Color.fromRGBO(52, 138, 199, 1.0)
]),
)
],
).show();
Alert with Style
AlertStyle
Use the AlertStyle
class to customize.
var alertStyle = AlertStyle(
animationType: AnimationType.fromTop,
isCloseButton: false,
isOverlayTapDismiss: false,
descStyle: TextStyle(fontWeight: FontWeight.bold),
descTextAlign: TextAlign.start,
animationDuration: Duration(milliseconds: 400),
alertBorder: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0.0),
side: BorderSide(
color: Colors.grey,
),
),
titleStyle: TextStyle(
color: Colors.red,
),
alertAlignment: Alignment.topCenter,
);
And assing your AlertStyle
object to Alert's style
field.
Alert(
context: context,
style: alertStyle,
type: AlertType.info,
title: "RFLUTTER ALERT",
desc: "Flutter is more awesome with RFlutter Alert.",
buttons: [
DialogButton(
child: Text(
"COOL",
style: TextStyle(color: Colors.white, fontSize: 20),
),
onPressed: () => Navigator.pop(context),
color: Color.fromRGBO(0, 179, 134, 1.0),
radius: BorderRadius.circular(0.0),
),
],
).show();
Alert with Custom Image
Alert(
context: context,
title: "RFLUTTER ALERT",
desc: "Flutter is better with RFlutter Alert.",
image: Image.asset("assets/success.png"),
).show();
Alert with Custom Content
Alert(
context: context,
title: "LOGIN",
content: Column(
children: <Widget>[
TextField(
decoration: InputDecoration(
icon: Icon(Icons.account_circle),
labelText: 'Username',
),
),
TextField(
obscureText: true,
decoration: InputDecoration(
icon: Icon(Icons.lock),
labelText: 'Password',
),
),
],
),
buttons: [
DialogButton(
onPressed: () => Navigator.pop(context),
child: Text(
"LOGIN",
style: TextStyle(color: Colors.white, fontSize: 20),
),
)
]).show();
Contributions
- If you found a bug, open an issue.
- If you have a feature request, open an issue.
- If you want to contribute, submit a pull request.
Version compatability
See CHANGELOG for all breaking (and non-breaking) changes.
Made with ❤ by Ratel
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].