✨ flutter_custom_dialog
Global dialog function encapsulation, with a semantic way to fill the content inside the dialog, the current function provided
- Support for a few semantic component methods to populate the component content inside dialog
- Support for customizing semantic components for developers to freely populate component content inside dialog
- 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.3
2、import
import 'package:flutter_custom_dialog/flutter_custom_dialog.dart';
???? Example
dialog_demo
divider |
body |
head&body |
listTile |
ListRadio |
progress |
progress&body |
pop menu |
dialog_gravity
bottom |
top |
left |
right |
center |
left bottom |
left top |
right bottom |
right top |
dialog_animation
scaleIn |
fadeIn |
rotateIn |
customIn |
⚡ 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 |
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 |
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[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();
}
Bugs/Requests
- If your application has problems, please submit your code and effect to Issue.
- Pull request are also welcome.
License
Apache License 2.0
Download Flutter Custom Dialog Source Code on GitHub:
https://github.com/YYFlutter/flutter-custom-dialog
Provides the list of the opensource Flutter apps collection with GitHub repository.