flutter - 将按钮颜色更改为弯曲导航栏中选项卡上的主要颜色

Question

我使用 CurvedNavigationBar 作为我的底部导航栏。点击时，我想将此黑色图标颜色更改为原色。但是当它没有被点击时，我只想要 ti 作为黑色。我该怎么做？我尝试更改 CurvedNavigationBar 的最后三个属性，但没有获得所需的输出。

代码：

 final bottomNavBar = CurvedNavigationBar(
      items: [
        SvgPicture.asset(
          'assets/images/hand-shake.svg',
          key: Key('SessionsPage'),
          height: ScreenUtil().setHeight(26),
          width: ScreenUtil().setWidth(26),
          color: Colors.black,
        ),
        SvgPicture.asset(
          'assets/images/home.svg',
          height: ScreenUtil().setHeight(26),
          key: Key("FeedsPage"),
          width: ScreenUtil().setWidth(26),
          color: Colors.black,
        ),
        Card(
          elevation: 5,
          shape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(50)),
          child: CircleAvatar(
            backgroundColor: Colors.white,
            radius: 24,
            child: Icon(
              Icons.edit,
              color: Colors.black,
              size: 35,
            ),
          ),
        ),
        Image.asset(
          'assets/images/booking_icon.png',
          height: ScreenUtil().setHeight(26),
          width: ScreenUtil().setWidth(26),
          color: Colors.black,
        ),
        StreamBuilder(
            stream: usersRef
                .document(CurrentUser().currentUser.databaseID)
                .collection('Alerts')
                .snapshots(),
            builder: (context, snapshot) {
              switch (snapshot.connectionState) {
                case ConnectionState.none:
                case ConnectionState.waiting:
                  return Stack(
                    children: <Widget>[
                      SvgPicture.asset(
                        'assets/images/noti.svg',
                        height: ScreenUtil().setHeight(26),
                        width: ScreenUtil().setWidth(26),
                        color: Colors.black,
                      ),
                      CircleAvatar(
                        radius: 2,
                      )
                    ],
                  );

                default:
                  List rev1 = snapshot.data.documents.toList();
                  List res1 = [];

                  for (var i in rev1) {
                    if (i.data['seen'] == false) res1.add(i.documentID);
                  }
                  return Stack(
                    children: <Widget>[
                      SvgPicture.asset(
                        'assets/images/noti.svg',
                        height: ScreenUtil().setHeight(26),
                        width: ScreenUtil().setWidth(26),
                        color: Colors.black,
                      ),
                      res1.length == 0
                          ? CircleAvatar(
                              radius: 2,
                            )
                          : CircleAvatar(
                              radius: 8,
                              backgroundColor: Colors.white,
                              child: Text(
                                res1.length.toString(),
                                style: TextStyle(fontSize: 10),
                              ),
                            ),
                    ],
                  );
              }

              //   child: SvgPicture.asset(
              //     'assets/images/noti.svg',
              //     height: ScreenUtil().setHeight(28),
              //     width: ScreenUtil().setWidth(28),
              //     color: whiteColor,
              // ),
            }),
      ],
      onTap: onTabTapped,
      index: _currentIndex,
      backgroundColor: Colors.white,
      buttonBackgroundColor: whiteColor,
      color: Colors.white,
      height: 60,
    );
    return Scaffold(bottomNavigationBar: bottomNavBar, body: returnBody());
  }
}

标签： flutterdart

Answer 1

我不知道这个CurvedNavigationBar小部件，但是，查看您的代码，我可以假设您已经在_currentIndex变量中拥有选定的索引。

因此，您可以更改您的项目并验证此属性以定义正确的颜色：

CurvedNavigationBar(
      items: [
        SvgPicture.asset(
          'assets/images/hand-shake.svg',
          key: Key('SessionsPage'),
          height: ScreenUtil().setHeight(26),
          width: ScreenUtil().setWidth(26),
          color: _currentIndex == 0 ? Colors.red : Colors.black,
        ),
        // Other items, incrementing the index validation (e.g. == 1, == 2, etc)
      ],
      // Other properties...
);

只需将 更改为Colors.red您想要的颜色。