[英]How to use floating bottom navigation bar in Flutter
I'm trying to use this plugin called Dot navigation bar ( https://pub.dev/packages/dot_navigation_bar ) and I already installed the plugin into my current project but I'm just wondering how can I pass my existing Screens.我正在尝试使用这个名为 Dot 导航栏 ( https://pub.dev/packages/dot_navigation_bar ) 的插件,并且我已经将该插件安装到我当前的项目中,但我只是想知道如何通过我现有的屏幕。
I have Home(), Calender(), Help(), Schedule() screen so just wondering how can I open those page when I click on the icons.我有 Home()、Calender()、Help()、Schedule() 屏幕,所以我想知道单击图标时如何打开这些页面。 Any help or suggestion will be really appreciated.
任何帮助或建议将不胜感激。
This is the example code from the documentation.这是文档中的示例代码。
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
var _selectedTab = _SelectedTab.home;
void _handleIndexChanged(int i) {
setState(() {
_selectedTab = _SelectedTab.values[i];
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
extendBody: true,
body: Container(
child: Image.asset("lib/img/1.png"),
),
bottomNavigationBar: Padding(
padding: EdgeInsets.only(bottom: 10),
child: DotNavigationBar(
margin: EdgeInsets.only(left: 10, right: 10),
currentIndex: _SelectedTab.values.indexOf(_selectedTab),
dotIndicatorColor: Colors.white,
unselectedItemColor: Colors.grey[300],
// enableFloatingNavBar: false,
onTap: _handleIndexChanged,
items: [
/// Home
DotNavigationBarItem(
icon: Icon(Icons.home),
selectedColor: Color(0xff73544C),
),
/// Likes
DotNavigationBarItem(
icon: Icon(Icons.favorite),
selectedColor: Color(0xff73544C),
),
/// Search
DotNavigationBarItem(
icon: Icon(Icons.search),
selectedColor: Color(0xff73544C),
),
/// Profile
DotNavigationBarItem(
icon: Icon(Icons.person),
selectedColor: Color(0xff73544C),
),
],
),
),
);
}
}
enum _SelectedTab { home, favorite, search, person }
Right now It just showing like this.现在它只是这样显示。
In body
pass array of navigation
items:在
navigation
项的body
传递数组中:
navigation=[home(), favorite(), search(), person()]
body: navigation[_selectedTab]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.