How can I create a popup with arrow mark in AppBar in flutter without any plugin?

Question

In AppBar I have kept an icon. When I click on that icon it should open a popup with pointing arrow. That popup should display below the icon only. Should not overlap on that image. And that dropdown should able to customise according to any UI. Please find the attached image.

I don't want to use any plugin.

1. https://stackoverflow.com/questions/58897270/adding-icon-to-left-of-dropdownbutton-expanded-in-flutter 2. https://stackoverflow.com/questions/49156899/flutter-custom-title-dropdown-material-page-filter Hope these 2 links can help you solve your problem :D — HeIsDying, Dec 08 '20 at 13:01
@TryHarder not exactly like which u have shared. Because mine is like when I click on that icon it should open a popup with that arrow. I have edited my question can u check once — Sunisha Guptan, Dec 08 '20 at 13:13

score 0 · Answer 1 · answered Dec 08 '20 at 14:10

You can use the Stack Widget to overlap this bubble, and change dynamically the visibility.

//if the bubble is visible or not
bool isVisible = false;

@override
Widget build(BuildContext context) {
  return Material(
    child: Stack(
      children: [
        Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.grey[50],
            actions: [
              Padding(
                padding: const EdgeInsets.only(right: 15),
                child: IconButton(
                  icon: Icon(
                    Icons.add_alert_rounded,
                    color: Colors.black,
                  ),
                  onPressed: () {
                    setState(() {
                      isVisible = !isVisible;
                    });
                  },
                ),
              ),
            ],
          ),
          body: Container(),
        ),
        Positioned(
          top: 72, //considering the app bar and system status bar height
          right: 10,
          child: Visibility(
            visible: isVisible,
            child: Stack(
              children: [
                Positioned( //the diamond behind the content
                  top: 0,
                  right: 20,
                  child: Transform.rotate(
                    angle: math.pi / 4,   //rotating the container to turn it into a diamond
                    child: Container(
                      width: 20,
                      height: 20,
                      decoration: BoxDecoration(
                        color: Colors.white,
                        boxShadow: [
                          BoxShadow(
                            color: Colors.grey[400],
                            blurRadius: 5.0,
                          )
                        ],
                      ),
                    ),
                  ),
                ),
                Container(
                  height: 40.0,
                  width: 200,
                  margin: const EdgeInsets.only(top: 5.0),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey[400],
                        blurRadius: 3.0,
                        offset: Offset(0, 4.0),
                      ),
                    ],
                    borderRadius: BorderRadius.circular(5.0),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      
                      //just to represent the content of the bubble
                      Container(
                        padding: const EdgeInsets.all(4.0),
                        decoration: BoxDecoration(
                          color: Colors.black,
                          borderRadius: BorderRadius.circular(10.0),
                        ),
                        child: Text(
                          'number',
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                      Container(
                        padding: const EdgeInsets.all(4.0),
                        decoration: BoxDecoration(
                          color: Colors.black,
                          borderRadius: BorderRadius.circular(10.0),
                        ),
                        child: Text(
                          '5000',
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    ),
  );
}

hey this is okay..But this arrow mark is keep on changing the position according to the content of text widget. — Sunisha Guptan, Dec 09 '20 at 06:22

How can I create a popup with arrow mark in AppBar in flutter without any plugin?

1 Answers1