Style hook not work with the react and reactCircle style.

[SittiphanSittisak]

I test on flutter web. The iconSize and activeIconMargin don't work with the react and reactCircle style. When I use your StyleHook with the react and reactCircle style, the console will show A RenderFlex overflowed by 2.0 pixels on the bottom.

flutter web:

your style hook from pub.dev:

minimal code:

bottomNavigationBar: StyleProvider(
          style: ConvexAppBarStyle(),
          child: ConvexAppBar(
            style: TabStyle.react,
            items: tabItem,
          ),
        ),

You can try this style to see the bug:

class ConvexAppBarStyle extends StyleHook {
  @override
  double get activeIconSize => 20;

  @override
  double get activeIconMargin => 1;

  @override
  double get iconSize => 1;

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

flutter doctor:

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.0.2, on Microsoft Windows [Version 10.0.19044.1706], locale th-TH)
[√] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
[√] Chrome - develop for the web
[√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.1.5)
[√] Android Studio (version 2021.2)
[√] VS Code (version 1.68.0)
[√] Connected device (3 available)
[√] HTTP Host Availability

• No issues found!

I think it's a bug. It only happens when using the react and reactCircle style.

• activeIconMargin
• iconSize
• height overflow