flutter_custom_dialog 1.0.16

  • Readme
  • Changelog
  • Example
  • Installing
  • 95

✨ flutter_custom_dialog #

pub package

[Lanuage ~~] English | 中文文档

Global dialog function encapsulation, with a semantic way to fill the content inside the dialog, the current function provided

  1. Support for a few semantic component methods to populate the component content inside dialog
  2. Support for customizing semantic components for developers to freely populate component content inside dialog
  3. Support setting dialog background color, foreground color, position, animation, click the external disappear and other functions, see the details below
  4. Support no Context call dialog, see below

🎖 Installing #

1、install

dependencies:
  flutter_custom_dialog: ^1.0.16

2、import

import 'package:flutter_custom_dialog/flutter_custom_dialog.dart';

🎖 Example #

dialog_demo


divider

body

head&body

listTile

ListRadio

progress

progress&body

bottom sheet

notice

pop menu
✅ Support for custom locations

dialog_gravity


bottom

top

left

right

center

left bottom

left top

right bottom

right top

dialog_animation


scaleIn

fadeIn

rotateIn

customIn
✅ Support for custom animations

⚡ Dialog Property #

dialog property Settings can be called through the method of member variables, as detailed in the following table

YYDialog YYNoticeDialog() {
  return YYDialog().build()
    ..width = 120
    ..height = 110
    ..backgroundColor = Colors.black.withOpacity(0.8)
    ..borderRadius = 10.0
    ..showCallBack = () {
      print("showCallBack invoke");
    }
    ..dismissCallBack = () {
      print("dismissCallBack invoke");
    }
    ..widget(Padding(
      padding: EdgeInsets.only(top: 21),
      child: Image.asset(
        'images/success.png',
        width: 38,
        height: 38,
      ),
    ))
    ..widget(Padding(
      padding: EdgeInsets.only(top: 10),
      child: Text(
        "Success",
        style: TextStyle(
          fontSize: 15,
          color: Colors.white,
        ),
      ),
    ))
    ..animatedFunc = (child, animation) {
      return ScaleTransition(
        child: child,
        scale: Tween(begin: 0.0, end: 1.0).animate(animation),
      );
    }
    ..show();
}

Supported attributes

propertydescriptiondefault
widthDialog width0
heightDialog heightAdaptive component height
durationDialog animation time250 ms
gravityWhere the dialog appearscenter
gravityAnimationEnableThe dialog appears with the default animation availablefalse
marginThe margin of a dialogEdgeInsets.all(0.0)
barrierColorDialog barrierColor30% of black
decorationDialog decorationnull
backgroundColorDialog backgroundColorwhite
borderRadiusDialog borderRadius0.0
constraintsDialog constraintsno constraints
animatedFuncAnimation of dialogEmerge from the middle
showCallBackdialog show callbacksnot
dismissCallBackdialog dismiss callbacksnot
barrierDismissibleWhether to click to pop up the external disappeartrue
  • After setting gravity, set gravityAnimationEnable = true if animation is needed
  • If the decoration property is set, the backgroundColor and borderRadius are not in effect; they are mutually exclusive

Supported method

methoddescription
show[x,y]show dialog
dismissdismiss dialog
isShowingIs the dialog showing

⚡ Semantic Widget #

The contents of the components inside the dialog are encapsulated by semantic functions in advance to quickly build the dialog, as shown in the following table

YYDialog YYAlertDialogWithDivider(BuildContext context) {
  return YYDialog().build(context)
    ..width = 220
    ..borderRadius = 4.0
    ..text(
      padding: EdgeInsets.all(25.0),
      alignment: Alignment.center,
      text: "确定要退出登录吗?",
      color: Colors.black,
      fontSize: 14.0,
      fontWeight: FontWeight.w500,
    )
    ..divider()
    ..doubleButton(
      padding: EdgeInsets.only(top: 10.0),
      gravity: Gravity.center,
      withDivider: true,
      text1: "取消",
      color1: Colors.redAccent,
      fontSize1: 14.0,
      fontWeight1: FontWeight.bold,
      onTap1: () {
        print("取消");
      },
      text2: "确定",
      color2: Colors.redAccent,
      fontSize2: 14.0,
      fontWeight2: FontWeight.bold,
      onTap2: () {
        print("确定");
      },
    )
    ..show();
}

Semantic components supported

methoddescription
texttext widget
doubleButtontwo-button widget
listViewOfListTilelistTile widget
listViewOfRadioButtonlistRadio widget
dividerdivider widget
widgetcustom semantic widget

⚡ Custom Widget #

Customize dialog interior component content

  • Since the existing semantic components only assist in the rapid UI construction, they are far from meeting the requirements in actual project development
  • So it provides the ability to insert custom semantic components into dialog

Insert the component into the dialog through 'widget()'

YYDialog YYDialogDemo(BuildContext context) {
  return YYDialog().build(context)
    ..width = 220
    ..height = 500
    ..widget(
      Padding(
        padding: EdgeInsets.all(0.0),
        child: Align(
          alignment: Alignment.centerLeft,
          child: Text(
            "",
            style: TextStyle(
              color: Colors.black,
              fontSize: 14.0,
              fontWeight: FontWeight.w100,
            ),
          ),
        ),
      ),
    )
    ..show();
}

⚡ Without the Context to invoke #

  • Application scenario: after the network request comes back, there is no Context to refer to in the callback, at this time, the Context needs to be initialized in advance, and then the dialog can be called without the Context

1、init

Call static methods before show dialog YYDialog.init(context);

class AppHome extends StatelessWidget {
  Widget build(BuildContext context) {
    //1、init context
    YYDialog.init(context);
    //2、Subsequent use may not be required context
    ......
  }
}

2、use

direct use YYDialog,Note that it must be called build()

YYDialog YYAlertDialogBody() {
  return YYDialog().build()
    ..width = 240
    ..text(
      text: "Hello YYDialog",
      color: Colors.grey[700],
    )
    ..show();
}

🔥🔥 Attention #

1、dismiss

  • Do not use 'Navigator.pop(context)' to make the popover disappear, or you will close your page
  • This problem has been solved internally in YYDialog, and you can simply call 'dismiss()' supplied internally
var yyDialog = YYDialog();
yyDialog?.dismiss();

Bugs/Requests #

  • If your application has problems, please submit your code and effect to Issue.
  • Pull request are also welcome.

About #

  • QQ:510402535
  • QQ群:798874340
  • e-mail:xyj510402535@qq.com
  • g-mail:xyj51042535@gmail.com
  • Blog:http://blog.csdn.net/qq_30379689
  • Github:https://github.com/AndroidHensen

License #

Apache License 2.0

1.0.0 #

  • first release
  • welcome to submit bug

1.0.1 #

  • fix dismiss Bug

1.0.2 #

  • add gravity of leftTop,leftBottom,rightTop,rightBottom

1.0.3 #

  • add gravityAnimationEnable property

1.0.4 #

  • Without the Context to invoke

1.0.5 #

  • Modify constraints property

1.0.6 #

  • Fix Gradle version in gradle-wrapper.properties

1.0.7 #

  • Fix Gradle build Aar

1.0.8 #

  • Fix Gradle build Aar for iOS

1.0.9 #

  • Update Android kotlin version to 1.3.0

1.0.10 #

  • add Log

1.0.11 #

  • remove kotlin

1.0.12 #

  • modify text Semantic

1.0.13 #

  • remove kotlin again

1.0.14 #

  • remove log

1.0.15 #

  • add callback

1.0.16 #

  • add decoration property

example/lib/main.dart

library flutter_custom_dialog;

import 'package:flutter/material.dart';
import 'package:flutter_custom_dialog_example/dialog/alert_dialog.dart';
import 'package:flutter_custom_dialog_example/dialog/bottom_sheet_dialog.dart';
import 'package:flutter_custom_dialog_example/dialog/listview_dialog.dart';
import 'package:flutter_custom_dialog_example/dialog/progress_dialog.dart';
import 'package:flutter_custom_dialog_example/dialog/notice_dialog.dart';
import 'package:flutter_custom_dialog/flutter_custom_dialog.dart';

void main() => runApp(MyApp());

var titleTextStyle = TextStyle(fontSize: 22, color: Colors.black);

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AppHome(),
    );
  }
}

/*
 * When you init App, you can Initialize YYDialog so that use YYDialog.build().show() everywhere.
 */
class AppHome extends StatelessWidget {
  Widget build(BuildContext context) {
    //1、初始化context
    YYDialog.init(context);
    //2、后续使用可以不需要context
    return Scaffold(
      appBar: AppBar(),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            showAlertDialog(context),
            showDevelopDialog(context),
          ],
        ),
      ),
    );
  }
}

showAlertDialog(BuildContext context) {
  return Padding(
    padding: EdgeInsets.all(8.0),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text("YYAlertDialog", style: titleTextStyle),
        Text("1、demo"),
        Row(
          children: <Widget>[
            makeTextButton("body", () {
              YYAlertDialogBody();
            }),
            makeTextButton("head&body", () {
              YYAlertDialogHeadAndBody();
            }),
            makeTextButton("divider", () {
              YYAlertDialogWithDivider();
            }),
            makeTextButton("listTile", () {
              YYListViewDialogListTile();
            }),
            makeTextButton("listRadio", () {
              YYListViewDialogListRadio();
            }),
          ],
        ),
        Row(
          children: <Widget>[
            makeTextButton("bottomsheet", () {
              YYBottomSheetDialog();
            }),
            makeTextButton("progress", () {
              YYProgressDialogNoBody();
            }),
            makeTextButton("progress\n&body", () {
              YYProgressDialogBody();
            }),
            makeTextButton("pop\nmenu", () {
              YYAlertDialogPopMenu();
            }),
            makeTextButton("custom\nx&y", () {
              YYAlertDialogCustomXY();
            }),
          ],
        ),
        Row(
          children: <Widget>[
            makeTextButton("notice", () {
              YYNoticeDialog();
            }),
            makeTextButton("callback", () {
              YYNoticeDialogCallback();
            }),
          ],
        ),
        Text("2、dialog property"),
        Row(
          children: <Widget>[
            makeTextButton("duration", () {
              YYAlertDialogWithDuration();
            }),
            makeTextButton("barrier\ncolor", () {
              YYAlertDialogWithbarrierColor(Colors.redAccent);
            }),
            makeTextButton("transparent\ncolor", () {
              YYAlertDialogWithbarrierColor(Colors.transparent);
            }),
            makeTextButton("background\ncolor", () {
              YYAlertDialogWithBackgroundColor();
            }),
            makeTextButton("barrier\ndismiss", () {
              YYAlertDialogWithBarrierDismiss();
            }),
          ],
        ),
        Text("3、dialog gravity"),
        Row(
          children: <Widget>[
            makeTextButton("bottom", () {
              YYAlertDialogWithGravity(
                gravity: Gravity.bottom,
              );
            }),
            makeTextButton("top", () {
              YYAlertDialogWithGravity(
                gravity: Gravity.top,
              );
            }),
            makeTextButton("left", () {
              YYAlertDialogWithGravity(
                width: 250.0,
                gravity: Gravity.left,
              );
            }),
            makeTextButton("right", () {
              YYAlertDialogWithGravity(
                width: 250.0,
                gravity: Gravity.right,
              );
            }),
            makeTextButton("center", () {
              YYAlertDialogWithGravity(
                width: 250.0,
                gravity: Gravity.center,
              );
            }),
          ],
        ),
        Row(
          children: <Widget>[
            makeTextButton("left\nbottom", () {
              YYAlertDialogWithGravity(
                width: 250.0,
                gravity: Gravity.leftBottom,
              );
            }),
            makeTextButton("left\ntop", () {
              YYAlertDialogWithGravity(
                width: 250.0,
                gravity: Gravity.leftTop,
              );
            }),
            makeTextButton("right\nbottom", () {
              YYAlertDialogWithGravity(
                width: 250.0,
                gravity: Gravity.rightBottom,
              );
            }),
            makeTextButton("right\ntop", () {
              YYAlertDialogWithGravity(
                width: 250.0,
                gravity: Gravity.rightTop,
              );
            }),
          ],
        ),
        Text("4、double button gravity"),
        Row(
          children: <Widget>[
            makeTextButton("left", () {
              YYAlertDialogWithGravity(
                width: 250.0,
                doubleButtonGravity: Gravity.left,
              );
            }),
            makeTextButton("right", () {
              YYAlertDialogWithGravity(
                width: 250.0,
                doubleButtonGravity: Gravity.right,
              );
            }),
            makeTextButton("center", () {
              YYAlertDialogWithGravity(
                width: 250.0,
                doubleButtonGravity: Gravity.center,
              );
            }),
          ],
        ),
        Text("5、dialog animation"),
        Row(
          children: <Widget>[
            makeTextButton("scaleIn", () {
              YYAlertDialogWithScaleIn();
            }),
            makeTextButton("fadeIn", () {
              YYAlertDialogWithFadeIn();
            }),
            makeTextButton("rotateIn", () {
              YYAlertDialogWithRotateIn();
            }),
            makeTextButton("customIn", () {
              YYAlertDialogWithCustomIn();
            }),
          ],
        ),
      ],
    ),
  );
}

showDevelopDialog(BuildContext context) {
  YYDialog yyDialog;

  return Padding(
    padding: EdgeInsets.all(8.0),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text("YYDevelopDialog", style: titleTextStyle),
        Text("1、debug"),
        Row(
          children: <Widget>[
            makeTextButton("fix dismiss\nbug in v1.0.1", () {
              Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => Scaffold(
                          appBar: AppBar(
                            title: Text("fix dismiss bug"),
                          ),
                          body: Column(
                            children: <Widget>[
                              makeTextButton("show", () {
                                yyDialog = YYAlertDialogBody();
                              }),
                              makeTextButton("dismiss", () {
                                yyDialog?.dismiss();
                              }),
                            ],
                          ),
                        )),
              );
            }),
          ],
        ),
      ],
    ),
  );
}

Widget makeTextButton(title, Function() function) {
  return SizedBox(
    width: 70.0,
    height: 35.0,
    child: RaisedButton(
      padding: EdgeInsets.all(0.0),
      onPressed: () {
        function();
      },
      child: Text(
        title,
        textAlign: TextAlign.center,
        style: TextStyle(fontSize: 12.0),
      ),
    ),
  );
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flutter_custom_dialog: ^1.0.16

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_custom_dialog/flutter_custom_dialog.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
91
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
96
Overall:
Weighted score of the above. [more]
95
Learn more about scoring.

We analyzed this package on Mar 31, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Health suggestions

Format lib/flutter_custom_dialog.dart.

Run flutter format to format lib/flutter_custom_dialog.dart.

Maintenance suggestions

The package description is too short. (-4 points)

Add more detail to the description field of pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test