✨✨ ✨ The powerful Flutter popover component is coming

The function of the global popover encapsulation, with the semantic way of the popover inside the content of the filling, currently provides the function

1. Supports a few semantic component methods to fill the component content inside the popover
2. Support for custom semantic component methods, allowing developers to freely fill the component content inside the popover
3. Support to set the popover background color, foreground color, position, animation, click the external disappear and other functions, see the following details
4. Support for context-free call popovers. See the following details

🎖 Installing

1, install

dependencies:
  flutter_custom_dialog: ^ 1.0.4
Copy the code

2, the import

import 'package:flutter_custom_dialog/flutter_custom_dialog.dart';
Copy the code

🎖 Example

dialog_demo

divider ✅	body ✅	head&body ✅	listTile ✅	ListRadio ✅
progress ✅	progress&body ✅	pop menu ✅ supports custom locations

dialog_gravity

bottom ✅	top ✅	left ✅	right ✅	center ✅
left bottom ✅	left top ✅	right bottom ✅	right top ✅

dialog_animation

scaleIn ✅

fadeIn ✅

rotateIn ✅

customIn ✅ supports custom animations

⚡ Dialog Property

The property Settings of the popover can be called through the methods of member variables, as shown in the following table

YYDialog YYDialogDemo(BuildContext context) {
  returnYYDialog().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();
}
Copy the code

Supported Properties

Supported methods

⚡ Semantic Widget

The component content inside the popover encapsulates commonly used components through semantic functions in advance, so as to quickly build the popover. See the following table for details

YYDialog YYAlertDialogWithDivider(BuildContext context) {
  returnYYDialog().build(context) .. width =220
    ..borderRadius = 4.0
    ..text(
      padding: EdgeInsets.all(25.0),
      alignment: Alignment.center,
      text: "Sure you want to log out?",
      color: Colors.black,
      fontSize: 14.0, fontWeight: FontWeight.w500, ) .. divider() .. doubleButton( padding: EdgeInsets.only(top:10.0),
      gravity: Gravity.center,
      withDivider: true,
      text1: "Cancel",
      color1: Colors.redAccent,
      fontSize1: 14.0,
      fontWeight1: FontWeight.bold,
      onTap1: () {
        print("Cancel");
      },
      text2: "Sure",
      color2: Colors.redAccent,
      fontSize2: 14.0,
      fontWeight2: FontWeight.bold,
      onTap2: () {
        print("Sure"); },).. show(); }Copy the code

Supported semantic components

⚡ Custom Widget

Customize the contents of popover internal components

• Because the existing semantic components only help to build UI quickly, they are far from meeting the needs in the actual project development
• Therefore, it provides the insertion of custom semantic components, allowing developers to add their own components to the popover

Insert the component into the popover through the widget()

YYDialog YYDialogDemo(BuildContext context) {
  returnYYDialog().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(); }Copy the code

⚡ No Context call

• Application scenario: After the network request comes back, there is no Context to refer to in the callback. In this case, you need to initialize the Context beforehand, and then you don’t need to call the Context popover

1, the init

The static method yydialog.init (context) is called before the popover;

class AppHome extends StatelessWidget {
  Widget build(BuildContext context) {
    //1. Initialize context
    YYDialog.init(context);
    //2. Context is not required for subsequent use. }}Copy the code

2, the use

Use YYDialog directly, note that you must call build()

YYDialog YYAlertDialogBody() {
  returnYYDialog().build() .. width =240
    ..text(
      text: "Hello YYDialog",
      color: Colors.grey[700],).. show(); }Copy the code

Bugs/Requests

• If your application has problems, please submit your code and effect to Issue.
• Pull request are also welcome.

About