preface

Flutter is Google’s open source application development framework that builds apps for Android, iOS, Windows, Linux and other platforms using just one set of code. Flutter has very high performance with a refresh rate of 120fps and is currently a very popular cross-platform UI development framework.

This column has collected nearly 70 great open source libraries on Github and will continue to be updated. I hope this can help you improve the efficiency of brick moving and wish the ecology of Flutter better and better 🎉🎉.

The body of the

I. 🚀 Wheel introduction

  • Name: awesome_dialog
  • Overview: an easy to use built-in animation popover
  • Publisher:[email protected]
  • Warehouse Address:awesomeDialogs
  • Recommended index: ⭐️⭐️ disk ⭐ password
  • Common indexes are as follows: ⭐️⭐️ disk ⭐ ⭐
  • Effect preview:

2. ⚙️ Installation and use

Dependencies: awesome_dialog: ^ 2.1.2Copy the code
import 'package:awesome_dialog/awesome_dialog.dart';
Copy the code

3. 🔧 common attributes

attribute type describe
dialogType DialogType Set the popover type
customHeader Widget Set a custom title (if so, DiaologType is ignored.)
width double Maximum width of popover
title String Popup window title
desc String Popover describes text
body Widget Popover body. If this property is set, the title and description are ignored.
context BuildContext @required
btnOkText String Confirm the text of the button
btnOkIcon IconData The icon of the confirm button
btnOkOnPress Function Confirm button event
btnOkColor Color Confirm button color
btnOk Widget Create a custom button. The above confirmation button attributes are ignored
btnCancelText String Cancel the text of the button
btnCancelIcon IconData The cancel button icon
btnCancelOnPress Function Cancel button event
btnCancelColor Color Cancel button color
btnCancel Widget Create a custom button. The above cancel button attributes will be ignored
buttonsBorderRadius BorderRadiusGeometry Button with rounded corners
dismissOnTouchOutside bool Click outside to disappear
onDissmissCallback Function Popover close callback
animType AnimType Animation types
aligment AlignmentGeometry Pop-up way
useRootNavigator bool Use the root navigation controller instead of the current root navigation controller to handle cross-interface closing pop-ups.
headerAnimationLoop bool Whether the title animation plays in a loop
padding EdgeInsetsGeometry Inside margin of popover
autoHide Duration Automatic hiding time
keyboardAware bool Whether keyboard pop-up content is blocked to follow the movement
dismissOnBackKeyPress bool Controls whether popovers can disappear with the close button
buttonsBorderRadius BorderRadiusGeometry Button with rounded corners
buttonsTextStyle TextStyle Button text style
showCloseIcon bool Whether to display the close button
closeIcon Widget Close button icon
dialogBackgroundColor Color Popover background color
borderSide BorderSide The whole popover shape

4. 🗂 example

1. Button with click animation

AnimatedButton(color: colors.cyan, text: 'This is a button with clicked animation ', pressEvent: () {},);Copy the code

2. Fixed-width prompt box with confirm/cancel buttons

AnimatedButton(text: 'Confirm/cancel ', pressEvent: () {AwesomeDialog(context: context, dialogType: DialogType.INFO_REVERSED, borderSide: const BorderSide( color: Colors.green, width: 2, ), width: 380, buttonsBorderRadius: const Borderradius. all(radius.circular (2),), btnCancelText: 'Ignore ', btnOkText:' Run! BOTTOMSLIDE ', headerAnimationLoop: false, animType: animtype. BOTTOMSLIDE, title: 'prompt ', desc:' A level 1 bug is at your bottom. ', showCloseIcon: true, btnCancelOnPress: () {}, btnOkOnPress: () {}, ).show(); });Copy the code

3. Customize button style questions dialog box

AnimatedButton(color: colors.orange [700], text: 'Problem dialog with custom button style ', pressEvent: () {AwesomeDialog(context: context, dialogType: DialogType.QUESTION, headerAnimationLoop: false, animType: AnimType.BOTTOMSLIDE, title: 'Trigger extra plot ', DESC:' Find a passer-by fainted in the grass, what would you do? ', buttonsTextStyle: const TextStyle(color: colors.black), btnCancelText: 'Take his money ', btnOkText:' Save ', showCloseIcon: true, btnCancelOnPress: () {}, btnOkOnPress: () {}, ).show(); });Copy the code

4. A button-free information dialog box is displayed

AnimatedButton(color: colors. grey, text: 'pressEvent ', pressEvent: () {AwesomeDialog(context: Context, headerAnimationLoop: true, animType: animType. BOTTOMSLIDE, title: 'prompt ', desc: 'You save a passer-by and find out that he is a master of Flutter. To show your gratitude, he presents you with a full set of Flutter learning materials... ', ).show(); });Copy the code

5. Alert box

AnimatedButton(color: colors. orange, text: 'alert ', pressEvent: () {AwesomeDialog(context: context, dialogType: DialogType.WARNING, headerAnimationLoop: false, animType: AnimType.TOPSLIDE, showCloseIcon: true, closeIcon: Const Icon(Icons. Close_fullscreen_outlined), title: 'warning ', desc:' Accidentally found a bug nest you're ready to invest? ', btnCancelOnPress: () {}, onDissmissCallback: (type) { debugPrint('Dialog Dissmiss from callback $type'); }, btnCancelText: 'retreat ', btnOkText:' fight ', btnOkOnPress: () {},).show(); });Copy the code

6. An error dialog box is displayed

AnimatedButton(color: colors. red, text: 'error ', pressEvent: () {AwesomeDialog(context: context, dialogType: Dialogtype. ERROR, animType: animType.RIGHSLIDE, headerAnimationLoop: true, title: 'Challenge failed ', desc: 'You are outnumbered, defeated, (after returning to the birth point, take out the full set of learning materials presented by the big man, determined to revenge after learning...) ', btnOkOnPress: () {}, btnOkIcon: Icons.cancel, btnOkColor: Colors.red, ).show(); });Copy the code

7. A success dialog box is displayed

AnimatedButton(color: colors. green, text: 'success ', pressEvent: () {AwesomeDialog(context: context, animType: AnimType.LEFTSLIDE, headerAnimationLoop: false, dialogType: DialogType.SUCCES, showCloseIcon: true, title: BtnOkOnPress: () {debugPrint('OnClcik'); }, btnOkIcon: Icons.check_circle, onDissmissCallback: (type) { debugPrint('Dialog Dissmiss from callback $type'); }, ).show(); });Copy the code

8. Popover without top animation

AnimatedButton(color: colors.cyan, text: 'Popover without top ', pressEvent: () {AwesomeDialog(context: context, headerAnimationLoop: false, dialogType: DialogType.NO_HEADER, title: 'No Header', desc:'Dialog description here... ', btnOkOnPress: () { debugPrint('OnClcik'); }, btnOkIcon: Icons.check_circle, ).show(); });Copy the code

9. Customize content pop-ups

AnimatedButton(color: colors.purple, text: 'custom content popover ', pressEvent: () {AwesomeDialog(context: context, animType: AnimType.SCALE, dialogType: DialogType.INFO, body: const Center( child: Text( 'If the body is specified, then title and description will be ignored, this allows to further customize the dialogue.', style: TextStyle(fontStyle: FontStyle.italic), ), ), title: 'This is Ignored', desc: 'This is also Ignored', ).show(); });Copy the code

10. Automatically hide pop-ups

AnimatedButton(color: colors. grey, text: 'automatic hide popover ', pressEvent: () {AwesomeDialog(context: context, dialogType: DialogType.INFO, animType: AnimType.SCALE, title: 'Auto Hide Dialog', desc: 'AutoHide after 2 seconds', autoHide: const Duration(seconds: 2), ).show(); });Copy the code

11. Test pop-ups

AnimatedButton(color: color.blue, text: 'Test popover ', pressEvent: () {AwesomeDialog(context: context, keyboardAware: true, dismissOnBackKeyPress: false, dialogType: DialogType.WARNING, animType: AnimType.BOTTOMSLIDE, btnCancelText: "Cancel Order", btnOkText: "Yes, I will pay", title: 'Continue to pay? ', desc:'Please confirm that you will pay 3000 INR within 30 mins. Creating orders without paying will create penalty charges, and your account may be disabled.', btnCancelOnPress: () {}, btnOkOnPress: () {}, ).show(); });Copy the code

12. Text input popup

AnimatedButton(
    color: Colors.blueGrey,
    text: '带有文本输入框的弹窗',
    pressEvent: () {
        late AwesomeDialog dialog;
        dialog = AwesomeDialog(
        context: context,
        animType: AnimType.SCALE,
        dialogType: DialogType.INFO,
        keyboardAware: true,
        body: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
            children: <Widget>[
                Text('Form Data',
                    style: Theme.of(context).textTheme.headline6,),
                const SizedBox(height: 10,),
                Material(
                    elevation: 0,
                    color: Colors.blueGrey.withAlpha(40),
                    child: TextFormField(
                        autofocus: true,
                        minLines: 1,
                        decoration: const InputDecoration(
                        border: InputBorder.none,
                        labelText: 'Title',
                        prefixIcon: Icon(Icons.text_fields),
                        ),
                    ),
                ),
                const SizedBox(height: 10,),
                Material(
                    elevation: 0,
                    color: Colors.blueGrey.withAlpha(40),
                    child: TextFormField(
                        autofocus: true,
                        keyboardType: TextInputType.multiline,
                        minLines: 2,
                        maxLines: null,
                        decoration: const InputDecoration(
                        border: InputBorder.none,
                        labelText: 'Description',
                        prefixIcon: Icon(Icons.text_fields),
                        ),
                    ),
                ),
                const SizedBox(height: 10,),
                AnimatedButton(
                    isFixedHeight: false,
                    text: 'Close',
                    pressEvent: () {
                        dialog.dismiss();
                    },
                )
            ],),
        ),
    )..show();
});
Copy the code