Add custom icon

Question

Hi i am using the library : convex_bottom_bar to create my bottom bar

    StyleProvider(
  style: Style(),
  child: ConvexAppBar(
    initialActiveIndex: 1,
    height: 50,
    top: -30,
    curveSize: 100,
    style: TabStyle.fixedCircle,
    items: [
      TabItem(icon: Icons.link),
      TabItem(icon: Icons.import_contacts),
      TabItem(title: "2020", icon: Icons.work),
    ],
    backgroundColor: _tabBackgroundColor,
  ),
)

However, i want to change the icon and add my custom icon, i try this but it doesn' t work:

icon: index==1?new Image.asset('images/1.0x/icon2.png'):new Image.asset('images/1.0x/newIcon.png'),

Any idea how to do it ?

Thanks

Just out of curiosity. Did my answer help you? – LOLWTFasdasd asdad Feb 23 '21 at 11:33 — LOLWTFasdasd asdad, Feb 23 '21 at 11:33

score 0 · Answer 1 · answered Jan 22 '21 at 09:37

You have two options here you could either use some kind of font file for your icons which might in general be the better way because of various reasons such as app size and image scaling issues or you could use image files such as .png or .svg. You should have that in mind.

Looking at your code snippet it looks like you want to use image files. In convex-bottom-bar tab items are generic type since version 1.3.1 so both IconData and Widget can be used (see 1.3.1).

That means something like the following is possible:

TabItem(
        icon: Container(
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: Color(0xFFFF5722),
      ),
      child: Icon(Icons.add, color: Colors.white, size: 40),
    )),

See this example example for more information.

So just replace the IconData with your Image widget and it should work.

Add custom icon

1 Answers1