![](/img/trans.png)
[英]Why am I not able to change the background color of my bottom navigation bar in Flutter?
[英]How to change bottom navigation background color in Flutter
我從 Github 下載了一個項目,目前它正在使用 Persistent 底部導航欄。 我只是想知道如果用戶 select 從帳戶設置屏幕中選擇淺模式或深色模式,我該如何更改導航欄背景顏色。 任何幫助或建議將不勝感激。
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
body: PersistentTabView(
context,
controller: _controller,
confineInSafeArea: true,
backgroundColor: Color(0xFFE9E9E9), //I have tried removing this but still not working
handleAndroidBackButtonPress: true,
resizeToAvoidBottomInset: true,
stateManagement: true,
navBarStyle: NavBarStyle.simple,
items: _navBarsItems(),
screens: [
Container(
color: Colors.white,
height: MediaQuery.of(context).size.height,
child: Home()),
Container(
color: Colors.white,
height: MediaQuery.of(context).size.height,
child: Categories()),
Container(
color: Colors.white,
height: MediaQuery.of(context).size.height,
child: Search()),
Container(
color: Colors.white,
height: MediaQuery.of(context).size.height,
child: Bookmarks()),
Container(
color: Colors.white,
height: MediaQuery.of(context).size.height,
child: Account()),
],
),
);
}
帳號.dart
class ColorModal extends HookWidget {
@override
Widget build(BuildContext context) {
final color = useProvider(colorProvider);
changeColor(String cl) async {
color.state = cl;
var box = await Hive.openBox('appBox');
box.put('color', cl);
Navigator.pop(context);
}
return SingleChildScrollView(
controller: ModalScrollController.of(context),
child: Container(
decoration: BoxDecoration(
color: color.state == 'dark' ? eachPostBgDark : Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5), topRight: Radius.circular(5))),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(left: 30.0, top: 30, bottom: 20),
child: Text("Color Preference",
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w500,
color: color.state == 'dark'
? Color(0xFFE9E9E9)
: Colors.black)),
),
Container(
margin: EdgeInsets.only(
bottom: 40,
left: 20,
right: 20,
),
decoration: BoxDecoration(
color: color.state == 'dark'
? Colors.black.withOpacity(0.4)
: Colors.black.withOpacity(0.06),
borderRadius: BorderRadius.circular(5)),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
leading: new Icon(
color.state == 'light'
? Icons.check_circle
: Icons.radio_button_unchecked,
color: color.state == 'light'
? colorPrimary
: color.state == 'dark'
? Color(0xFFA7A9AC)
: Colors.black,
),
title: new Text("Light Mode",
style: TextStyle(
color: color.state == 'dark'
? Color(0xFFA7A9AC)
: Colors.black)),
onTap: () {
changeColor('light');
},
),
ListTile(
leading: new Icon(
color.state == 'dark'
? Icons.check_circle
: Icons.radio_button_unchecked,
color: color.state == 'dark'
? colorPrimary
: color.state == 'dark'
? Color(0xFFA7A9AC)
: Colors.black,
),
title: new Text("Dark Mode",
style: TextStyle(
color: color.state == 'dark'
? Color(0xFFA7A9AC)
: Colors.black)),
onTap: () {
changeColor('dark');
},
),
],
),
),
],
),
),
);
}
}
在這里分配另一種顏色,例如-
背景顏色:顏色(0xFFFFFFFF),
並檢查它是否有效。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.