无法在移动到其他页面时保持底部导航栏颤动

Question

我是一个初学者，我尝试过这个教程https://youtu.be/1ToqYMSnNhA但当我按下其他按钮时，它会导航到另一个屏幕。。底部栏正在消失。如何让它粘在一起？我得到了"底部溢出无限像素"代替底部导航栏。

#main.dart
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Splashscreen(),
routes: <String, WidgetBuilder>{
"/login": (BuildContext context) => LoginSignupScreen(),
"/profile": (BuildContext context) => Profile(),
"/home": (BuildContext context) => Home(),
"/splashscreen": (BuildContext context) => Splashscreen(),
"/department": (BuildContext context) => Department(),
},
);
}
}

#navbar.dart
import 'package:flutter/material.dart';
import 'package:mini_project/main.dart';
class Navbar extends StatefulWidget {
@override
_NavbarState createState() => _NavbarState();
}
class _NavbarState extends State<Navbar> {
int currentIndex = 0;
setBottomBarIndex(index) {
setState(() {
currentIndex = index;
});
}
@override
Widget build(BuildContext context) {
final Size size = MediaQuery.of(context).size;
return Scaffold(
backgroundColor: Colors.white.withAlpha(55),
body: Stack(
children: [
Positioned(
bottom: 0,
left: 0,
child: Container(
width: size.width,
height: 80,
child: Stack(
//overflow: Overflow.visible,
children: [
CustomPaint(
size: Size(size.width, 80),
painter: BCustomPainter(),
),
Center(
heightFactor: 0.6,
child: FloatingActionButton(
backgroundColor: Colors.blueAccent[100],
child: Icon(Icons.home),
elevation: 0.1,
onPressed: () {}),
),
Container(
width: size.width,
height: 80,
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly, //to align evenly
children: [
IconButton(
icon: Icon(
Icons.account_circle,
size: 30.0,
color: currentIndex == 0
? Colors.blueAccent[100]
: Colors.grey.shade400,
),
onPressed: () {
setBottomBarIndex(0);
Navigator.pushReplacementNamed(context, "/profile");
},
splashColor: Colors.white,
),
IconButton(
icon: Icon(
Icons.dynamic_feed,
size: 30.0,
color: currentIndex == 1
? Colors.blueAccent[100]
: Colors.grey.shade400,
),
onPressed: () {
setBottomBarIndex(1);
}),
Container(
width: size.width * 0.20,
),
IconButton(
icon: Icon(
Icons.workspaces_filled,
size: 30.0,
color: currentIndex == 2
? Colors.blueAccent[100]
: Colors.grey.shade400,
),
onPressed: () {
setBottomBarIndex(2);
Navigator.pushReplacementNamed(
context, "/department");
}),
IconButton(
icon: Icon(
Icons.notifications,
size: 30.0,
color: currentIndex == 3
? Colors.blueAccent[100]
: Colors.grey.shade400,
),
onPressed: () {
setBottomBarIndex(3);
}),
],
),
)
],
),
),
)
],
),
);
}
}
//for the shape of the nav bar
class BCustomPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
Paint paint = new Paint()
..color = Colors.white
..style = PaintingStyle.fill;
//quadratic BezierTo curve
Path path = Path();
path.moveTo(0, 20); // Start
path.quadraticBezierTo(size.width * 0.20, 0, size.width * 0.35, 0);
path.quadraticBezierTo(size.width * 0.40, 0, size.width * 0.40, 20);
path.arcToPoint(Offset(size.width * 0.60, 20),
radius: Radius.circular(20.0), clockwise: false);
path.quadraticBezierTo(size.width * 0.60, 0, size.width * 0.65, 0);
path.quadraticBezierTo(size.width * 0.80, 0, size.width, 20);
path.lineTo(size.width, size.height);
path.lineTo(0, size.height);
path.lineTo(0, 20);
canvas.drawShadow(path, Colors.black, 5, true);
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}

我已经在这里附上了主文件和导航栏文件！请帮忙！

Answer 1

使用这个插件Presistant_pottom_nav_bar.现在你可以在每个屏幕上使用底部导航栏

初始化变量

PersistentTabController _controller =PersistentTabController(initialIndex: 0);
//Screens for each nav items.
List<Widget> _NavScreens() {
return [
HomeScreen(),
OfferScreen(),
HelpScreen(),
ProfileScreen(),
CartViewScreen(),

];
}

List<PersistentBottomNavBarItem> _navBarsItems() {
return [
PersistentBottomNavBarItem(
icon: Icon(Icons.home),
title: ("Home"),
activeColor: CupertinoColors.activeBlue,
inactiveColor: CupertinoColors.systemGrey,
),
PersistentBottomNavBarItem(
icon: Icon(Icons.favorite),
title: ("OFFERS"),
activeColor: CupertinoColors.activeGreen,
inactiveColor: CupertinoColors.systemGrey,
),
PersistentBottomNavBarItem(
icon: Icon(Icons.person_pin),
title: ("Help"),
activeColor: CupertinoColors.systemRed,
inactiveColor: CupertinoColors.systemGrey,
),
PersistentBottomNavBarItem(
icon: Icon(Icons.local_activity),
title: ("ProfileScreen"),
activeColor: CupertinoColors.systemIndigo,
inactiveColor: CupertinoColors.systemGrey,
),
PersistentBottomNavBarItem(
icon: Icon(Icons.shop_cart),
title: ("Cart"),
activeColor: CupertinoColors.systemIndigo,
inactiveColor: CupertinoColors.systemGrey,
),
];
}
@override
Widget build(BuildContext context) {
return Center(
child: PersistentTabView(
controller: _controller,
screens: _NavScreens(),
items: _navBarsItems(),
confineInSafeArea: true,
backgroundColor: Colors.white,
handleAndroidBackButtonPress: true,
resizeToAvoidBottomInset: true,
hideNavigationBarWhenKeyboardShows: true,
decoration: NavBarDecoration(
borderRadius: BorderRadius.circular(10.0),
),
popAllScreensOnTapOfSelectedTab: true,
navBarStyle: NavBarStyle.style9,
),
);
}