如何在 Flutter 中更改底部导航背景颜色

Question

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');
                    },
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

Assign here some another color like-

backgroundColor: Color(0xFFFFFFFF),

and check, if it works.