如何在沒有任何插件的情況下在 flutter 的 AppBar 中創建帶有箭頭標記的彈出窗口？

Question

在 AppBar 中，我保留了一個圖標。 當我單擊該圖標時，它應該會打開一個帶有指向箭頭的彈出窗口。 該彈出窗口應僅顯示在圖標下方。 不應在該圖像上重疊。 並且該下拉菜單應該能夠根據任何 UI 進行自定義。 請找到所附圖片。

我不想使用任何插件。

Answer 1

您可以使用Stack Widget 來重疊此氣泡，並動態更改可見性。

//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),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    ),
  );
}