in Dialog

A semantic way to fill the content inside the dialog

1.3k Views

flutter_custom_dialog

Encapsulation of global dialog functions, with a semantic mechanism to fill the material inside the dialog, as provided by the current function.

  1. Support for a few semantic component methods allows you to populate the content of the component within the dialog.
  2. Support for customizing semantic components, allowing developers to easily supply component content within dialog boxes.
  3. Setting the dialog background color, foreground color, location, animation, external disappearance, and other functions is supported; check the specifics below for more information.

Installing

1、install

dependencies:
  flutter_custom_dialog: ^1.0.1

2、import

import 'package:flutter_custom_dialog/flutter_custom_dialog.dart';

Example

dialog_demo


divider
✅
body
✅
head&body
✅
listTile
✅
ListRadio
✅

dialog_gravity


bottom
✅
top
✅
left
✅
right
✅
center
✅

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 show 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

propertydescriptiondefault
widthDialog width0
heightDialog heightAdaptive component height
durationDialog animation time250 ms
gravityWhere the dialog appearscenter
barrierColorDialog barrierColor30% of black
backgroundColorDialog backgroundColorwhite
borderRadiusDialog borderRadius0.0
constraintsDialog constraintsMinimum width and height not less than 10%
animatedFuncAnimation of dialogEmerge from the middle
barrierDismissibleWhether to click to pop up the external disappeartrue

Supported method

methoddescription
showshow 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 develop the dialog, as indicated in the following table below

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

Bugs/Requests

  • Please submit your code and effect to Issue, if your application is having issues.
  • Requests for pulls are also appreciated.

GitHub

https://github.com/YYFlutter/flutter-custom-dialog

Written by James

Flutter package designed to select an item from a list

A new Flutter package project for simple and awesome dialogs