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
785 stars 148 forks source link

Pixel overflow on big label #211

Open jaumard opened 3 months ago

jaumard commented 3 months ago

Describe the bug

Pixel overflow on TabItem when label is long. Capture d’écran 2024-05-16 à 12 44 58

Environment details

Paste the flutter environment detail.

flutter doctor
flutter --version

Paste the package version.

dependencies:
  convex_bottom_bar: ^3.2.0

To Reproduce

Put long label in TabItem.

ConvexAppBar(
              color: AppColors.solidBlack,style:TabStyle.react ,
              activeColor: AppColors.solidBlack,
              backgroundColor: AppColors.solidYellowBrand,
              items: [
                TabItem(icon: Icons.home, title: context.l10n.main_mainPage_mapTab),
                TabItem(icon: Icons.map, title: context.l10n.main_mainPage_benefitsTab),
                TabItem(icon: Icons.add, title: context.l10n.main_mainPage_assistanceTab),
                TabItem(icon: Icons.message, title: context.l10n.main_mainPage_eventsTab),
                TabItem(icon: Icons.people, title: context.l10n.main_mainPage_accountTab),
              ],
              onTap: (int i) => print('click index=$i'),
            ),

Expected behavior

Should either have a way to enable ellipsis, or should change the bar height to not have overflow.

raghavguptaeng commented 1 month ago

If you have a big label, you can very simply add height parameter onto ConvexAppBar. This will automatically wrap the text and would not show overflow error. Refer to following snippet

ConvexAppBar(
        style: TabStyle.react,
        height: 100,
        items: [
          TabItem(icon: Icons.list,title: "RaghavGupta"),
          TabItem(icon: Icons.calendar_today),
          TabItem(icon: Icons.assessment),
          TabItem(icon: Icons.list,title: "RaghavGupta"),
          TabItem(icon: Icons.calendar_today),
          TabItem(icon: Icons.assessment),
        ],
        initialActiveIndex: 1,
        onTap: (int i) => print('click index=$i'),
      ),

You can see there that height 100 was added to prevent overflowing. You may have to tune it so that it serves all the text sizes