Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
mmotkim opened this issue Dec 13, 2023 · 0 comments
Open

Comments

@mmotkim
Copy link

mmotkim commented Dec 13, 2023

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,
      ),
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant