簡體   English   中英

如何在 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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM