Как использовать файлы PNG в качестве значков в приложении Flutter?

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

вытащил некоторый код из моего старого проекта:

basi c Идея состоит в том, что именованный параметр icon или activeIcon запрашивает виджет, включает, но не ограничивается виджетом Icon.

            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,
      ),
    );
  }
}