カスタムポイントドポップアップ

custom_pointed_popup

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

Screenshots

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:

Attribute	Type	Default	Required	Description
iconWidget	Widget		No	This will create an icon inside the pointed popup.
title	String		No	Title or text for the pointed popup.
textStyle	TextStyle		No	Text style for the title.
textAlign	TextAlign		No	Alignment for the title.
itemWidget	Widget		No	Custom 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:

Attribute	Type	Default	Required	Description
rect	Rect		No	The rect bound that the popup should appear around it.
widgetKey	GlobalKey		No	The key to widget.
item	CustomPointedPopupItem [class]		No	If 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:

Value	Description
Straight	This will create an pointer with straight upward.
Right	This will create an pointer with slightly bended towards right.
FullRight	This will create an pointer with fully bended towards right.
Left	This will create an pointer with slightly bended towards left.
FullLeft	This 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:

Attribute	Type	Default	Required	Description
item	CustomPointedPopupItem [class]		Yes	To create the item widget or child in pointed popup.
customHeight	double		Yes	The custom height of the pointed popup.
displayBelowWidget	bool	false	No	If true always display the popup below the widget else automatically calculate the space and display the popup either up or below the widget.
triangleDirection	TriangleDirection [enum]	TraingleDirection.Straight	No	Determines the direction of pointer or triangle shape.
popupBorderRadius	BorderRadius	BorderRadius.circular(10.0)	No	Defines the border of the custom pointed popup.
popupElevation	double	0	No	The elevation of the pointed popup.
stateChanged	Function(bool isShow)		No	This event function will fire immediately the the popup state changes.
backgroundColor	Color	Colors.red	No	Background color for pointed popup.
widthFractionWithRespectToDeviceWidth	int	3	No	Width ratio with respect to the device width.
onDismiss	VoidCallBack		No	Callback function that fire when the custom pointed popup dismissed.
onClickWidget	Function(CustomPointedPopupItem item)		No	Callback function that fire when the child of popup is clicked.
context	BuildContext		Yes	Context 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.