Is there any way to use color gradient for active item?

Set a different icon for active item. <a href="https://pub.dev/documentation/convex_bo

all i need just like this <a target="_blank" rel="noopener noreferrer nofollow" hr

Using gradient background color for active item about convex_bottom_bar HOT 5 CLOSED

hacktons commented on August 20, 2024

Using gradient background color for active item

from convex_bottom_bar.

Comments (5)

avenwu commented on August 20, 2024 3

As mentioned above, use the TabItem to do the customization. Here is a sample similar to what you need:
Take care of the internal style, you may need to define your own builder if it's not compact with your situation

StyleProvider(
  style: Style(),
  child: ConvexAppBar(
    style: TabStyle.react,
    items: [
      TabItem(icon: Icons.link),
      TabItem(
          icon: Icons.add,
          isIconBlend: false,
          activeIcon: Container(
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [Colors.pink, Colors.blue],
                tileMode: TileMode.repeated,
              ),
              color: Colors.redAccent,
            ),
            child: Icon(Icons.add, color: Colors.white, size: 40),
          )),
      TabItem(icon: Icons.work),
    ],
    color: Colors.black87,
    activeColor: Colors.grey,
    backgroundColor: Colors.white,
  ),
)
class Style extends StyleHook {
  @override
  double get activeIconSize => 60;

  @override
  double get activeIconMargin => 0;

  @override
  double get iconSize => 20;

  @override
  TextStyle textStyle(Color color) {
    return TextStyle(fontSize: 20, color: color);
  }
}