在每个屏幕中保持底部导航栏颤动 [英] Keep the bottom navigation bar in every screens flutter
问题描述
我有这个带有中心停靠浮动图标的底部导航栏,底部栏存在,我可以浏览底部栏中的选项卡元素,但我需要显示底部栏固定到每个屏幕,无论我打开什么屏幕我都需要显示底部导航栏
I have this bottom navigation bar with center docked floating icon,the bottom bar is present and i can go through the tab elements in bottombar but i need to show the bottom bar fixed to every screen,what ever screen i open i need to show the bottombar navigation
1.如果我转到主屏幕并且我要单击主页中的一个项目并重定向下一页,那么我如何查看子页面中的底部栏,然后底部导航栏应该显示重定向的页面
1.How can i view the bottombar in subpages example if i goto home screen and i am going click an item in hompage and redirect next page then the bottom nav bar should show the redirected page
底部导航
class BottomViewScreenState extends State<BottomViewScreen> {
TabController tabController;
static int _selectedTab = 0;
final List<Widget> _children = [
new HomeScreen(),
new OfferScreen(),
new HelpScreen(),
new ProfileScreen(),
new CartViewScreen(),
];
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
theme: ThemeData(
primaryColor: Color(0xffFF5555),
),
home: Scaffold(
body: _children[_selectedTab], // new
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
onPressed: () {
// new CartViewScreen();
//onTabTapped(4);
// CartViewScreen();
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CartViewScreen(),
),
);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(Icons.add_shopping_cart),
Text(
"CART",
style: TextStyle(fontSize: 8.0),
),
],
),
backgroundColor: Colors.indigo[900],
foregroundColor: Colors.white,
elevation: 2.0,
),
bottomNavigationBar: BottomAppBar(
clipBehavior: Clip.antiAlias,
notchMargin: 10.0,
shape: CircularNotchedRectangle(),
child: SizedBox(
height: 80,
child: Theme(
data: Theme.of(context).copyWith(
// sets the background color of the `BottomNavigationBar`
canvasColor: Colors.white,
// sets the active color of the `BottomNavigationBar` if `Brightness` is light
primaryColor: Colors.amberAccent,
textTheme: Theme.of(context)
.textTheme
.copyWith(caption: new TextStyle(color: Colors.grey))),
child: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
onTap: onTabTapped,
currentIndex: _selectedTab,
fixedColor: Colors.amberAccent,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text(
'HOME',
style: TextStyle(fontSize: 10.0),
),
activeIcon: Column(
children: <Widget>[
Icon(Icons.local_offer),
],
),
),
BottomNavigationBarItem(
icon: SvgPicture.asset(
"assets/images/ic_bottom_offer.svg",
height: 25,
color: Colors.grey,
),
title: Text('OFFERS', style: TextStyle(fontSize: 10.0))),
BottomNavigationBarItem(
icon: Icon(Icons.info_outline),
title: Text('HELP', style: TextStyle(fontSize: 10.0))),
BottomNavigationBarItem(
icon: Icon(Icons.people),
title: Text('PROFILE', style: TextStyle(fontSize: 10.0))),
],
),
),
),
),
),
);
}
void onTabTapped(int index) {
setState(() {
_selectedTab = index;
});
}
}
主要
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
debugShowCheckedModeBanner: false,
title: "App",
home: new SplashScreen(),
routes: {
"/homescreen": (_) => new BottomViewScreen(),
"/login":(_) => new LoginScreen(),
},
);
}
}
推荐答案
我用这个插件解决了这个问题 P Resistance_bottom_nav_bar.现在我可以在每个屏幕上使用底部导航栏
I have this figured it out with using this plugin Presistant_bottom_nav_bar.now i can use bottomnavbar on every screen
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,
),
);
}
如果您不想在某个屏幕上显示导航栏,您可以使用以下导航器,更多信息请查看 persistent_bottom_nav_bar 文档
If you don't want navbar on certain screen you can use following navigator,for more info checkout persistent_bottom_nav_bar documentation
pushNewScreen(
context,
screen: MainScreen(),
withNavBar: false, // OPTIONAL VALUE. True by default.
pageTransitionAnimation: PageTransitionAnimation.cupertino,
);
这篇关于在每个屏幕中保持底部导航栏颤动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!