RFlutter Alert is super customizable and easy-to-use alert/popup dialogs for Flutter.

Overview

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.

Version

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.4

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

Navigator.pop(context), width: 120, ) ], ).show(); ">
    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

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(
      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 assign your AlertStyle object to Alert's style field.

Navigator.pop(context), color: Color.fromRGBO(0, 179, 134, 1.0), radius: BorderRadius.circular(0.0), ), ], ).show(); ">
    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

[ 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(); ">
    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

Comments
  • alert does not close .. pop the underlying page

    alert does not close .. pop the underlying page

    Hello, My alert box does not close.. When I press the button the page under the dialog is pop but the dialog remain on the screen.

    This is issue in a Cupertino tab child page

    here is an example

    import 'package:flutter/material.dart';
    import 'package:rflutter_alert/rflutter_alert.dart';
    import 'package:test_alert/home.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(home: HomePage());
      }
    }
    
    
    import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    import 'package:rflutter_alert/rflutter_alert.dart';
    import 'package:test_alert/page1.dart';
    
    class HomePage extends StatefulWidget {
      HomePage({Key key, this.title}) : super(key: key);
      final String title;
      @override
      _HomePageState createState() => _HomePageState();
    }
    
    class _HomePageState extends State<HomePage> {
      int currentIndex = 0;
      final GlobalKey<NavigatorState> firstTabNavKey = GlobalKey<NavigatorState>();
      @override
      Widget build(BuildContext context) {
        return CupertinoTabScaffold(
          tabBar: CupertinoTabBar(
            backgroundColor: Colors.white54,
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                icon: Icon(CupertinoIcons.search),
                title: Text('search'),
              ),
              BottomNavigationBarItem(
                icon: Icon(CupertinoIcons.search),
                title: Text('search1'),
              ),
            ],
            onTap: (index) {
              if (currentIndex == index) {
                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))
                  ],
                ).show();
    
                switch (index) {
                  case 0:
                    firstTabNavKey.currentState.popUntil((r) => r.isFirst);
                    break;
                  case 1:
                    firstTabNavKey.currentState.popUntil((r) => r.isFirst);
                    break;
                }
              }
              currentIndex = index;
            },
          ),
          tabBuilder: (BuildContext context, int index) {
            switch (index) {
              case 0:
                return CupertinoTabView(
                  navigatorKey: firstTabNavKey,
                  builder: (BuildContext context) => Page1(context),
                  defaultTitle: 'search',
                );
                break;
    
              case 1:
                return CupertinoTabView(
                  navigatorKey: firstTabNavKey,
                  builder: (BuildContext context) => Page1(context),
                  defaultTitle: 'search',
                );
                break;
            }
            return null;
          },
        );
      }
    }
    
    
    
    import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    import 'package:rflutter_alert/rflutter_alert.dart';
    
    class Page1 extends StatefulWidget {
      BuildContext context;
      Page1(BuildContext this.context);
      @override
      _Page1State createState() => new _Page1State();
    }
    
    class _Page1State extends State<Page1> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Center(
            child: RaisedButton(
              onPressed: () => Alert(
                context: widget.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(widget.context))
                ],
              ).show(),
            ),
          ),
        );
      }
    }
    
    
    opened by premtemp1 13
  • unable to load asset

    unable to load asset

    The following assertion was thrown resolving an image codec: Unable to load asset: packages/rflutter_alert/assets/images/close.png

    When the exception was thrown, this was the stack: #0 PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:221:7) #1 AssetBundleImageProvider._loadAsync (package:flutter/src/painting/image_provider.dart:484:44) #2 AssetBundleImageProvider.load (package:flutter/src/painting/image_provider.dart:469:14) #3 ImageProvider.resolve... (package:flutter/src/painting/image_provider.dart:327:17) ... Image provider: AssetImage(bundle: null, name: "packages/rflutter_alert/assets/images/close.png") Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#0020d(), name: "packages/rflutter_alert/assets/images/close.png", scale: 1.0)

    opened by michaelnguyen2021 10
  • How to return a string.

    How to return a string.

    My requirement is return a string from Navigator.pop(context, 'success;); but it is allowing only bool. Is it possible to return a string.

    Thank you very much Ivan Dcosta

    opened by idc1407 5
  • Made small updates, might want to use it

    Made small updates, might want to use it

    Great alert dialog, just what I was hoping someone would make since I was bored with the standard material dialog that I just couldn't customize enough. I hacked a few changes that I needed for my usage, and it's simple enough to offer in the next version.. I needed a general widget content option to provide my own form fields in the popup for small entry like a dropdown or input text. Really easy need, so I added this to my Alert Class: final Widget content; then in _buildDialog, right after the desc text, added this: content == null ? Container() : content,

    I also noticed there was an image parameter to use instead of the premade images for the AlertType, but it wasn't being used right. In _getImage() you assigned Widget response = image; but then response was overridden based on the AlertType specified. I wanted there to be something like AlertType.custom but rather than add that myself, I just modified this part of the switch statement: case AlertType.none: response = image == null ? Container() : image; break; Very easy fix, it now looks the way I wanted it and I'm quite happy with the results so I just wanted to share what I changed, adapt it as you see fit. Thanks.

    opened by Skquark 5
  •  Error: No named parameter with the nam e 'insetPadding'

    Error: No named parameter with the nam e 'insetPadding'

    Does any one getting this compilation error?

    /AppData/Roaming/Pub/Cache/hosted/pub.dartlang.org/rflutter_alert-1.1.0/lib/src/alert.dart:100:15: Error: No named parameter with the nam e 'insetPadding'.

    /flutter/packages/flutter/lib/src/material/dialog.dart:208:9: Context: Found this candidate, but the arguments don't match. const AlertDialog({ ^^^^^^^^^^^

    opened by vivekn4u 4
  • The method 'call' was called on null.

    The method 'call' was called on null.

    When pressing the close button (the x on top right corner) it does shows the following Exception on console although all seems to work ok on the screen:

    ════════ Exception caught by gesture ═══════════════════════════════════════════════════════════════ The following NoSuchMethodError was thrown while handling a gesture: The method 'call' was called on null. Receiver: null Tried calling: call()

    When the exception was thrown, this was the stack: #0 Object.noSuchMethod (dart:core-patch/object_patch.dart:53:5) #1 Alert._getCloseButton. (package:rflutter_alert/src/alert.dart:166:23) #2 _InkResponseState._handleTap (package:flutter/src/material/ink_well.dart:706:14) #3 _InkResponseState.build. (package:flutter/src/material/ink_well.dart:789:36) #4 GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:182:24) ... Handler: "onTap" Recognizer: TapGestureRecognizer#e1503 debugOwner: GestureDetector state: possible won arena finalPosition: Offset(348.3, 216.0) finalLocalPosition: Offset(6.8, 13.8) button: 1 sent tap down

    opened by hassan1709 4
  • Fix: The method 'call' was called on null.

    Fix: The method 'call' was called on null.

    closeFunction cannot be null else there is an exception when it's invoked

    The following NoSuchMethodError was thrown while handling a gesture:
    The method 'call' was called on null.
    Receiver: null
    Tried calling: call()
    
    opened by giandifra 4
  • Update RadioButton & setState

    Update RadioButton & setState

    I am trying to set a RadioList inside alert, I use the setState() to update alert how below reported.

    How can I update the alert?

    My Code: Column( children: [ new RadioListTile( title: new Text('Accessibile'), value: 1, groupValue: radioValue, onChanged: handleRadioValueChange), new othersRadioList ..... , ], ),

    void handleRadioValueChange(int value) { print(value); setState(() { radioValue = value;

    });
    

    }

    opened by Hauraky 4
  • Control the width of the dialog in landscape mode

    Control the width of the dialog in landscape mode

    Hi there, Is it possible to control the size of the alert dialog (particularly width of it) in landscape mode? Currently, it stretches a lot and it does not look normal in landscape mode and on tablets (iPad for example). I'd like to be able to set the max width. Other solution could be automatically showing the dialog box in a normal size without stretching.

    opened by iNima 4
  • Alert with Custom Image doesn't work

    Alert with Custom Image doesn't work

    I tried to setup an alert with custom image but it does work. I used to copy/past example : Alert( context: context, title: "RFLUTTER ALERT", desc: "Flutter is better with RFlutter Alert.", image: Image.asset("assets/success.png"), ).show();

    with a link to my own image, but no image appeard. Thanks

    opened by fabien79 3
  • Using Navigator.pop(context); is so glitch

    Using Navigator.pop(context); is so glitch

    Alert( context: this.context, title: '', image: Image.asset( "images/OrderCanceled.png", color: Color(0xffd25555), ), buttons: []).show(); Timer(Duration(milliseconds: 1500), () { Navigator.pop(context); Navigator.pop(context); Navigator.pop(context); });

    when i try to use pop on this wight , it works in other screens but doesn't on the main screen.. it pops the screen not the alert..

    is there is a way to make the alert hide after sometime without using Navigator.pop(context)

    opened by FarsFuad 3
  • AlertStyle alertPadding not working

    AlertStyle alertPadding not working

    I am creating a custom alert with custom styling. I want to change the padding of the alert. But the following code doesn't change the padding of the alert.

    var alertStyle = AlertStyle(
          alertPadding: EdgeInsets.all( 12.0),
       
        );
    

    Screenshot 2022-09-06 at 13 03 33

    opened by dhanukaperera 0
  • DialogButton's build method uses deprecated property

    DialogButton's build method uses deprecated property

    "accentColor" is used as the button color when the color property isn't specified. The property was deprecated after Flutter v2.3.0-0.1.pre, so it should be swapped for "colorScheme.secondary".

    opened by Rafael-Santos-EM 0
Owner
Ratel
We are digital technology developing office focused on mobile and web projects.
Ratel
SKAlertDialog - A highly customizable, powerful and easy-to-use alert dialog for Flutter.

SKAlertDialog A highly customizable, powerful and easy-to-use alert dialog for Flutter. GIF Screenshots SKAlertDialog Basic Alert Alert with buttons A

Senthil_Kumar 7 May 18, 2022
A popup simple topModalSheet menu button widget with handsome design and easy to use

top_modal_sheet A popup simple topModalSheet menu button widget with handsome design and easy to use. Installations Add top_modal_sheet: ^1.0.0 in you

Baldemar Alejandres 5 Jul 29, 2022
A Flutter Package for easy building dialogs

Easy Dialog package helps you easily create basic or custom dialogs. For extended documentation visit project pub package. Star ⭐ this repo if you lik

Ricardo Niño 39 Oct 14, 2022
Dialog-manager - A Flutter package that allows for neater declaration, abstraction and use of customisable dialogs

flutter_dialog_manager A Flutter package that allows for neater declaration, abs

Lucky Ebere 2 Dec 28, 2022
📸 Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget.

?? Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget. Photo View is largely used to show interacive images and other stuff such as SVG.

Blue Fire 1.7k Jan 7, 2023
A package for flutter to use alert and toast within one line code.

easy_alert A package for flutter to use alert and toast within one line code. Getting Started Add easy_alert: to your pubspec.yaml, and run flutt

null 34 Jun 25, 2021
Display simple blurry dialog popup for flutter

Blurry Dialog Features Display simple blurry dialog popup Offer built-in themes Possibility to create you custom dialog button click handler callbacks

Kouki Badr 7 Dec 18, 2022
Flutter widget to show text in popup or overlay container

flutter_show_more_text_popup Flutter widget to show text in popup or overlay container Installation Add this to your package's pubspec.yaml file depen

Sanjay Sharma 44 Jul 5, 2022
A package that creates a popup when there's no internet connection

internet_popup A package that shows a pop up alert when the internet connection is lost Features auto popUp option to fix or pop the warning one line

DropDew 4 Apr 19, 2022
A flutter package for displaying common picker dialogs.

Flutter Material Pickers A flutter package containing commonly used material design picker dialogs. Some are new, some wrap existing or built in picke

CodeGrue 89 Jan 2, 2023
A new Flutter package project for simple a awesome dialogs

awesome_dialog A new Flutter package project for simple and awesome dialogs Usage To use this package, add awesome_dialog as a dependency in your pubs

Marcos Rodriguez Toranzo 286 Jan 6, 2023
A multi select form field using alert dialog to select multiple items with checkboxes and showing as chips.

A multi select form field using alert dialog to select multiple items with checkboxes and showing as chips.

Carlos Eugenio Torres 73 Sep 7, 2022
A Redux version tailored for Flutter, which is easy to learn, to use, to test, and has no boilerplate

A Redux version tailored for Flutter, which is easy to learn, to use, to test, and has no boilerplate. Allows for both sync and async reducers.

Marcelo Glasberg 214 Dec 13, 2022
A Simple and easy to use flutter package for showing progress bar.

progress_dialog A Simple and easy to use flutter package for showing progress bar. #Usage Import the package import 'package:custom_progress_dialog/cu

Vikas Jilla 6 May 23, 2022
A really easy to use flutter toast library

BotToast ?? A really easy to use flutter toast library! Language: English | 中文简体 ?? Overview ?? Online Demo ?? Example ?? Renderings ?? Getting starte

null 719 Dec 28, 2022
Flutter Color Picker Wheel - an easy to use widget which can be heavily customized

Flutter Color Picker Wheel Flutter Color Picker Wheel is an easy to use widget which can be heavily customized. You can use the WheelColorPicker direc

Kexin Lu 35 Oct 4, 2022
Customizable Material and Cupertino buttons with progress indicators and more

future_button Customizable Material and Cupertino buttons with progress indicators and more.

Erzhan 33 Oct 13, 2022
A Highly customizable Phone input Flutter widget that supports country code, validation and contact picker.

A Highly customizable Phone input Flutter widget that supports country code, validation and contact picker.

null 6 Jun 7, 2022
Displays a highly customizable week view (or day view) which is able to display events, to be scrolled, to be zoomed-in & out and a lot more !

Displays a highly customizable week view (or day view) which is able to display events, to be scrolled, to be zoomed-in & out and a lot more !

Hugo Delaunay 196 Dec 2, 2022