dialog_alert_transition 1.0.6 copy "dialog_alert_transition: ^1.0.6" to clipboard
dialog_alert_transition: ^1.0.6 copied to clipboard

Creating a dialog is simpler and easier with the dialog_alert_transition package since it has transitions into and out of the dialog, it has a multilevel dialog handler. Available for android, ios, wi [...]

Dialog alert transition #

Creating a dialog is simpler and easier with the dialog_alert_transition package since it has transitions into and out of the dialog, it has a multilevel dialog handler. Available for android, ios, windows, linux, mac, web.

Screenshots #

Dialog alert in action

Link oficial PUB.DEV

Link oficial Github

Example #


import 'package:dialog_alert_transition/dialog_alert_transition.dart';
import 'package:flutter/material.dart';

class singleAlert extends StatefulWidget {
  const singleAlert({super.key});

  @override
  State<singleAlert> createState() => _multiAlert();
}

class _multiAlert extends State<singleAlert> {
  String stas = 'text old';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Single dialog'),
      ),
      body: Center(
        child: ListView(
          children: [
            for (transitionType e in transitionType.values) ...[
              TextButton(
                onPressed: () {
                  int token = controlAlertGo.generate();
                  dialogAlertTransion(
                      context: context,
                      title: const Text('Flutter OutlinedButton Example'),
                      content: const Column(
                        children: [
                          Text(
                              'FloatingActionButton (FAB) is a property of Scaffold(). In the above example, we’ve displayed a FloatingActionButton, also we’ve modified the style of that buttons such as color and position of the FAB. The output looks like this'),
                        ],
                      ),
                      alignment: Alignment.topCenter,
                      blur: true,
                      duration: 1000,
                      backgroundColor: Colors.black,
                      transitionType: e,
                      token: token,
                      rejectString: 'Close alert',
                      acceptString: 'Confirm this alert',
                      rejectFunc: () {
                        print('this function use is reject alert');
                      },
                      acceptFunc: () {
                        print('this function use in accept alert');
                      },
                      closeFunc: () {
                        setState(() {
                          stas = 'new string';
                        });
                      });
                },
                child: Text(e.name),
              ),
            ]
          ],
        ),
      ),
    );
  }
}

The transitions are as follows: #

The transition list is enumerated in an emun named transitionType.

FadeIn, 

FadeInDown, 

FadeInDownBig, 

FadeInUp, 

FadeInUpBig, 

FadeInLeft, 

FadeInLeftBig, 

FadeInRight, 

FadeInRightBig, 

BounceInDown, 

BounceInUp, 

BounceInLeft, 

BounceInRight, 

ElasticIn, 

ElasticInDown, 

ElasticInUp, 

ElasticInLeft, 

ElasticInRight, 

SlideInDown, 

SlideInUp, 

SlideInLeft, 

SlideInRight, 

FlipInX, 

FlipInY, 

ZoomIn, 

JelloIn, 

Bounce, 

Dance, 

Flash, 

Pulse, 

Roulette, 

ShakeX, 

ShakeY, 

Spin, 

SpinPerfect, 

Swing, 

Select transition #

way to select the transition


                  dialogAlertTransion(
                      context: context,
                      title: const Text('Flutter OutlinedButton Example'),
                      transitionType: transitionType.Bounce,
                      content: const Column(
                        children: [
                          Text(
                              'FloatingActionButton (FAB) is a property of Scaffold(). In the above example, we’ve displayed a FloatingActionButton, also we’ve modified the style of that buttons such as color and position of the FAB. The output looks like this'),
                        ],
                      ),
                      );

multi dialogo and close #

To send a custom dialog you must create a token and refer to the dialog handler with the variable name controlAlertGo and thus be able to close the dialog

Example #

  int token = controlAlertGo.generate(); 
   dialogAlertTransion(
                      context: context,
                      title: const Text('Flutter OutlinedButton Example'),
                      content: Column(
                        children: [
                          const Text(
                              'FloatingActionButton (FAB) is a property of Scaffold(). In the above example, we’ve displayed a FloatingActionButton, also we’ve modified the style of that buttons such as color and position of the FAB. The output looks like this'),
                          ElevatedButton(
                            onPressed: () {
                              int token = controlAlertGo.generate();
                              dialogAlertTransion(
                                context: context,
                                title: const Text(
                                    'Flutter OutlinedButton Example'),
                                content: Column(
                                  children: [
                                    const Text(
                                        'FloatingActionButton (FAB) is a property of Scaffold(). In the above example, we’ve displayed a FloatingActionButton, also we’ve modified the style of that buttons such as color and position of the FAB. The output looks like this'),
                                    ElevatedButton(
                                      onPressed: () {
                                        controlAlertGo.close(
                                            token: token, context: context);
                                      },
                                      child: const Text('back'),
                                    ),
                                  ],
                                ),
                                alignment: Alignment.topCenter,
                                blur: true,
                                transitionType: transitionType.ElasticIn,
                                duration: 1000,
                                backgroundColor: Colors.black,
                                token: token,
                                closeFunc: () {
                                  setState(() {
                                    stas = 'New  String';
                                  });
                                },
                              );
                            },
                            child: const Text('new Alert'),
                          ),
                        ],
                      ),
                      alignment: Alignment.topCenter,
                      blur: true,
                      duration: 1000,
                      backgroundColor: Colors.black,
                      transitionType: e,
                      closeFunc: () {
                        setState(() {
                          stas = 'New string';
                        });
                      });

Position #

Change the position of the dialog with the positions right, left, bottom up by default has the value of 0

##example


                  dialogAlertTransion(
                      top: 15,
                      left: 25,
                      bottom: 25,
                      rigth: 50,
                      context: context,
                      title: const Text('Flutter OutlinedButton Example'),s
                      content: const Column(
                        children: [
                          Text(
                              'FloatingActionButton (FAB) is a property of Scaffold(). In the above example, we’ve displayed a FloatingActionButton, also we’ve modified the style of that buttons such as color and position of the FAB. The output looks like this'),
                        ],
                      ),);

blur #

disable or enabled is true or false value


 dialogAlertTransion(
                      blur: true ||false,...);
3
likes
140
pub points
56%
popularity

Publisher

unverified uploader

Creating a dialog is simpler and easier with the dialog_alert_transition package since it has transitions into and out of the dialog, it has a multilevel dialog handler. Available for android, ios, windows, linux, mac, web

Homepage
Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter, plugin_platform_interface

More

Packages that depend on dialog_alert_transition