convex_bottom_bar
convex_bottom_bar copied to clipboard
ConvexAppBar.badge reactive circle resizes itself when badge isn't empty
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:
With badge content:
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,
),