[英]Change Background Color of Active Button Navigation Bar Item in Cupertino Tab Bar(Flutter)
I'm making an application wherein the active bottom navigation bar item needs to have a different background than the inactive ones.我正在制作一个应用程序,其中活动的底部导航栏项需要具有与非活动项不同的背景。 I tried wrapping it into activeicon
header and leaving the label as null.我尝试将其包装到activeicon
header 并将 label 保留为 null。 But, I kept on having a line below that is not the same color as my background in activeicon
.但是,我一直在下面有一条线,它与我在activeicon
中的背景颜色不同。 I tried placing it in a SizedBox
or setting it to height: double.infinity
but it didn't work.我尝试将它放在SizedBox
中或将其设置为height: double.infinity
但它不起作用。 I need to use a Cupertino tab bar so that my nav bar would be persistent.我需要使用 Cupertino 选项卡栏,以便我的导航栏保持不变。 I want to remove the line below the active item so it would look more seamless.我想删除活动项目下方的行,使其看起来更加无缝。
Here's the current state of my navbar:这是我导航栏的当前 state:
I hope you could give me a solution to this.我希望你能给我一个解决方案。 It has been weeks of me trying to solve it.我已经花了数周时间试图解决它。
Here's my code这是我的代码
class Nav extends StatelessWidget {
const Nav({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return CupertinoTabScaffold(
tabBar: CupertinoTabBar(
backgroundColor: CupertinoTheme.of(context).primaryColor,
activeColor: Colors.black,
inactiveColor: Colors.white,
iconSize: 25,
items: <BottomNavigationBarItem>[
_bottomNavigationBarItem(Icons.track_changes, "Track", context),
_bottomNavigationBarItem(Icons.add_location_sharp, "Create", context),
_bottomNavigationBarItem(Icons.map_rounded, "Travels", context),
_bottomNavigationBarItem(Icons.settings, "Settings", context)
],
),
tabBuilder: (context, index) {
switch (index) {
case 0:
return CupertinoTabView(builder: (context) {
return const CupertinoPageScaffold(
child: TrackPage(),
);
});
case 1:
return CupertinoTabView(builder: (context) {
return const CupertinoPageScaffold(
child: CreatePage(),
);
});
case 2:
return CupertinoTabView(builder: (context) {
return const CupertinoPageScaffold(
child: TravelsPage(),
);
});
case 3:
return CupertinoTabView(builder: (context) {
return const CupertinoPageScaffold(
child: SettingsPage(),
);
});
default:
return CupertinoTabView(builder: (context) {
return const CupertinoPageScaffold(
child: CreatePage(),
);
});
}
},
);
}
}
BottomNavigationBarItem _bottomNavigationBarItem(
IconData icon, String label, BuildContext context) {
return BottomNavigationBarItem(
activeIcon: Container(
width: double.infinity,
height: double.infinity,
color: CupertinoTheme.of(context).primaryContrastingColor,
padding: const EdgeInsets.only(top: 6.0),
child: Column(
children: [
Expanded(
child: Icon(icon, color: Colors.black),
),
const SizedBox(height:10),
Expanded(
child:
Text(label, style: const TextStyle(color: Colors.black, fontSize: 12))),
],
)),
icon: Padding(
padding: const EdgeInsets.only(top: 6.0),
child: Column(
children: [
Expanded(
child: Icon(icon),
),
const SizedBox(height:10),
Expanded(
child:
Text(label, style: const TextStyle( fontSize: 12))),
],
),
),
);
}
Unable to find any parameter to handle this situation, seems like it is hard-coded on source-code.找不到任何参数来处理这种情况,似乎它是在源代码上硬编码的。 You can use Transform
to manipulate the bottomNavigationBar
.您可以使用Transform
来操作bottomNavigationBar
。 also you can create custom bottomNavigationBar
using Row
, Column
and using active index for styling.您还可以使用Row
、 Column
创建自定义bottomNavigationBar
并使用活动索引进行样式设置。
class Nav extends StatelessWidget {
const Nav({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Transform.translate( //<- this
offset: const Offset(0, 4),
child: CupertinoTabScaffold(...
I think this is not possible to change background color of selected BottomNavigationBar
我认为这不可能改变选定的BottomNavigationBar
的背景颜色
refer BottomNavigationBar here ,change Color on your need 在此处参考底部导航栏,根据需要更改颜色
try below code on Dartpad here在 Dartpad 上尝试以下代码
try this answer hope its helpful to you.试试这个答案希望它对你有帮助。
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
/// This is the main application widget.
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
title: _title,
home: MyStatefulWidget(),
);
}
}
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({Key? key}) : super(key: key);
@override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
final selectedItemColor = Colors.white;
final unSelectedItemColor = Colors.white30;
final selectedBackGroundColor = Colors.green;
final unselectedBackGroundColor = Colors.blue;
int selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0: Track',
style: optionStyle,
),
Text(
'Index 1: Create',
style: optionStyle,
),
Text(
'Index 2: Travel',
style: optionStyle,
),
Text(
'Index 3: Setting',
style: optionStyle,
),
];
Color _getBgColor(int index) => selectedIndex == index
? selectedBackGroundColor
: unselectedBackGroundColor;
Color _getItemColor(int index) =>
selectedIndex == index ? selectedItemColor : unSelectedItemColor;
void _onItemTapped(int index) {
setState(() {
selectedIndex = index;
});
}
Widget _buildIcon(IconData iconData, String text, int index) => Container(
width: double.infinity,
height: kBottomNavigationBarHeight,
child: Material(
color: _getBgColor(index),
child: InkWell(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(iconData),
Text(
text,
style: TextStyle(
fontSize: 12,
color: _getItemColor(index),
),
),
],
),
onTap: () => _onItemTapped(index),
),
),
);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),
),
body: Center(
child: _widgetOptions.elementAt(selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
selectedFontSize: 0,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: _buildIcon(
Icons.track_changes,
'Track',
0,
),
title: SizedBox(),
),
BottomNavigationBarItem(
icon: _buildIcon(
Icons.add_location_sharp,
'Create',
1,
),
title: SizedBox(),
),
BottomNavigationBarItem(
icon: _buildIcon(
Icons.map_rounded,
'Travel',
2,
),
title: SizedBox(),
),
BottomNavigationBarItem(
icon: _buildIcon(
Icons.settings,
'Setting',
3,
),
title: SizedBox(),
),
],
currentIndex: selectedIndex,
selectedItemColor: selectedItemColor,
unselectedItemColor: unSelectedItemColor,
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.