如何在Flutter的BottomNavigationBar中显示图像？

Question

我需要在导航栏中显示图像，如下所示：

但是我不能，因为NavigationBarItem类需要一个图标，所以当我使用ImageIcon小部件时，我会失去颜色。图片中有多种颜色。

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

当我使用

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

NavigationBarItem的image属性需要一个Widget，而不是一个Icon，因此我可以使用它。 BottomNavigationBarItem(icon: Image.asset('images/symbol.png')),

Answer 3

如@ asbah-riyas所述，可以通过为ImageIcon的{​​{1}}参数提供icon小部件来完成此操作。尽管您不需要在其中指定BottomNavigationBarItem

您可以在codepen here.

中进行检查或使用它

Answer 4

正确答案是BottomNavigationBarItem（icon：Image.asset（'images / symbol.png'）），

假设您将png图像放置在images文件夹中，并且与pubspeq.yaml中的images / image.png相同，并且位于资产下