如何使这种底部导航栏处于颤动状态

Question

Flutter底部导航栏

我需要使这种类型的底部导航栏处于浮动状态，其中所选项目将像主页按钮一样突出显示。有人能帮忙吗？

Answer 1

使用此插件

并将此代码放入scaffold小部件中。

bottomNavigationBar: CurvedNavigationBar(
backgroundColor: Colors.blueAccent,
items: <Widget>[
Icon(Icons.add, size: 30),
Icon(Icons.list, size: 30),
Icon(Icons.compare_arrows, size: 30),
],
onTap: (index) {
setState(() {
_page = index;
});
},
),

以及如果您想以编程方式更改页面(就像导航到另一个页面的按钮一样(。

添加这些变量，

int _page = 0;
GlobalKey<CurvedNavigationBarState> _bottomNavigationKey = GlobalKey();

然后添加此属性，将此属性放入将导航到另一个页面的按钮中

ElevatedButton(
child: Text('Your Button'),
onPressed: () {
final CurvedNavigationBarState? navBarState =
_bottomNavigationKey.currentState;
navBarState?.setPage(1);//this will navigate to page at index 1
},
)

你的代码应该像这个

import 'package:flutter/material.dart';
import 'package:curved_navigation_bar/curved_navigation_bar.dart';
void main() {
runApp(Home());
}
class Home extends StatefulWidget {
const Home({Key? key}) : super(key: key);
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
GlobalKey<CurvedNavigationBarState> _bottomNavigationKey = GlobalKey();
int _page = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: CurvedNavigationBar(
key: _bottomNavigationKey,
items: <Widget>[
Icon(Icons.add, size: 30),
Icon(Icons.list, size: 30),
Icon(Icons.compare_arrows, size: 30),
],
onTap: (index) {
setState(() {
_page = index;
});
},
),
body: Center(
child: ElevatedButton(
child: Text('Your Button'),
onPressed: () {
final CurvedNavigationBarState? navBarState =
_bottomNavigationKey.currentState;
navBarState?.setPage(1);
},
),
)
);
}
}

有关更多信息，请查看插件的页面