如何实现这个设计flutter答案

【问题标题】：How to achive this design flutter如何实现这个设计flutter
【发布时间】：2022-01-07 19:52:51
【问题描述】：

Notch很重要，[这个notch][2]怎么办？我也已经完成了底部Appbar 加上这个FAB 按钮，但是notch 还没有完成。我已经知道内置的缺口。但我需要这种形状的缺口。我怎样才能做出这种缺口？

【问题讨论】：

【解决方案1】：

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.white,
        onPressed: () {},
        child: Icon(
          Icons.add,
          color: Colors.black,
        ),
        elevation: 0.0,
      ),
      bottomNavigationBar: BottomAppBar(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 18.0),
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Icon(Icons.home),
              Icon(Icons.search),
              Padding(
                padding: const EdgeInsets.only(top: 28.0),
                child: Text('USE CARD'),
              ),
              Icon(Icons.favorite_border),
              Icon(Icons.person_outline)
            ],
          ),
        ),
        color: Colors.white,
      ),

【讨论】：

【解决方案2】：

使用animated_bottom_navigation_bar：^0.3.2

这是链接 https://pub.dev/packages/animated_bottom_navigation_bar/example

【讨论】：

上面的包所有 FAB 图标都是默认的圆形样式，我需要它是旋转方形，边框半径为 14 px

【解决方案3】：

bottomNavigationBar: Container(
    height: 70,
    child: BottomAppBar(
        color: textFormInnerColor,
        elevation: 11,
        // notchMargin: 7,
        shape: DiamondFabNotchedShape(),
        // AutomaticNotchedShape(RoundedRectangleBorder(), StadiumBorder(side: BorderSide())),
        child: Container(
            padding: EdgeInsets.only(bottom: 8.0),
            child: Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
                botAppBarButton(() {
                    setState(() {
                        showPopUp = false;
                        currentTab = 0;
                    });
                }, 0, "Home"),
                botAppBarButton(() {
                    setState(() {
                        showPopUp = false;
                        currentTab = 1;
                    });
                }, 1, "Products"),
                TextButton(onPressed: null, child: Text("")), //this is just for placeholder only
                botAppBarButton(() {
                    setState(() {
                        showPopUp = false;
                        currentTab = 3;
                    });
                }, 3, "Orders"),
                botAppBarButton(() {
                    setState(() {
                        currentTab = 4;
                        showPopUp = false;
                    });
                }, 4, "Manage")
            ])
        )
    )
),
floatingActionButton: GestureDetector(
    behavior: HitTestBehavior.opaque,
    onTap: () {
        setState(() {
            showPopUp = !showPopUp;
        });
        // myPushNavigation(context, AddProduct());
    },
    child: Container(
        // padding: EdgeInsets.only(bottom: 20.0),
        child: Stack(alignment: Alignment.center, children: [
            Transform.rotate(
                angle: math.pi / 4,
                child: Container(
                padding: EdgeInsets.all(10),
                height: 75,
                width: 75,
                decoration: BoxDecoration(
                    color: currentTab == 4 ? lightBlue : noColor,
                    borderRadius: BorderRadius.circular(20)),
                    child: Container(
                        decoration: BoxDecoration(color: primaryColor2, borderRadius: BorderRadius.circular(14))
                    )
                )
            ),
            AnimatedSwitcher(
                duration: Duration(milliseconds: 300),
                transitionBuilder: (child, anim) => RotationTransition(
                    turns: child.key == ValueKey('icon1')
                        ? Tween<double>(begin: 1, end: 0.75).animate(anim)
                        : Tween<double>(begin: 0.75, end: 1).animate(anim),
                    child: FadeTransition(opacity: anim, child: child)),
                    child: showPopUp
                        ? Icon(Icons.close, color: lightColor, key: ValueKey('icon1'))
                        : Icon(Icons.add, color: lightColor, size: 29, key: ValueKey('icon2')
                )
            )
        ])
    )
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked

【讨论】：