SKAlertDialog - A highly customizable, powerful and easy-to-use alert dialog for Flutter.

Overview

SKAlertDialog

  A highly customizable, powerful and easy-to-use alert dialog for Flutter.   Flutter pub package

GIF

Screenshots

SKAlertDialog Basic Alert Alert with buttons Alert with custom buttons
Login Form Checkbox Radio button Custom Dialog

💻 Installation

You just need to add sk_alert_dialog as a dependency in your pubspec.yaml file.

dependencies:
sk_alert_dialog: ^1.0.0

Usage

Import this class

import 'package:sk_alert_dialog/sk_alert_dialog.dart';

Simple Alert

     SKAlertDialog.show(
        context: context,
        type: SKAlertType.info,
        title: 'Simple Alert',
        message: 'Hi! Welcome to SKALertDialog',
        onOkBtnTap: (value) {
          print('Okay Button Tapped');
        },
      );

Alert with buttons

    SKAlertDialog.show(
        context: context,
        type: SKAlertType.buttons,
        title: 'Alert with buttons',
        message: 'Shall we move to next alert?',
        onOkBtnTap: (value) {
          print('Okay Button Tapped');
        },
        onCancelBtnTap: (value) {
          print('Cancel Button Tapped');
        },
      );

Alert with custom buttons

   SKAlertDialog.show(
        context: context,
        type: SKAlertType.buttons,
        title: 'Alert with custom buttons',
        message: 'Do you like this package?',
        okBtnText: 'YES',
        okBtnTxtColor: Colors.white,
        okBtnColor: const Color(0xFF3BD459),
        cancelBtnText: 'NO',
        cancelBtnTxtColor: Colors.white,
        cancelBtnColor: const Color(0xFFFF4954),
        onOkBtnTap: (value) {
          print('Okay Button Tapped');
        },
        onCancelBtnTap: (value) {
          print('Cancel Button Tapped');
        },
      );

Login Form

  SKAlertDialog.show(
        context: context,
        type: SKAlertType.loginform,
        title: 'Login Form',
        okBtnText: 'LOGIN',
        onOkBtnTap: (value) {
          print('Okay Button Tapped');
        },
        onCancelBtnTap: (value) {
          print('Cancel Button Tapped');
        },
        onEmailTextFieldChanged: (value) {
          print('On Email Text Changed $value');
        },
        onPasswordTextFieldChanged: (value) {
          print('On Password Text Changed $value');
        },
      );

Checkbox

    SKAlertDialog.show(
        context: context,
        type: SKAlertType.checkbox,
        checkBoxAry: {'Choice One': true, 'Choice Two': false, 'Choice Three': true, 'Choice Four': false, 'Choice Five': false},
        title: 'Checkbox',
        onCancelBtnTap: (value) {
          print('Cancel Button Tapped');
        },
        onCheckBoxSelection: (value) {
          print('onCheckBoxSelection $value');
        },
      );

Radio button

    SKAlertDialog.show(
        context: context,
        type: SKAlertType.radiobutton,
        radioButtonAry: {'Choice One': 1, 'Choice Two': 2, 'Choice Three': 3, 'Choice Four': 4, 'Choice Five': 5},
        title: UtilsImporter().stringUtils.radio_button_alert_title,
        onCancelBtnTap: (value) {
          print('Cancel Button Tapped');
        },
        onRadioButtonSelection: (value) {
          print('onRadioButtonSelection $value');
        },
      );

Custom Dialog

    SKAlertDialog.show(
        context: context,
        type: SKAlertType.custom,
        customWidget: customWidget(),
      );

Create the custom widget

  Widget customWidget() { 
     return new Padding(
        padding: EdgeInsets.only(left: 20, right: 20, top: 20, bottom: 20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              'Thank you for reviewing the package',
              style: TextStyle(
                  fontWeight: FontWeight.w400,
                  color: Theme.of(context).primaryColorDark.withOpacity(0.7),
                  fontSize: 20),
            ),
            SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                FlatButton(
                  color: const Color(0xFF50A1FF),
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  child: Text(
                    'The End !',
                    style: TextStyle(
                        fontWeight: FontWeight.w700,
                        color: Colors.white,
                        fontSize: 20),
                  ),
                )
              ],
            ),
          ],
        ));
  }
You might also like...

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

Dec 28, 2022

Flutter package: Easy and powerful internationalization using Dart extensions.

Flutter package: Easy and powerful internationalization using Dart extensions.

i18n_extension Non-boilerplate Translation and Internationalization (i18n) for Flutter Start with a widget with some text in it: Text("Hello, how are

Dec 29, 2022

Progress Dialog widget for flutter projects with ability to customize loading widget, background color and background blur.

Progress Dialog widget for flutter projects with ability to customize loading widget, background color and background blur.

DISCONTINUED Checkout ArsDialog ars_progress_dialog Customizable progress dialog for Flutter applications with smooth animation for background dim col

Apr 15, 2022

Flutter progress dialog. Support both Android and iOS platform.

Flutter progress dialog. Support both Android and iOS platform.

Flutter Progress Dialog [pub packages] | Flutter progress dialog. Support both Android and iOS platform

Oct 9, 2022

Make your native android Dialog Fancy and Gify.

Make your native android Dialog Fancy and Gify.

Make your native android Dialog Fancy and Gify. A library that takes the standard Android Dialog to the next level with a variety of styling options and Gif's. Style your dialog from code.

Jan 2, 2023

Display simple blurry dialog popup for flutter

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

Dec 18, 2022

A Flutter widget to show a text form field to display a date or clock dialog

A Flutter widget to show a text form field to display a date or clock dialog

A Flutter widget to show a text form field to display a date or clock dialog. This widget extend TextField and has a similar behavior as TextFormField.

Jan 6, 2023

Flutter overlay loading dialog example

Flutter overlay loading dialog example

flutter_overlay_loading_dialog_example Demo

Mar 24, 2022

A Flutter plugin which makes it straightforward to show the native equivalent of a CupertinoAlertDialog or CupertinoActionSheet dialog

A Flutter plugin which makes it straightforward to show the native equivalent of a CupertinoAlertDialog or CupertinoActionSheet dialog

A Flutter plugin which makes it straightforward to show the native equivalent of a CupertinoAlertDialog or CupertinoActionSheet dialog

Dec 9, 2022
Comments
  • package requires google font 1.0.0

    package requires google font 1.0.0

    Hi, Before flutter 2 I used your package and was working well. now with Flutter 2 I have following error:

                  Because every version of sk_alert_dialog depends on google_fonts ^1.1.0 which depends on http ^0.12.0+2, every 
                 version of sk_alert_dialog requires http ^0.12.0+2.
    

    when I add google_font 1.1.0 :

                 Because google_fonts <2.0.0-nullsafety.0 depends on http ^0.12.0+2 and tasneem_app depends on http ^0.13.3, 
                 google_fonts <2.0.0-nullsafety.0 is forbidden.
    

    google_map_places requires http 0.13.1 at least ..I need the google places . If I upgrade google_map 2.1.0 m I get this error :

             Because every version of sk_alert_dialog depends on google_fonts ^1.1.0 and tasneem_app depends on google_fonts 
             ^2.1.0, sk_alert_dialog is forbidden.
    

    Why not upgrade sk_alert to use google_font 2.1.0 ?

    opened by beautybird 3
  • How to dismiss the dialog?

    How to dismiss the dialog?

    I am using the SKAlertType.buttons with Ok and cancel buttons in my app. Clicking the cancel button should dismiss the dialog but instead the app screen is taken off the stack. I am using Navigator.of(context).pop(). Is there any other way to do the same?

    opened by BismeetSingh 0
Owner
Senthil_Kumar
📱Mobile App Developer 🌐 Web Developer
Senthil_Kumar
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 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
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
Sliding card is a highly customizable flutter package that will help you create beautiful Cards with a sliding animation effect.

Sliding Card Introduction Sliding card is a highly customizable flutter package that will help you create beautiful Cards with a sliding animation eff

null 21 Nov 4, 2022
Animated, highly customizable, open-source Flutter gauge indicator widgets

Animated, highly customizable, open-source Flutter gauge indicator widgets. They use renderbox under the hood, thus ensuring high performance.

HTD Health 6 Jun 10, 2022
Widget to let the user search through a keyword string typed on a customizable keyboard in a single or multiple choices list presented as a dropdown in a dialog box or a menu.

searchable_dropdown Widget to let the user search through a keyword string typed on a customizable keyboard in a single or multiple choices list prese

Bobby Stenly Irawan 108 Sep 11, 2022
A highly customizable multiple selection widget with search functionality.

A highly customizable multiple selection widget with search functionality.

null 5 Dec 19, 2022
A highly customizable toggle switch with a loading state.

A highly customizable toggle switch with a loading state.

null 6 Dec 30, 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