Code Monkey home page Code Monkey logo

flutter-custom-dialog's Introduction

✨ 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.3.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

flutter-custom-dialog's People

Contributors

androidhensen avatar cyjaysong avatar darkmehmet avatar dotcink avatar frozenrainyoo avatar jaechon-yu avatar loonix avatar slavap avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

flutter-custom-dialog's Issues

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.

在点击确认的回调中跳转路由没反应

flutter version: 1.22.3
device: 华为Mate20 Android10

 DialogUtil.showConfirmDialog(
        context,
        "需要同意隐私政策才能继续使用",
        """
      我们深知个人信息对您的重要性,我们将按法律法规要求,采取相应安全保护措施,尽力保护您的个人信息安全可控。
      """,
        cancelText: "退出应用",
        confirmText: "同意并继续使用",
        onCancel: (){
          MyNavigator.pop();
        },
        onConfirm: (){
        Log.i("这里确定执行了");
        MyNavigator.pushReplacementNamed(RouterName.Main);
});

listViewOfListTile to be scrollable

I have the followin use-case:

I have a dialog that I'd like to use to display some options to the user. The number of list items that I'd like to show is more than what can be displayed on a single screen, therefore some scrolling would be nice inside the dialog.

Can we figure out a way to do that with your built in listViewOfListTile function? Things I'm considering now:

  1. just not use listViewOfListTile but that is so meh... I would need to rewrite much of what you already have written
  2. add an optional argument to the method scrollable. Setting it to true would encapsulate the ListView in a SingleChildScrollView.
  3. maybe add a Widget decoratorWidget argument to the method that would allow encapsulating the entire list in anything, in my case a SingleChildScrollView

And of course, I'm open to any suggestions how one would go about doing that.

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.

dissmiss监听

能否增加个方法参数,可以监听到dissmiss 回调

Prevent Dialog from Hardware back button

I am passing this value(false) to the barrierDismissible but its functionality is not working properly.We want to prevent/stop the dismissable of dialog from external hardware back button.
YYDialog YYNoticeDialog() {
return YYDialog().build()
..width = 120
..height = 110
..backgroundColor = Colors.black.withOpacity(0.8)
..barrierDismissible = false
..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();
}

install ios device arm64 error

xcode run is success.

but androidstudio run to ios device. error:

Non-fat binary /Users/lizhiming/dev_space/work_space/flutter_project/RedPaperClient/build/ios/Debug-iphoneos/Runner.app/Frameworks/flutter_custom_dialog.framework/flutter_custom_dialog is not armv7. Running lipo -info:
Non-fat file: /Users/lizhiming/dev_space/work_space/flutter_project/RedPaperClient/build/ios/Debug-iphoneos/Runner.app/Frameworks/flutter_custom_dialog.framework/flutter_custom_dialog is architecture: arm64
Command PhaseScriptExecution failed with a nonzero exit code

直接调用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();

在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

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

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.
==============================================================================

【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均无法关闭弹窗。

在使用listViewOfRadioButton时能否有一个默认的选择项?否则每次打开都选择第一个

在使用listViewOfRadioButton时能否有一个默认的选择项?
在下面的代码里面

radioDialog(context, String title, List buttons, {okTitle='确定', cancelTitle='取消', currentSelectedIndex=-1, IndexCallback onTap}) {
List radioItems = List.generate(buttons.length, (index) {
return RadioItem(
padding: EdgeInsets.only(left: 6.0),
text: buttons[index],
color: Colors.black,
fontSize: 16.0,
);
});
int selectedIndex = 0;

return YYDialog().build(context)
..width = 280
..borderRadius = 4.0
..text(
padding: EdgeInsets.fromLTRB(18.0, 22.0, 18.0, 18.0),
text: title,
color: Colors.black,
fontSize: 18.0,
fontWeight: FontWeight.w500,
)
..divider()
..listViewOfRadioButton(
// 希望可以在这里加一个当前选中的某一项currentSelectedIndex,否则每次打开都是选择第一个
items: radioItems,
height: 370,
activeColor: Colors.blue,
onClickItemListener: (index) {
selectedIndex = index;
})
..divider()
..doubleButton(
padding: EdgeInsets.only(top: 8.0, bottom: 8.0),
gravity: Gravity.right,
text1: cancelTitle,
color1: Colors.blue,
fontSize1: 14.0,
fontWeight1: FontWeight.bold,
text2: okTitle,
color2: Colors.blue,
fontSize2: 14.0,
fontWeight2: FontWeight.bold,
onTap2: () {
if (onTap != null) Future.delayed(Duration.zero, () {
onTap(selectedIndex);
});
}
)
..show();
}

Android Studio打包出现错误,请问怎么解决啊?

ERROR: The Android Gradle plugin supports only Kotlin Gradle plugin version 1.3.10 and higher.
The following dependencies do not satisfy the required version:
project ':flutter_custom_dialog' -> org.jetbrains.kotlin:kotlin-gradle-plugin:1.3.0
Update plugins

确定 取消的时候

带有选择取消确定的时候,能根据输入的内容来判断对话框是否关闭吗?
比如我加了文本框,我要判断输入的文本框内容是否正确,如果内容不正确点击确定,对话框不关闭

功能建议

我希望在我在操作一些设置的时候,弹出dialog,提示本次设置的成功或失败, 需要3s之后自动消失dialog

Code comments - maybe English translation?

Hello there,

since it's your lib and you maintain it, I don't think I should have a very strong opinion about this but it would be nice to understand the code comments you have placed here and there. Do you think it'd be possible to transition to English code comments so that a wider audience would understand it?

我里面做了封装,外面调用时,怎么使用dismiss()

//封装的Dialog
YYDialog contentDialog(Widget widget,{backgroundColor,width,height,borderRadius, gravity}) {
return YYDialog().build()
..width = width
..gravity = gravity
..gravityAnimationEnable = true
..borderRadius = borderRadius
..height = height
..backgroundColor = backgroundColor
..widget(
Container(
child: widget,
)
)
..show();
}

//外面调用
var open = contentDialog(Text("Test"));
//我是这样关闭的,但是没有效果,我只能用Navigator.of(context).pop() 才行;
open?.dismiss();

无context调用无效

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    YYDialog.init(context);
    return MaterialApp()
  }
}

已经在main里面初始化了,但是使用YYDialog().build()来调用时依旧报无context的错误

键盘展示时弹框问题

当一个文本框正在编辑,键盘弹出时,调用弹出控件,控件弹出后,然后会自动隐藏,键盘又出现。

Null safety!!

Please null safety as create problem with new flutter sdk release.

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.