Flutter，帮助设计带有可点击图标的可点击形状

Question

我是 Flutter 新手！我需要实现如下图1的形状，用蓝色矩形圆角。我在 Xcode 和 Android Studio 上很容易，但我在 Flutter 上遇到了一些问题。

它非常简单...它是一个正方形，在图像下方有一个四边形，在来自后端的 html 文本下方。大 Icons.share 以及 Icons.mail_outline 和 Icons.favorite 必须是可点击的并生成动作。除了四边形、菱形之外，我还可以通过点击形状的左右部分来获得结果。

经过两天的 Container、Stack、Padding、Path 等测试，我仍然没有达到可接受的结果。

感谢任何帮助。

Answer 1

我这里给你排版了结果

这是代码

SizedBox(
        height: 80,
        child: Stack(
          children: [
            Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                color: Colors.grey.shade200,
                height: 50,
                child: Row(
                  children: [
                    const Spacer(flex: 1,),
                    Row(
                      children: [
                        const Text('Ti piace?'),
                        IconButton(icon: const Icon(CupertinoIcons.heart),
                        onPressed: (){
                          //do what you want
                        },),
                        const Text('0'),
                      ],
                    ),
                    const Spacer(flex: 2,),
                    Row(
                      children: [
                        const Text('0'),
                        IconButton(icon: const Icon(Icons.mail_outline),
                        onPressed: (){
                          //do what you want
                        },),
                        const Text('Contattami'),
                      ],
                    ),
                    const Spacer(flex: 1,),
                  ]
                ),
              ),
            ),
            Align(
              alignment: Alignment.center,
              child: RotationTransition(
                turns: const AlwaysStoppedAnimation(45 / 360),
                child: Container(
                  height: 45,
                    width: 45,
                    decoration: const BoxDecoration(
                        color: Colors.white,
                      boxShadow: [
                        BoxShadow(color: Colors.grey,spreadRadius: 2,blurRadius: 5),
                      ]
                    ),
                    child: RotationTransition(
                        turns: const AlwaysStoppedAnimation(-45 / 360),
                        child: IconButton(onPressed: (){}, icon: const Icon(Icons.share)))),
              ),
            )
          ],
        ),
      ),

Flutter，帮助设计带有可点击图标的可点击形状

Flutter, help on design a clickable shape with clickable icons

flutter

flutter-layout