unable to use ImageIcon to display image as icon flutter

Question

I have been trying out a bottom navigation bar which has a line indicator and am using this package https://pub.dev/packages/custom_line_indicator_bottom_navbar

I am able to see icons if I use the predefined icons. But when I tried making my own image icon, it gives me the error

The argument type 'ImageIcon' can't be assigned to the parameter type 'IconData'.

Below is the code I am using to call ImageIcon:

 CustomBottomBarItems(
            label: 'Account',
            icon: ImageIcon(
              AssetImage("images/home.png"),
              color: Color(0xFF3A5A98),
            ),
            
          ),

when the code is written like this, it shows no error:

  CustomBottomBarItems(
              label: 'Leaves', icon: Icons.calendar_today_outlined),

Can someone please help me resolve this issue? Thank you

Answer 1

You may use BottomNavigationBar():

BottomNavigationBar(
      items: [
        BottomNavigationBarItem(
          icon: Image.asset(
            "assets/icons/icon",
            height: 24.w,
            width: 24.w,
          ),
          label: 'label',
        ),
      ],
    );

Answer 2

CustomBottomBarItems's icon only take IconData. You can't pass widget here.

 CustomBottomBarItems(
        label: 'Account',
        icon: Icons.ac_unit,
      )

Or switch to different widget/package like BottomNavigationBar , google_nav_bar.

---

Follow this snippet, replace icon with the widget

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'Index 0: Home',
      style: optionStyle,
    ),
    Text(
      'Index 1: Business',
      style: optionStyle,
    ),
    Text(
      'Index 2: School',
      style: optionStyle,
    ),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Row(
            children: List.generate(
                3,
                (index) => Expanded(
                      child: Transform(
                        transform: Matrix4.translationValues(0, 5, 0),
                        child: Divider(
                          endIndent: 4,
                          indent: 4,
                          color: _selectedIndex == index
                              ? Colors.red
                              : Colors.transparent,
                        ),
                      ),
                    )),
          ),
          BottomNavigationBar(
            showSelectedLabels: true,
            items: <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                icon: Icon(Icons.school),
                label: 'Home',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.business),
                label: 'Business',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.school),
                label: 'School',
              ),
            ],
            currentIndex: _selectedIndex,
            selectedItemColor: Colors.amber[800],
            onTap: _onItemTapped,
          ),
        ],
      ),
    );
  }
}