🚀🚀🚀 Semantic dialog

Related tags

Widgets dialog flutter
Overview

flutter_custom_dialog

pub package

[Language ~~] 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.2.0

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

property description default
width Dialog width 0
height Dialog height Adaptive component height
duration Dialog animation time 250 ms
gravity Where the dialog appears center
gravityAnimationEnable The dialog appears with the default animation available false
margin The margin of a dialog EdgeInsets.all(0.0)
barrierColor Dialog barrierColor 30% of black
decoration Dialog decoration null
backgroundColor Dialog backgroundColor white
borderRadius Dialog borderRadius 0.0
constraints Dialog constraints no constraints
animatedFunc Animation of dialog Emerge from the middle
showCallBack dialog show callbacks not
dismissCallBack dialog dismiss callbacks not
barrierDismissible Whether to click to pop up the external disappear true
useRootNavigator Whether to use root navigation true
  • 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

method description
show[x,y] show dialog
dismiss dismiss dialog
isShowing Is 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

method description
text text widget
doubleButton two-button widget
listViewOfListTile listTile widget
listViewOfRadioButton listRadio widget
divider divider widget
widget custom 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

License

Apache License 2.0

Comments
  • 【BUG】关于dismiss的一个比较严重的问题

    【BUG】关于dismiss的一个比较严重的问题

    try {
          _loadingDialog = YYDialog().build(context)
            ..widget(SpinKitWave(color: Colors.white))
            ..backgroundColor = Colors.transparent
          //..barrierColor = Colors.black.withOpacity(.3)
            ..borderRadius = 4.0
            ..show();
        //逻辑代码...
    }catch(e){
         _loadingDialog.dismiss();
    }finally{
        _loadingDialog.dismiss();
    }
    

    代码如上,当我使用try-catch时,如果此时没有异常,那么逻辑最终进入finally里面,弹框可以正常关闭,但是一旦逻辑抛出异常,此时无论进入catch还是进入finally,dismiss均无法关闭弹窗。

    opened by q876625596 9
  • dismiss dialog when user press button inside it

    dismiss dialog when user press button inside it

    so i have this dialog with 2 button inside : CANCEL and DISCARD

    Annotation 2020-04-26 142102

    my question is, how can i dismiss the dialog when user press one of those button? should i use Navigator.pop ?

    opened by brizaldi 6
  • how to get the returned value of a dialog Yes|No

    how to get the returned value of a dialog Yes|No

    Hi, i have this dialog, How can I get the result back to the calling screen.

    import 'package:flutter/material.dart';
    import 'package:flutter_custom_dialog/flutter_custom_dialog.dart';
    import 'package:maraka/maraka_localizations.dart';
    
    Future<YYDialog> YesNoDialogWidget(BuildContext context, message) async {
      return YYDialog().build(context)
        ..width = 240
        ..borderRadius = 4.0
        ..duration = Duration(milliseconds: 500)
        ..animatedFunc = (child, animation) {
          return Transform(
            alignment: Alignment.center,
            transform: Matrix4.identity()
              ..translate(
                0.0,
                Tween<double>(begin: -50.0, end: 50.0)
                    .animate(
                      CurvedAnimation(curve: Interval(0.1, 0.5), parent: animation),
                    )
                    .value,
              )
              ..scale(
                Tween<double>(begin: 0.5, end: 1.0)
                    .animate(
                      CurvedAnimation(curve: Interval(0.5, 0.9), parent: animation),
                    )
                    .value,
              ),
            child: child,
          );
        }
        /*..text(
          padding: EdgeInsets.all(18.0),
          text: "Dialog header",
          color: Colors.black,
          fontSize: 18.0,
          fontWeight: FontWeight.w500,
        )*/
        ..text(
          padding: EdgeInsets.only(left: 18.0, right: 18.0, top: 18.0),
          text: message ?? "",
          color: Colors.grey[500],
        )
        ..doubleButton(
          isClickAutoDismiss: false,
          onTap1: () {
            Navigator.pop(context, false);
          },
          onTap2: () {
            Navigator.pop(context, true);
          },
          padding: EdgeInsets.only(top: 24.0),
          gravity: Gravity.center,
          text1: AppLocalizations.of(context).no,
          color1: Colors.deepPurpleAccent,
          fontSize1: 14.0,
          text2: AppLocalizations.of(context).yes,
          color2: Colors.deepPurpleAccent,
          fontSize2: 14.0,
        )
        ..show();
    }
    

    Using this code. doesn't work

    FlatButton(
                  onPressed: () async {
                    var result = await YesNoDialogWidget(context,"Remove all");
                     print(result); /// is of type YYDialog
                    if (result == true) {
                      // will never enter here
                    }
                  },
                  child: Text("Remove All" ),
                )
    

    Thank

    opened by jpainam 6
  • Add decoration parameter, in many cases backgroundColor is not enough.

    Add decoration parameter, in many cases backgroundColor is not enough.

    Currently decoration is just hardcoded:

    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(borderRadius),
                      color: backgroundColor,
                    ),
    
    opened by slavap 4
  • can not work on flutter 2.5,about Android V2 embedding

    can not work on flutter 2.5,about Android V2 embedding

    The plugins flutter_custom_dialog use a deprecated version of the Android embedding. To avoid unexpected runtime failures, or future build failures, try to see if these plugins support the Android V2 embedding. Otherwise, consider removing them since a future release of Flutter will remove these deprecated APIs. If you are plugin author, take a look at the docs for migrating the plugin to the V2 embedding: https://flutter.dev/go/android-plugin-migration.

    opened by Antduo 3
  • YYDialog.init(context);  报错

    YYDialog.init(context); 报错

    //init common dialog
    

    YYDialog.init(context); 具体去掉用的时候不传context 会报错。每个使用地方传context 不会报错。

    error info: The context used to push or pop routes from the Navigator must be that of a widget that is a descendant of a Navigator widget.

    opened by addappcn 3
  • 直接调用dismiss()或者Navigator.pop(context);都会使当前界面后退

    直接调用dismiss()或者Navigator.pop(context);都会使当前界面后退

    下面代码正确预期是点击取消确定按钮后只是关闭对话框,但是现在会导致当前界面也关闭。

      var dialog = YYDialog().build(context)
        ..width = 250
        ..widget(
          Container(
            height: 100,
            padding: EdgeInsets.all(0.0),
            child: Row(
              children: <Widget>[
                Text('你们还不是好友,只能发送提醒消息!'),
              ],
            ),
          ),
        );
      dialog.doubleButton(
        padding: EdgeInsets.only(top: 10.0),
        // gravity: Gravity.center,
        withDivider: true,
        text1: "取消",
        color1: Colors.redAccent,
        fontSize1: 14.0,
        fontWeight1: FontWeight.bold,
        onTap1: () {
          print("取消");
          // Navigator.pop(context);
          dialog.dismiss();
        },
        text2: "确定",
        color2: Colors.redAccent,
        fontSize2: 14.0,
        fontWeight2: FontWeight.bold,
        onTap2: () {
          print("确定");
          dialog.dismiss();
          // Navigator.pop(context);
        },
      )..show();
    
    opened by venliong 2
  •  version: v1.2.0 , when upgrade flutter sdk to v3.3.0,  Remove deprecated FlatButton

    version: v1.2.0 , when upgrade flutter sdk to v3.3.0, Remove deprecated FlatButton

    flutter/.pub-cache/hosted/pub.dartlang.org/flutter_custom_dialog-1.2.0/lib/flutter_custom_dialog.dart:120:13: Error: The method 'FlatButton' isn't defined for the class 'YYDialog'. [ ] - 'YYDialog' is from 'package:flutter_custom_dialog/flutter_custom_dialog.dart'

    opened by SeaZhang 1
  • new flutter build fail

    new flutter build fail

    
    FAILURE: Build completed with 2 failures.
    
    1: Task failed with an exception.
    -----------
    * What went wrong:
    Execution failed for task ':flutter_custom_dialog:verifyReleaseResources'.
    > A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade
       > 1 exception was raised by workers:
         com.android.builder.internal.aapt.v2.Aapt2Exception: Android resource linking failed
         AAPT:
    
    
    * Try:
    Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
    ==============================================================================
    
    
    opened by jinfagang 1
  • Add Gravity.spaceEvenly to double Button Property!

    Add Gravity.spaceEvenly to double Button Property!

    For the Dialog with wider width, double Button with center gravity look awkward.

    What about to add space evenly alignment to double Button?

    Do we have any side effects which can cause problem with other function using Gravity?

    Thanks for your Nice Package

    KakaoTalk_Photo_2021-01-18-06-54-49

    KakaoTalk_Photo_2021-01-18-06-45-53

    opened by JAECHON-YU 1
  •  The following NoSuchMethodError was thrown while handling a gesture: flutter: The method 'findRootAncestorStateOfType' was called on null. flutter: Receiver: null flutter: Tried calling: findRootAncestorStateOfType<NavigatorState>() flutter:

    The following NoSuchMethodError was thrown while handling a gesture: flutter: The method 'findRootAncestorStateOfType' was called on null. flutter: Receiver: null flutter: Tried calling: findRootAncestorStateOfType() flutter:

    The following NoSuchMethodError was thrown while handling a gesture: flutter: The method 'findRootAncestorStateOfType' was called on null. flutter: Receiver: null flutter: Tried calling: findRootAncestorStateOfType() flutter:

    opened by jinfagang 2
  • 在onTap中路由跳转会报错 '!_debugLocked': is not true

    在onTap中路由跳转会报错 '!_debugLocked': is not true

    YYDialog().build(context)
          ..width = 220
          ..borderRadius
          ..text(
            padding: EdgeInsets.all(25.0),
            alignment: Alignment.center,
            text: doubtStr,
            color: Colors.black,
            fontSize: 17.0,
            fontWeight: FontWeight.w500,
          )
          ..divider()
          ..doubleButton(
            padding: EdgeInsets.only(top: 10.0),
            gravity: Gravity.center,
            withDivider: true,
            text1: "取消",
            color1: Colors.blue,
            fontSize1: 14.0,
            fontWeight1: FontWeight.bold,
            onTap1: cancelTop,
            text2: "确定",
            color2: Colors.redAccent,
            fontSize2: 14.0,
            fontWeight2: FontWeight.bold,
            onTap2: () {
              Navigator.of(context).pushAndRemoveUntil(
              MaterialPageRoute(builder: (context) => LoginPage()),
              (route) => route == null);
        });
            },
          )
          ..show();
    

    image

    opened by Chen-Yong-Jie 0
Releases(v1.2.0)
Owner
YYDev
yy.inc
YYDev
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
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.

Shashank Singhal 522 Jan 2, 2023
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

Arsam 8 Apr 15, 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. This widget extend TextField and has a similar behavior as TextFormField.

m3uzz Soluções em TI 82 Jan 6, 2023
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

Lucky Ebere 2 Dec 28, 2022
Flutter overlay loading dialog example

flutter_overlay_loading_dialog_example Demo

Javeed Ishaq 4 Mar 24, 2022
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
SKAlertDialog - A highly customizable, powerful and easy-to-use alert dialog for Flutter.

SKAlertDialog A highly customizable, powerful and easy-to-use alert dialog for Flutter. GIF Screenshots SKAlertDialog Basic Alert Alert with buttons A

Senthil_Kumar 7 May 18, 2022
Flutter progress dialog. Support both Android and iOS platform.

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

Dylan Wu 22 Oct 9, 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

Christoph Krassnigg 9 Dec 9, 2022
Adaptive dialog - Show alert dialog or modal action sheet adaptively according to platform.

adaptive_dialog Show alert dialog or modal action sheet adaptively according to platform. showOkAlertDialog Convenient wrapper of showAlertDialog. iOS

Masayuki Ono (mono) 244 Dec 17, 2022
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

Kouki Badr 7 Dec 18, 2022
A Flutter package for a quick and handy giffy dialog.

?? Giffy Dialogs A beautiful and custom alert dialog for flutter highly inspired from FancyAlertDialog-Android. The source code is 100% Dart, and ever

Sahil Kumar 626 Dec 29, 2022
Allows to use date pickers without dialog. Provides some customizable styles for date pickers.

flutter_date_pickers Allows to use date pickers without dialog. Provides some customizable styles for date pickers. A set of date pickers: DayPicker f

null 196 Dec 29, 2022
A new Flutter dialog with a series of beautiful animations, slide fade rotate size scale rotate3D animations.

flutter_animated_dialog A new Flutter dialog with a series of beautiful animations, slide fade rotate size scale rotate3D animations. Dialog barrier i

null 20 Dec 3, 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
Flutter date range pickers use a dialog window to select a range of date on mobile.

[Deprecated] Date Range Picker Currently Flutter has supported date range picker, so I think my mission is done. Thanks for using my lib. Link: https:

null 225 Dec 28, 2022
A light weight library to easily manage a progress dialog with simple steps whenever you need to do it. You can easily show and hide it.

progress_dialog A light weight package to show progress dialog. As it is a stateful widget, you can change the text shown on the dialog dynamically. T

Mohammad Fayaz 202 Dec 11, 2022
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.

Shashank Singhal 522 Jan 2, 2023
Custom calendar dialog widget for flutter with (multi select, single select, date range) mode

some calendar Custom calendar with Multi-select & range configurable calendar New Features Added View Mode Somecalendar #15 Help Maintenance I've take

Irvan Lutfi Gunawan 69 Jan 3, 2023