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


alt text alt text alt text alt text

Getting Started


  final GlobalKey widgetKey = GlobalKey();

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

      ///you can also add border radius
      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(
          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');

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Custom Pointed Popup [CPP]',
      body: Container(
        child: Center(
          child: Column(
            children: [
                'CPP with straight pointer & item.',
                style: TextStyle(
                  fontSize: 14.0,
                  fontStyle: FontStyle.italic,
                  fontWeight: FontWeight.bold,
                height: 40,
                onTap: () {
                      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',
                        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:

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:

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:

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:

itemCustomPointedPopupItem [class]YesTo create the item widget or child in pointed popup.
customHeightdoubleYesThe custom height of the 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



Made with contributors-img.