Last updated:
0 purchases
flutter custom dialog tv
✨ flutter_custom_dialog #
[Lanuage ~~] English | 中文文档
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
Support no Context call dialog, see below
🎖 Installing #
1、install
dependencies:
flutter_custom_dialog: ^1.0.20
copied to clipboard
2、import
import 'package:flutter_custom_dialog/flutter_custom_dialog.dart';
copied to clipboard
🎖 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();
}
copied to clipboard
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();
}
copied to clipboard
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();
}
copied to clipboard
⚡ 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
......
}
}
copied to clipboard
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();
}
copied to clipboard
🔥🔥 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();
copied to clipboard
Bugs/Requests #
If your application has problems, please submit your code and effect to Issue.
Pull request are also welcome.
About #
QQ:510402535
QQ群:798874340
e-mail:[email protected]
g-mail:[email protected]
Blog:http://blog.csdn.net/qq_30379689
Github:https://github.com/AndroidHensen
License #
Apache License 2.0
For personal and professional use. You cannot resell or redistribute these repositories in their original state.
There are no reviews.