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

Pixel overflow on big label #211

Open
jaumard opened this issue May 16, 2024 · 1 comment
Open

Pixel overflow on big label #211

jaumard opened this issue May 16, 2024 · 1 comment

Comments

@jaumard
Copy link

jaumard commented May 16, 2024

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
Copy link

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

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

2 participants