英文:
Creating a custom-shaped bottom navigation bar in Flutter
问题
我目前正在开发一个Flutter项目，需要帮助创建一个自定义形状的底部导航栏。我想在我的应用程序中实现底部导航栏的独特视觉设计。
为了明确，我已经附上了所需自定义形状底部导航栏的截图链接：
我将非常感谢任何关于如何在Flutter中创建自定义形状底部导航栏的建议、指导或代码示例。提前感谢您的帮助！
英文:
I'm currently working on a Flutter project and need assistance with creating a custom-shaped bottom navigation bar. I want to achieve a unique visual design for the bottom navigation bar in my app.
To provide clarity, I have attached a screenshot of the desired custom-shaped bottom navigation bar:
I would greatly appreciate any suggestions, guidance, or code samples on how to create a custom-shaped bottom navigation bar in Flutter. Thank you in advance for your assistance!
答案1
得分: 1
你可以使用此插件创建一个类似于你的图像中的底部栏 https://pub.dev/packages/animated_bottom_navigation_bar
示例：
Scaffold(
floatingActionButton: FloatingActionButton(
//参数
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: AnimatedBottomNavigationBar(
icons: iconList,
activeIndex: _bottomNavIndex,
gapLocation: GapLocation.center,
notchSmoothness: NotchSmoothness.softEdge,
onTap: (index) => setState(() => _bottomNavIndex = index),
//其他参数
),
);
英文:
You can use this plugin to create a bottom bar like your image https://pub.dev/packages/animated_bottom_navigation_bar
example:-
Scaffold(
floatingActionButton: FloatingActionButton(
//params
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: AnimatedBottomNavigationBar(
icons: iconList,
activeIndex: _bottomNavIndex,
gapLocation: GapLocation.center,
notchSmoothness: NotchSmoothness.softEdge,
onTap: (index) => setState(() => _bottomNavIndex = index),
//other params
),
);
答案2
得分: 0
以下是翻译好的代码部分：
这是如何做到的
您需要在Scaffold中设置extendBody: true
class SO extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
extendBody: true,
appBar: AppBar(),
body: ListView.builder(
itemBuilder: (BuildContext context, int index) {
return Text('文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本');
},
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
onPressed: () {},
),
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
notchMargin: 12,
color: Colors.blue,
child: Container(
height: 60,
),
),
);
}
}
请注意，此处的代码部分已经翻译成中文。
英文:
Here is how you can do it
You need to set extendBody: true in Scaffold
class SO extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
extendBody: true,
appBar: AppBar(),
body: ListView.builder(
itemBuilder: (BuildContext context, int index) {
return Text('text text text text text text text text text text text text text text text text text text text text ');
},
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
onPressed: () {},
),
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
notchMargin: 12,
color: Colors.blue,
child: Container(
height: 60,
),
),
);
}
}
This answer don't belongs to me, here is the orignal post - https://stackoverflow.com/a/59457307/22228906
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论