Flutter 如何在颤振中实现可扩展的底部导航条

我试图建立一个应用程序，其中包括一个底部导航栏，用于在屏幕之间导航

在底部导航栏的中间，我想添加一个按钮，用半圆扩展底部导航栏，并显示更多按钮

我已经阅读了底部导航栏的文档，并在pub.dev中搜索了很多类似的内容，但没有找到

有人知道这是否可以实现吗？如果可以，如何实现

---

非常感谢您

我认为您需要了解颤振动画径向菜单以及如何在代码中实现它，您可以尝试按照自己的方式实现。

您可以使用

showDialog

和

CustomPainter

检查这个简单的实现。基本上，它包括显示一个

showDialog

，底部填充等于

BottomNavigationBar

的高度，然后在

堆栈中排列项目。使用
CustomPainter
绘制半圆

完整示例应用程序：

导入'dart:math'作为数学；
进口“包装：颤振/材料.省道”；
void main（）{
runApp（MaterialApp（home:MyApp（））；
}
类MyApp扩展了StatefulWidget{
@凌驾
_MyAppState createState（）=>\u MyAppState（）；
}
类MyAppState扩展了状态{
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：文本（“测试应用程序”），
),
底部导航栏：底部导航栏(
unselectedItemColor:Colors.grey，
选择编辑颜色：Colors.blue，
showUnselectedLabels:true，
selectedFontSize:14，
未选择的字体大小：14，
类型：BottomNavigationBarType.fixed，
onTap：（索引）{
如果（索引==2）{
最终直径=200.0；
最终iconSize=40；
显示对话框(
上下文：上下文，
是的，
背景色：颜色。灰色。不透明度（0.1），
生成器：（上下文）=>材质(
颜色：颜色。透明，
子：堆栈(
对齐：对齐方向.bottomCenter，
儿童：[
容器(
宽度：直径+图标大小，
高度：直径/1.5，
对齐：对齐.bottomCenter，
保证金：
仅限边缘设置（底部：kBottomNavigationBarHeight），
子：堆栈(
儿童：[
容器(
对齐：对齐.bottomCenter，
子项：MyArc（直径：直径）），
定位(
左:0,，
底部：10，
子项：_buildButton（），
),
定位(
左：直径/4，
前10名，
子项：_buildButton（），
),
定位(
右：直径/4，
前10名，
子项：_buildButton（），
),
定位(
右:0,，
底部：10，
子项：_buildButton（），
)
],
),
),
],
),
),
);
}
},
项目：List.generate(
5.
（索引）=>
BottomNavigationBarItem（图标：icon（Icons.home），标签：“home”），
),
),
);
}
_buildButton（）{
返回容器(
约束：BoxConstraints.tightFor（宽度：40，高度：60），
子：列(
儿童：[
正文(
“头衔”，
样式：TextStyle（字体大小：12），
),
尺寸箱（高度：3），
圆形(
背景颜色：Colors.white，
子：图标（Icons.home），
),
],
),
);
}
}
类MyArc扩展了无状态小部件{
最终双倍直径；
常量MyArc（{Key-Key，this.diameter=200}）：super（Key:Key）；
@凌驾
小部件构建（构建上下文）{
返回自定义油漆(
画家：我的画家（），
尺寸：尺寸（直径，直径），
);
}
}
//这是绘画课
类MyPainter扩展了CustomPainter{
@凌驾
空心油漆（帆布，尺寸）{
最终油漆=油漆（）
..着色器=径向梯度(
颜色：[
颜色，蓝色，
颜色。紫色。不透明度（0.4），
],
).createShader（Rect.fromCircle(
中心：偏移（尺寸.宽度/2，尺寸.高度），
半径：200，
));
帆布拉弧(
fromCenter矩形(
中心：偏移（尺寸.宽度/2，尺寸.高度），
高度：尺寸。高度*1.5，
宽度：size.width，
),
math.pi，
math.pi，
假,，
油漆，
);
}
@凌驾
bool shouldRepaint（CustomPainter oldDelegate）=>false；
}

结果：

我已经读过，但不幸的是，我仍然无法理解如何将其应用于底部导航栏。这是我创建底部导航栏的答案，您可以将容器包装在堆栈中，并将径向菜单作为位置小部件添加到其中==>谢谢。这对我来说是一个很好的开始，我实现了我想要的