Download this source code for
5 USD


Download this source code for
5 USD


Download this source code for
5 USD


Download this source code for
5 USD

flutter_custom_dialog

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

installing

1、install

dependencies:
  flutter_custom_dialog: ^1.0.1

2、import

import 'package:flutter_custom_dialog/flutter_custom_dialog.dart';

example to fill the content inside the dialog

dialog_demo

A semantic way to fill the content inside the dialog

divider

A semantic way to fill the content inside the dialog

body

A semantic way to fill the content inside the dialog

head&body

A semantic way to fill the content inside the dialog

listtile

content

listradio

dialog_gravity

A semantic way to fill the content inside the dialog

bottom

A semantic way to fill the content inside the dialog

top

A semantic way to fill the content inside the dialog

left

A semantic way to fill the content inside the dialog

right

A semantic way to fill the content inside the dialog

center

dialog_animation

A semantic way to fill the content inside the dialog

scalein

A semantic way to fill the content inside the dialog

fadein

A semantic way to fill the content inside the dialog

rotatein

A semantic way to fill the content inside the dialog

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 yydialogdemo(buildcontext context) {
  return yydialog().build(context)
    ..width = 220
    ..height = 500
    ..barriercolor = colors.black.withopacity(.3)
    ..animatedfunc = (child, animation) {
      return scaletransition(
        child: child,
        scale: tween(begin: 0.0, end: 1.0).animate(animation),
      );
    }
    ..borderradius = 4.0
    ..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
barriercolor dialog barriercolor 30% of black
backgroundcolor dialog backgroundcolor white
borderradius dialog borderradius 0.0
constraints dialog constraints minimum width and height not less than 10%
animatedfunc animation of dialog emerge from the middle
barrierdismissible whether to click to pop up the external disappear true

supported method

method description
show 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();
}

bugs/requests

  • if your application has problems, please submit your code and effect to issue.
  • pull request are also welcome.

Download this source code for
5 USD


Download this source code for
5 USD


Download this source code for
5 USD


Download this source code for
5 USD

Top