Flutter icons are not showing correctly on bottombar

Question

I need to show custom image as icon on bottomnavigationbar. So i have created a class like this

class BottomBar extends StatefulWidget {
  Function onPressed;
  bool bottomIcons;
  String text;
  ImageIcon icons;
  ImageIcon icons2;

  BottomBar(
      {@required this.onPressed,
      @required this.bottomIcons,
      @required this.icons,
      @required this.icons2,
      @required this.text});
  @override
  _BottomBarState createState() => _BottomBarState();
}

class _BottomBarState extends State<BottomBar> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: widget.onPressed,
        child: widget.bottomIcons == true
            ? Container(
                decoration: BoxDecoration(
                  color: Color.fromRGBO(249, 68, 75, 0.08),
                  borderRadius: BorderRadius.circular(30),
                ),
                padding:
                    EdgeInsets.only(left: 16, right: 16, top: 8, bottom: 8),
                child: Row(
                  children: <Widget>[
                    widget.icons2,
                    SizedBox(
                      width: 8,
                    ),
                    Text(
                      widget.text,
                      style: TextStyle(
                          color: Color(0xfff9444b),
                          fontWeight: FontWeight.bold,
                          fontSize: 15),
                    ),
                  ],
                ),
              )
            : widget.icons);
  }
}

And calling like this

                    BottomBar(
                      onPressed: () {
                        setState(() {
                          bottomIcons = BottomIcons.Home;
                          home = true;
                          service = false;
                          shop = false;
                        });
                      },
                      bottomIcons:
                          bottomIcons == BottomIcons.Home ? true : false,
                      icons: ImageIcon(AssetImage('images/ichomeactive.png')),
                      icons2: ImageIcon(AssetImage('images/ichome.png')),
                      text: "Home"),

Its working fine but its not showing the correct icon as i am showing.

Its showing like this

As you can see its showing home icon and its showing black home icons when its active. But issue is i don't have this black home icon i have this icon

But when i am calling this pink icon in bottombar but its showing black don't know how its possible.

Answer 1

Its probably because your app is using the default ThemeData, you can just add a color property to your ImageIcon or change the IconThemeData in the ThemeData of your app.

ImageIcon(
    AssetImage('images/icstoreactive.png'),
    color: Colors.pink,
  )

Answer 2

I Pass it as Image, not as ImageIcon then it will work fine

Like this

  icons:  Image(image: AssetImage('images/icstoreactive.png')),
  icons2: Image(image: AssetImage('images/icstore.png')),

Also dont forget to change on BottomBar Class

  Image  icons;
  Image  icons2;