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

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());
  }
}

Answer 1

我不知道这个@NgModule({ imports: [ StoreModule.forRoot(reducers, { runtimeChecks: { strictStateImmutability: false, }, }), ], }) export class AppModule {} 小部件，但是，查看您的代码，我可以假定您已经在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... ); 更改为所需的颜色即可。