如何在 Flutter 应用程序中使用 png 文件作为图标？

Question

为了能够使用我的图标，我将它们上传到fluttericon.com，但它只接受 svg 文件。由于我的图标采用 .png 格式，因此我使用转换器将它们转换为 svg。转换后，我上传了它们，但 fluttericon.com 似乎没有正确识别它们，但我无法在应用程序上看到图标。

我的应用程序中有一个自定义底部导航栏，它只接受 iconData 作为参数。所以我必须使用一个实际的图标。我尝试使用 AppBar 上的自定义图标来了解是否是底部导航栏导致问题，但它是相同的。

我读到一些评论说 svg 的内容很重要。因为当我直接下载 svg 格式的随机图标并上传时，它在fluttericon.com上被正确识别。我需要做什么？

Answer 1

使用icon: Image.asset("assets/home.png")

完整代码示例：

class MyTabBar extends StatefulWidget {
  @override
  _MyTabBarState createState() => _MyTabBarState();
}

class _MyTabBarState extends State<MyTabBar>  with TickerProviderStateMixin {
  int tabIndex=0;



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.white,
        child: tabIndex ==0 ?BottomTabBarHome() 
        :tabIndex == 1? BottomTabBarMail(): BottomTabBarProfile()
      ),

      bottomNavigationBar: BottomNavigationBar(
        items:  <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Image.asset("assets/home.png", color: Colors.grey,),
            activeIcon: Image.asset("assets/home.png", color: Colors.blue,),
            title: Text('')
          ),
           BottomNavigationBarItem(
            icon: Image.asset("assets/mail.png", color: Colors.grey,),
            activeIcon: Image.asset("assets/mail.png", color: Colors.blue,),
            title: Text('')
          ),
           BottomNavigationBarItem(
            icon: Image.asset("assets/account.png", color: Colors.grey,),
            activeIcon: Image.asset("assets/account.png", color: Colors.blue,),
            title: Text('')
          )
        ],
        currentIndex: tabIndex,
        selectedItemColor: Colors.blueAccent,
        onTap: (int index){
          setState(() {
            tabIndex = index;
          });
        },
      ),
    );
  }

}

class BottomTabBarHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(" Home Screen"),
      ),
    );
  }
}
class BottomTabBarMail extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("Mail Screen"),
      ),
    );
  }
}
class BottomTabBarProfile extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(" Profile Screen"),
      ),
    );
  }
}

Answer 2

从我的旧项目中提取了一些代码：

基本思想是icon或activeIcon命名参数请求一个 Widget，包括但不限于一个Iconwidget。

            BottomNavigationBarItem(
              title: Text('REALTIME SCHEDULE'),
              activeIcon: TrackIcon(colorValue: Colors.white70),
              icon: TrackIcon(colorValue: Color(0xff424150)),
            ),

class TrackIcon extends StatelessWidget {
  final Color colorValue;
  TrackIcon({@required this.colorValue});
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 33,
      width: 99,
      child: Image.asset(
        'images/track_icon.png',
        height: 25,
        color: colorValue,
      ),
    );
  }
}