hacktons / convex_bottom_bar

A Flutter package which implements a ConvexAppBar to show a convex tab in the bottom bar. Theming supported.
https://bar.hacktons.cn
Apache License 2.0
801 stars 150 forks source link

ConvexAppBar.badge reactive circle resizes itself when badge isn't empty #208

Open mmotkim opened 10 months ago

mmotkim commented 10 months ago

Describe the bug

Using ConvexAppBar.badge with tabStyle: TabStyle.reactCircle, when I add any badge content the react circle seems to shrink itself down.

Environment details

Paste the flutter environment detail.

[✓] Flutter (Channel stable, 3.13.9, on macOS 14.1 23B74 darwin-arm64, locale en-VN)
[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
[✓] Xcode - develop for iOS and macOS (Xcode 15.0.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.3)
[✓] VS Code (version 1.84.2)
[✓] Connected device (3 available)
[✓] Network resources

I'm using my forked package from 3.1.0+1 of which I added optional circleShadow as you can see in the screenshots attached.
I believe It shouldn't affect the circle size

dependencies:
  convex_bottom_bar:
    git:
      url: https://github.com/mmotkim/convex_bottom_bar_forked.git
      ref: master

Screenshots Without badge content: image

With badge content: image

Additional context My ConvexAppBar code:

ConvexAppBar.badge(
        {
          3: state.selectedIndex.value !=
                  3 // hide badge if notification tab isnt selected
              ? state.unreadNotificationCount.value != 0
                  ? '${state.unreadNotificationCount.value}'
                  : ''
              : ''
        },
        key: state.appBarKey,
        backgroundColor: appTheme.backgroundColor,
        height: AppDimens.appBarHeight,
        activeColor: appTheme.secondaryColor,
        color: appTheme.secondaryVariantColor,
        elevation: 0,
        top: -28,
        style: TabStyle.reactCircle,
        badgeMargin:
            const EdgeInsets.only(bottom: 30, left: 40, top: 0, right: 0),
        badgePadding: const EdgeInsets.fromLTRB(4, 0, 4, 1),
        items: tabs
            .map(
              (e) => e.tab(
                color: appTheme.secondaryVariantColor,
              ),
            )
            .toList(),
        onTap: (index) {
          logic.switchTap(index);
        },
        circleShadow: appTheme.appBarCircleShasdow,
      ),