Flutter的BottomNavigationBar如何显示图片？

Question

我需要在导航栏中显示这样的图像：

但我不能，因为 NavigationBarItem class 需要一个图标，所以当我使用 ImageIcon 小部件时，我丢失了 colors。 图像中有多个 colors。

如何在其中显示图像或制作彩色图标的方法？

当我使用

BottomNavigationBarItem(
                icon: ImageIcon(
                  NetworkImage('https://picsum.photos/250?image=9'),
                ),
                title: Text('Image'),
              ),

它看起来像彩色矩形

Answer 1

ImageIcon(
 AssetImage("images/icon_more.png"),
 color: Color(0xFF3A5A98),
 ),

代替

new BottomNavigationBarItem(
           icon: Icon(Icons.home),
           title: Text('Home'),
         ),

改成这个

      BottomNavigationBarItem(
           icon: ImageIcon(
               AssetImage("images/icon_more.png"),
                    color: Color(0xFF3A5A98),
               ),
           title: Text('Home'),
         ),

Answer 2

所以显然解决方案是使用 Image.asset('image_path') for icon/activeIcon in BottomNavigationBarItem 如果您想将图像显示为具有原始颜色的底栏导航图标。

但是，如果您的items: const <BottomNavigationBarItem>[]中包含关键字const ，它确实会出错。 如果你删除它，你应该能够使用Image.asset而不是ImageIcon （着色着色）

Answer 3

正如@asbah-riyas 提到的，可以通过将ImageIcon小部件提供给BottomNavigationBarItem的icon参数来完成。 虽然您不需要在其中指定color

您可以在此处的 codepen 中检查或使用它。

Answer 4

NavigationBarItem 的图像属性需要一个小部件，而不是一个图标，所以我可以使用它。 BottomNavigationBarItem(icon: Image.asset('images/symbol.png')),

Answer 5

正确答案是 BottomNavigationBarItem(icon: Image.asset('images/symbol.png')),

如果您将您的 png 图像放置在 images 文件夹中，并且在您的资产下的 pubspeq.yaml 中提及的 images/image.png 相同

Answer 6

您可以改用它：

    BottomNavigationBarItem(
        icon: Image.asset(" your image here "),
    ),
label: 'home',
),