I download a project from Github and currently, it's using the Persistent bottom nav bar. I'm just wondering how can I change the navigation bar background color if a user select either Light mode or Dark mode from the Account setting screen. Any help or suggestion will be really appreciated.
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()),
],
),
);
}
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');
},
),
],
),
),
],
),
),
);
}
}
