flutter 如何给一个标签BottomNavigationBarItem给予唯一颜色

kcwpcxri  于 2023-05-19  发布在  Flutter
关注(0)|答案(2)|浏览(200)

我正在使用Flutter应用程序中的BottomNavigationBar。我有三样东西。我想其中2个有选定和未选定标签的默认颜色。但我想给予一个标签一个独特的颜色。下面是代码

import 'package:flutter/material.dart';
import 'package:playticket/screens/01.dart';

class CustomNavBar extends StatefulWidget {
  CustomNavBar({Key? key}) : super(key: key);

  @override
  State<CustomNavBar> createState() => _CustomNavBarState();
}

class _CustomNavBarState extends State<CustomNavBar> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    List<Widget> _screens = [
     Screen1(),
     Screen1(),
     Screen1(),
    ];
    return Scaffold(
      body: _screens[_currentIndex],
      bottomNavigationBar: SizedBox(
        height: 90,
        child: BottomNavigationBar(

          backgroundColor: Colors.white,
          type: BottomNavigationBarType.fixed,
          selectedLabelStyle: TextStyle(fontSize: 12, fontFamily: "Poppins", fontWeight: FontWeight.w600),
          unselectedLabelStyle: TextStyle(fontSize: 12, fontFamily: "Poppins", fontWeight: FontWeight.w600),
          unselectedItemColor: Color(0xff909090),
          currentIndex: _currentIndex,
          selectedItemColor: Color(0xff3D3D3D),
          onTap: (value) {
            setState(() => _currentIndex = value);
          },
          items: [
            BottomNavigationBarItem(
              activeIcon: ImageIcon(AssetImage("assets/images/home-icon.png"), size: 25,),
              label: "Home",
              icon: ImageIcon(AssetImage("assets/images/home-icon.png"), size: 25, color: Color(0xff909090),),
            ),
            BottomNavigationBarItem(
                icon: Image.asset("assets/images/add-box-fill.png", width: 28, height: 28,),
                label: "Create",
               ),
            BottomNavigationBarItem(
                activeIcon: ImageIcon(AssetImage("assets/images/ticket-icon.png"), size: 25, color: Color(0xff3D3D3D),),
                label: "Reminder",
                icon: ImageIcon(AssetImage("assets/images/ticket-icon.png"), size: 25, color: Color(0xff909090),)
            ),
          ],
        ),
      ),
    );
  }
}

我想第二个底部NavigationBarItem的标签“创建”必须有红色,即使它被选中或不。如何才能实现这一点

von4xj4u

von4xj4u1#

嘿,我试着给予你一个选择:

我没有使用图像或图标,而是将其更改为包含图标和文本的列的容器。也设置这个容器的背景颜色为红色以获得一个唯一的颜色为那个标签.然后设置一个空字符串到这个标签属性以隐藏那个项目的默认标签.

items: [
            BottomNavigationBarItem(
              activeIcon: ImageIcon(AssetImage("assets/images/home-icon.png"), size: 25,),
              label: "Home",
              icon: ImageIcon(AssetImage("assets/images/home-icon.png"), size: 25, color: Color(0xff909090),),
            ),
            BottomNavigationBarItem(
              icon: Container(
                width: 28,
                height: 28,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(Icons.add, color: Colors.white, size: 20),
                    Text(
                      "Create",
                      style: TextStyle(fontSize: 8, color: Colors.white),
                    ),
                  ],
                ),
                decoration: BoxDecoration(
                  color: Colors.red,
                  borderRadius: BorderRadius.circular(5),
                ),
              ),
              label: "", // Set empty label to hide the default label
            ),
            BottomNavigationBarItem(
              activeIcon: ImageIcon(AssetImage("assets/images/ticket-icon.png"), size: 25, color: Color(0xff3D3D3D),),
              label: "Reminder",
              icon: ImageIcon(AssetImage("assets/images/ticket-icon.png"), size: 25, color: Color(0xff909090),),
            ),
          ],
        ),
ct2axkht

ct2axkht2#

您可以尝试使用BottomNavigationBar的selected和unselected color属性:

import 'package:flutter/material.dart'; import 'package:playticket/screens/01.dart';

class CustomNavBar extends StatefulWidget {   CustomNavBar({Key? key}) : super(key: key);

  @override   State<CustomNavBar> createState() =>
_CustomNavBarState(); }

class _CustomNavBarState extends State<CustomNavBar> {   int
_currentIndex = 0;

  @override   Widget build(BuildContext context) {
    List<Widget> _screens = [
     Screen1(),
     Screen1(),
     Screen1(),
    ];
    return Scaffold(
      body: _screens[_currentIndex],
      bottomNavigationBar: SizedBox(
        height: 90,
        child: BottomNavigationBar(

          backgroundColor: Colors.white,
          type: BottomNavigationBarType.fixed,
          selectedLabelStyle: TextStyle(fontSize: 12, fontFamily: "Poppins", fontWeight: FontWeight.w600),
          unselectedLabelStyle: TextStyle(fontSize: 12, fontFamily: "Poppins", fontWeight: FontWeight.w600),
          unselectedItemColor: _currentIndex != 1 ? Color(0xff909090) : Colors.red,
          currentIndex: _currentIndex,
          selectedItemColor: _currentIndex != 1 ? Color(0xff3D3D3D) : Colors.red,
          onTap: (value) {
            setState(() => _currentIndex = value);
          },
          items: [
            BottomNavigationBarItem(
              activeIcon: ImageIcon(AssetImage("assets/images/home-icon.png"), size: 25,),
              label: "Home",
              icon: ImageIcon(AssetImage("assets/images/home-icon.png"), size: 25, color: Color(0xff909090),),
            ),
            BottomNavigationBarItem(
                icon: Image.asset("assets/images/add-box-fill.png", width: 28, height: 28, color: Colors.red),
                label: "Create",
               ),
            BottomNavigationBarItem(
                activeIcon: ImageIcon(AssetImage("assets/images/ticket-icon.png"), size: 25, color: Color(0xff3D3D3D),),
                label: "Reminder",
                icon: ImageIcon(AssetImage("assets/images/ticket-icon.png"), size: 25, color: Color(0xff909090),)
            ),
          ],
        ),
      ),
    );   } }

相关问题