custom_pointed_popup

Popup that can be shown on any targeted widget with customized pointed design.

Screenshots

alt text alt text alt text alt text

Getting Started

Example

  final GlobalKey widgetKey = GlobalKey();

  CustomPointedPopup getCustomPointedPopup(BuildContext context) {
    return CustomPointedPopup(
      backgroundColor: Colors.red,
      context: context,
      lineColor: Colors.tealAccent,
      widthFractionWithRespectToDeviceWidth: 3,
      displayBelowWidget: true,
      triangleDirection: TriangleDirection.FullLeft,
      popupElevation: 10,

      ///you can also add border radius
      ////popupBorderRadius:,
      item: CustomPointedPopupItem(
        title: 'Popup that can be shown on any targeted widget with customized pointed design.',
        textStyle: Theme.of(context).textTheme.caption!.copyWith(
              color: Theme.of(context).cardColor,
            ),
        iconWidget: Icon(
          Icons.add_moderator,
          color: Theme.of(context).cardColor,
        ),

        ///Or you can add custom item widget below instead above 3
        ///itemWidget: Container(),
      ),
      onClickWidget: (onClickMenu) {
        print('popup item clicked');
      },
      onDismiss: () {
        print('on dismissed called');
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Custom Pointed Popup [CPP]',
        ),
      ),
      body: Container(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'CPP with straight pointer & item.',
                style: TextStyle(
                  color: Colors.red,
                  fontSize: 14.0,
                  fontStyle: FontStyle.italic,
                  fontWeight: FontWeight.bold,
                ),
              ),
              SizedBox(
                height: 40,
              ),
              GestureDetector(
                onTap: () {
                  getCustomPointedPopup(context)
                    ..show(
                      widgetKey: widgetKey,
                    );
                },
                child: Card(
                  key: widgetKey,
                  elevation: 10,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(20),
                  ),
                  child: Container(
                    height: 100,
                    width: 100,
                    child: Center(
                      child: Text(
                        'Click Me \nTo\n Display CPP',
                        textAlign: TextAlign.center,
                        overflow: TextOverflow.clip,
                        style: TextStyle(
                          color: Colors.blueGrey,
                          fontWeight: FontWeight.w900,
                          fontSize: 14.0,
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

Important Class, Function And Enum

The important class to know. CustomPointedPopupItem - Model item to display inside the pointed popup:

AttributeTypeDefaultRequiredDescription
iconWidgetWidgetNoThis will create an icon inside the pointed popup.
titleStringNoTitle or text for the pointed popup.
textStyleTextStyleNoText style for the title.
textAlignTextAlignNoAlignment for the title.
itemWidgetWidgetNoCustom item widget or child for the pointed popup. No need to add iconWidget & title if you added this.

The important function to know. show - Function to show the custom pointed popup:

AttributeTypeDefaultRequiredDescription
rectRectNoThe rect bound that the popup should appear around it.
widgetKeyGlobalKeyNoThe key to widget.
itemCustomPointedPopupItem [class]NoIf you want the dynamic item widget or child inside the popup per action, you can add the item here.

The important enum to know. TriangleDirection - Enum to choose the direction of pointer or triangle shape:

ValueDescription
StraightThis will create an pointer with straight upward.
RightThis will create an pointer with slightly bended towards right.
FullRightThis will create an pointer with fully bended towards right.
LeftThis will create an pointer with slightly bended towards left.
FullLeftThis will create an pointer with fully bended towards left.

In order to create a custom pointed popup on the widget, there are several attributes that are supported by custom_pointed_popup:

AttributeTypeDefaultRequiredDescription
itemCustomPointedPopupItem [class]YesTo create the item widget or child in pointed popup.
displayBelowWidgetboolfalseNoIf true always display the popup below the widget else automatically calculate the space and display the popup either up or below the widget.
triangleDirectionTriangleDirection [enum]TraingleDirection.StraightNoDetermines the direction of pointer or triangle shape.
popupBorderRadiusBorderRadiusBorderRadius.circular(10.0)NoDefines the border of the custom pointed popup.
popupElevationdouble0NoThe elevation of the pointed popup.
stateChangedFunction(bool isShow)NoThis event function will fire immediately the the popup state changes.
backgroundColorColorColors.redNoBackground color for pointed popup.
widthFractionWithRespectToDeviceWidthint3NoWidth ratio with respect to the device width.
onDismissVoidCallBackNoCallback function that fire when the custom pointed popup dismissed.
onClickWidgetFunction(CustomPointedPopupItem item)NoCallback function that fire when the child of popup is clicked.
contextBuildContextYesContext where the popup to be shown.

##If you have any queries, email me to dipak.shrestha@eemc.edu.np

CREDITS

Contributors

Made with contributors-img.

Libraries

custom_pointed_popup
triangle_painter