How to use an image in buttomnavigationbaritem in Flutter?

Question

I want to use a UK flag in buttom navigation bar, but the UK flag does not appear and only shows a purole color. When I put another photo (a transparent photo with letter Z written on it), it appears, nonetheless as balck and white. But the UK flag just gives me a purple color.

Here is my code:

      bottomNavigationBar: CupertinoTabBar(
        activeColor: currentTheme.iconTheme.color,
        backgroundColor: currentTheme.backgroundColor,
        items: const [
          BottomNavigationBarItem(
            icon: ImageIcon(
              AssetImage('assets/images/uk_one.png'),
              color: null,
            ),
            label: '',
        ],
        onTap: onPageChanged,
        currentIndex: _page,
      ),

I tried commenting out activeColor and backgroundColor, but it did not fix the issue.

Answer 1

Use Image.asset in place of ImageIcon in BottomNavigationBarItem.

BottomNavigationBarItem(
  icon: Image.asset(
    'assets/images/uk_one.png',
  ),
  label: '',
),

Hope it helps.

Answer 2

As icon: takes a widget you can directly assign Image widget or else try this instead

bottomNavigationBar: CupertinoTabBar(
        activeColor: currentTheme.iconTheme.color,
        backgroundColor: currentTheme.backgroundColor,
        items: const [
          BottomNavigationBarItem(
            icon: CircleAvatar(
              backgroundColor: white,
              child: Image(
                image: AssetImage("assets/images/uk_one.png"),
              ),
            ),
            label: '',)
        ],
        onTap: onPageChanged,
        currentIndex: _page,
      ),