Flutter 底部导航栏中的曲线（颤振）

bottomNavigationBar:BottomAppBar(
//形状：CircularNotchedRectangle（），
notchMargin:4.0，
孩子：填充(
填充：常数边集全部（8.0），
孩子：排(
mainAxisSize:mainAxisSize.max，
儿童：[
扩大(
弹性：4，
孩子：我的钮扣(
图标：图标（Icons.home），
onPressed:（）异步{
Navigator.pushandremove直到(
上下文
MaterialPage路由（生成器：（上下文）=>FeedScreen（）），
（路由）=>错误）；
},
),
),
扩大(
弹性：14，
孩子：我的钮扣(
图标：图标（Icons.search），
已按下：（）{
FocusScope.of（上下文）.requestFocus（myFocusNode）；
},
),
),
大小盒子(
宽度：10，
),
扩大(
弹性：12，
孩子：我的钮扣(
图标：图标（Icons.favorite），
已按下：（）{
//Navigator.push（上下文，
//MaterialPackageRoute（builder:（context）=>LikedFeed（widget.uid））；
},
),
),
扩大(
弹性：4，
孩子：我的钮扣(
图标：图标（Icons.perm_identity），
已按下：（）{
Navigator.push（上下文，
MaterialPackageRoute（生成器：（上下文）=>profilePage（widget.uid））；
},
),
),
],
),
),
),

我希望在底部导航栏中实现此曲线，而无需浮动操作 按钮。

现在只有当我把晶圆厂放在导航栏的中心时，它才起作用，但我 我根本不想要晶圆厂

---

上面的代码显示了我的底部导航栏，其中有3个图标，我想给出一条曲线（如图所示）作为附加设计。

使用

ClipPath

从矩形容器顶部切掉半圆。 考虑这个例子：

import 'package:flutter/material.dart';

void main() => runApp(MyContainer());

class CustomClipperImage extends CustomClipper<Path> {
  @override
  getClip(Size size) {
    var path = Path();
    path.lineTo(0, size.height);
    
    path.lineTo(size.width, size.height);
    path.lineTo(size.width,0.0);
    path.lineTo(2*size.width/3, 0.0);
    var firstEnd = Offset(size.width / 2, size.height/2);
    path.arcToPoint(Offset(size.width/3, 0),radius:Radius.circular(1));
      
  path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) {
    return false;
  }
}

class MyContainer extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('AnimatedContainer Demo'),
        ),
        body: Center(
          child:ClipPath(
   clipper: CustomClipperImage(),
   child: Container(height:100,
                    width: 300,
                    color:Colors.red,)
 )

        ),
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MyContainer（））；
类CustomClipperImage扩展CustomClipper{
@凌驾
getClip（大小）{
var path=path（）；
path.lineTo（0，大小.高度）；
path.lineTo（大小.宽度，大小.高度）；
path.lineTo（大小、宽度，0.0）；
path.lineTo（2*size.width/3，0.0）；
var firstEnd=偏移量（大小.宽度/2，大小.高度/2）；
路径.arcToPoint（偏移量（size.width/3,0），半径：radius.circular（1））；
path.close（）；
返回路径；
}
@凌驾
bool shouldReclip（CustomClipper oldClipper）{
返回false；
}
}
类MyContainer扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
家：脚手架(
appBar:appBar(
标题：文本（“动画容器演示”），
),
正文：中(
孩子：克利帕斯(
clipper:CustomClipperImage（），
儿童：容器（高度：100，
宽度：300，
颜色：颜色。红色，）
)
),
),
);
}
}

---

选中此项您可以在浮动操作按钮上添加一个圆形容器作为widget@JanviPatel“我的要求是不同的。”舒巴曼纳赫德说；我挡住背景。我和图中一样，没有中间的按钮

import 'package:flutter/material.dart';

void main() => runApp(MyContainer());

class CustomClipperImage extends CustomClipper<Path> {
  @override
  getClip(Size size) {
    var path = Path();
    path.lineTo(0, size.height);
    
    path.lineTo(size.width, size.height);
    path.lineTo(size.width,0.0);
    path.lineTo(2*size.width/3, 0.0);
    var firstEnd = Offset(size.width / 2, size.height/2);
    path.arcToPoint(Offset(size.width/3, 0),radius:Radius.circular(1));
      
  path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) {
    return false;
  }
}

class MyContainer extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('AnimatedContainer Demo'),
        ),
        body: Center(
          child:ClipPath(
   clipper: CustomClipperImage(),
   child: Container(height:100,
                    width: 300,
                    color:Colors.red,)
 )

        ),
      ),
    );
  }
}