A collection of stylish animated dialogs like Normal, Progress, Success, Info, Warning, and Error for flutter.

Overview

stylish_dialog

Hello StylishDialog Version

Normal Progress Success Info Warning Error

A collection of stylish animated dialogs like Normal, Progress, Success, Info, Warning, and Error for flutter.

Showcase

Installing

dependencies:
    stylish_dialog: any  # Any attribute updates automatically your source to the lastest version
    #stylish_dialog: ^0.0.8+1

Import

import 'package:stylish_dialog/stylish_dialog.dart';

📙 How To Use

context:
alertType:
titleText:
contentText:
addView:
confirmButton:
cancelButton:
dismissOnTouchOutside:
animationLoop:
@deprecated confirmText:
@deprecated cancelText:
@deprecated confirmPressEvent:
@deprecated cancelPressEvent:
    

Properties

context → BuildContext

alertType → StylishDialogType

titleText → String

addView → Widget

confirmText → String

confirmText → String

cancelText → String

confirmPressEvent → void Function ()

cancelPressEvent → void Function ()

dismissOnTouchOutside → bool

rootNavigator → bool

animationLoop → bool

confirmButton → Widget

cancelButton → Widget

Alert Type

StylishDialogType.NORMAL
StylishDialogType.PROGRESS
StylishDialogType.SUCCESS
StylishDialogType.INFO
StylishDialogType.WARNING
StylishDialogType.ERROR

Press Event

///Press events are deprecated and should be replaced with
/// [confirmButton:], [cancelButton:] 
///  To handle clicks you can wrap your widget with
/// [GestureDetector] or [InkWell]
confirmPressEvent: (){
        
}
    
cancelPressEvent: (){
        
}

Bind Dialog/Change Alert Type

dialog.changeAlertType(
    alertType: /*Alert Type*/,
    ...
);

Example

StylishDialog dialog = StylishDialog(
        context: context,
        alertType: StylishDialogType.SUCCESS,
        titleText: 'This is title',
        contentText: 'This is content text',
        animationLoop: true,
    );
        
//show stylish dialog
dialog.show();
    
//dismiss stylish dialog
dialog.dismiss();

//dialog.dismiss(/*rootNavigator: bool  default true */);

Simple Dialog

Simple Stylish Dialog with title and content text

StylishDialog(
    context: context,
    alertType: StylishDialogType.NORMAL,
    titleText: 'This is title',
    contentText: 'This is content text',
).show();

Normal Dialog with Custom Widget

Normal dialog with custom widget Note: addView: is only supported with StylishDialogType.NORMAL alertType

StylishDialog(
    context: context,
    alertType: StylishDialogType.NORMAL,
    titleText: 'Name',
    contentText: 'Please enter your name',
    confirmText: 'Submit',
    confirmPressEvent: () {
        print(controller.text);
    },
    addView: TextField(
        controller: controller,
        ),
).show();

Progress Dialog

Progress dialog without title and content text

StylishDialog(
    context: context,
    alertType: StylishDialogType.PROGRESS,
    titleText: 'This is title',
    contentText: 'This is content text',
).show();

Progress dialog with only title

StylishDialog(
    context: context,
    alertType: StylishDialogType.PROGRESS,
    titleText: 'This is title',
    contentText: 'This is content text',
).show();

Progress dialog with title and content text

StylishDialog(
    context: context,
    alertType: StylishDialogType.PROGRESS,
    titleText: 'This is title',
    contentText: 'This is content text',
).show();

Success Dialog

Success dialog without title and content text

StylishDialog(
    context: context,
    alertType: StylishDialogType.SUCCESS,
).show();

Success dialog with only title

StylishDialog(
    context: context,
    alertType: StylishDialogType.SUCCESS,
    titleText: 'Wow',
).show();

Success Dialog with title and content text

StylishDialog(
    context: context,
    alertType: StylishDialogType.SUCCESS,
    titleText: 'Wow',
    contentText: 'Task completed',
).show();

Info Dialog

Info Dialog without title and content text

StylishDialog(
    context: context,
    alertType: StylishDialogType.INFO,
).show();

Info Dialog with only title

StylishDialog(
    context: context,
    alertType: StylishDialogType.INFO,
    titleText: 'You know',
).show();

Info Dialog with title and content text

StylishDialog(
    context: context,
    alertType: StylishDialogType.INFO,
    titleText: 'You know',
    contentText: 'This is an amazing dialog',
).show();

Warning Dialog

Warning Dialog without title and content text

StylishDialog(
    context: context,
    alertType: StylishDialogType.WARNING,
).show();

Warning Dialog with only title

StylishDialog(
    context: context,
    alertType: StylishDialogType.WARNING,
    titleText: 'Wait',
).show();

Warning Dialog with title and content text

StylishDialog(
    context: context,
    alertType: StylishDialogType.WARNING,
    titleText: 'Wait',
    contentText: 'Are you sure you want to delete',
).show();

Error Dialog

Error Dialog without title and content text

StylishDialog(
    context: context,
    alertType: StylishDialogType.ERROR,
).show();

Error Dialog with only title

StylishDialog(
    context: context,
    alertType: StylishDialogType.ERROR,
    titleText: 'Oops',
).show();

Error Dialog with title and content text

StylishDialog(
    context: context,
    alertType: StylishDialogType.ERROR,
    titleText: 'Oops',
    contentText: 'Task Failed',
).show();

Success Dialog

Success Dialog with click

StylishDialog(
    context: context,
    alertType: StylishDialogType.SUCCESS,
    titleText: 'Wow',
    contentText: 'You did it',
    confirmText: 'Dismiss',
    confirmPressEvent: () {
        //Dismiss stylish dialog
        Navigator.of(context).pop();
    },
).show();

Different Ways to bind

Progress dialog binds with Success dialog

StylishDialog dialog = StylishDialog(
    context: context,
    alertType: StylishDialogType.PROGRESS,
    titleText: 'Processing...',
    dismissOnTouchOutside: false,
    animationLoop: true,
);
dialog.show();

Future.delayed(Duration(seconds: 3), () {
    dialog.changeAlertType(
    alertType: StylishDialogType.SUCCESS,
        titleText: 'Congrats!',
        contentText: 'Task completed successfuly',

        confirmButton: TextButton(
            onPressed: () {
                dialog.dismiss();
            },
            style: ButtonStyle(
                backgroundColor:
                    MaterialStateProperty.all(Colors.teal),
                ),
            ),
            child: Padding(
                padding: const EdgeInsets.all(4),
                child: Text('Dismiss',
                        style: TextStyle(
                            color: Colors.white, fontSize: 16),
                        ),
                    ),

        //confirmText: 'Dismiss',
        //confirmPressEvent: () {
        //    dialog.dismiss();
        //},
    );
});
You might also like...

This is an animated app used to control Tesla Car which is on progress and will be published soon

This is an animated app used to control Tesla Car which is on progress and will be published soon

Animated Tesla App Conect using Flutter Packages we are using: flutter_svg: link We will cover how to use ImplicitlyAnimatedWidge and how to use multi

Nov 13, 2021

A Flutter step_tracker plugin is collect information from user and display progress through a sequence of steps. this plugin also have privilege for fully customization from user side. like flipkart, amazon, myntra, meesho.

A Flutter step_tracker plugin is collect information from user and display progress through a sequence of steps. this plugin also have privilege for fully customization from user side. like flipkart, amazon, myntra, meesho.

step_tracker plugin A Flutter step_tracker plugin is collect information from user and display progress through a sequence of steps. this plugin also

Oct 21, 2022

Flutter-Animated-Library-of-Books - Flutter App - Animated Book Library

bookshelf A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if thi

Dec 4, 2022

Animated dialog box - A pure dart package for showing animated alert box.

Animated dialog box - A pure dart package for showing animated alert box.

animated_dialog_box A pure dart package for showing animated alert box. Getting Started https://github.com/Shubham-Narkhede/animated_dialog_box/blob/m

Jul 24, 2022

Animated shimmer - A simple & lightweight widget to display an animated shimmer effect

Animated shimmer - A simple & lightweight widget to display an animated shimmer effect

Animated Shimmer Supports Null Safety A simple & lightweight widget to display a

Apr 27, 2022

Find The Latest trending and upcoming movies and tv shows with MovieDB app. The app contains all info about movies and tv shows. find similar movies or shows, Browse all genres, video trailers, backdrops, logos, and posters.

MovieDB App Features. Dynamic Theming Search Functionality Onboarding-Screen Select favourite movie Home Screen Tranding movie Movies different catego

Dec 12, 2022

Dialogs for picking and saving files in Android and in iOS.

flutter_file_dialog Dialogs for picking and saving files in Android and in iOS. Features Supports Android (API level 19 or later) and iOS (10.0 or lat

Dec 31, 2022

Flutter-Apps-Collection: a collection of apps made in flutter for learning purpose

 Flutter-Apps-Collection: a collection of apps made in flutter for learning purpose

Flutter-Apps-Collection This is a repository of a collection of apps made in flutter for learning purpose Some Screenshots . . . Apps build in Flutter

May 27, 2022

Easy nav - A simple wrapper around flutter navigator, dialogs and snackbar to do those things without context

EasyNav Just a simple wrapper around flutter navigator, dialogs and snackbar to

Feb 26, 2022
Releases(0.0.12)
Owner
Marsad Maqsood
In love with programming
Marsad Maqsood
A Flutter library aims to help you create animated, simple, and stylish Material Dialogs in your app.

Flutter Material Dialogs Flutter Material Dialogs ?? A Flutter library aims to help you create ????animated, ?? simple, ?? stylish Material Dialogs in

Ezaldeen Sahb 69 Dec 25, 2022
D info - Flutter package for response info message

D'Info Flutter package for response info message. It's like bootstrap view but s

Indra Trisna Raharja 4 Oct 26, 2022
A Flutter Material Button that animates between Progress and Error states

progress_button A Material Flutter Button that supports progress and error visuals Getting Started ProgressButton is designed to be easy to use and cu

Halil Ozercan 132 Sep 21, 2022
Warning: Xournal++ Mobile is currently in early development and not yet stable

Xournal++ Mobile Warning: Xournal++ Mobile is currently in early development and not yet stable. Use with caution! A port of the main features of Xour

Jonathan Baginski 1 Jun 6, 2022
This is a dart package that converts words to numbers. It can be used in Flutter and normal Dart programs

Wordstonumbers.dart Wordstonumbers.dart is a simple dart package that converts a string of simple worded numbers into digits (e.g one hundred -> 100).

Michael Essiet 3 Oct 17, 2022
A simple modal progress HUD (heads-up display, or progress indicator) for flutter

modal_progress_hud A simple widget wrapper to enable modal progress HUD (a modal progress indicator, HUD = Heads Up Display) Inspired by this article.

Maurice McCabe 157 Nov 22, 2022
Flutter package to diplay progress through a milestone progress widget

milestone_progress Flutter package for IOS and Android to display progress through milestone progress widget. Screenshots ## Usage [Example]https://gi

Harpreet Singh 16 Aug 4, 2020
Wave progress - A custom wave progress widget

wave_progress_widget A customable wave progress widget Preview How to use Add this to your package's pubspec.yaml file: dependencies: wave_progress_

idan ben shimon 41 Jul 18, 2022
A simple screen that is shown when your app gets crashed instead of the normal crash dialog. It's very similar to the one in Flutter.

Red Screen Of Death What A simple screen that is shown when your app gets crashed instead of the normal crash dialog. It's very similar to the one in

Ahmad Melegy 178 Dec 9, 2022
MedtApp Is A Meditation App With Basic Fiture Of Normal Meditation App.

?? Meditation App MedtApp Is A Meditation App With Basic Fiture Of Normal Meditation App. ?? Fiture Icon Logo App Name Splash Screen Easy State Manage

fizfat 5 Nov 24, 2022