Question 253628 in Flutter Question posted in
The official Flutter documentation can be found here.

How to use an image in buttomnavigationbaritem in Flutter?

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.

Tags:

2

Answers


  1. 0

    Use Image.asset in place of ImageIcon in BottomNavigationBarItem.

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

    Hope it helps.

    Login or Signup to reply.
  2. 0

    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,
      ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search