Skip to content

Conversation

@ItzSouraseez
Copy link

PR Description

This PR implements a responsive tab bar solution to fix text truncation issues on small screen devices. Previously, tab labels (Request, Response, Code, Dashboard) were being cut off on devices with limited screen width, displaying only partial text such as "Reque", "Respo", and "DashB".

Changes Implemented

1. Enhanced TabLabel Widget

  • Wrapped text with FittedBox to enable automatic text scaling based on available space
  • Changed overflow behavior from TextOverflow.fade to TextOverflow.ellipsis for improved readability
  • Added horizontal padding for better text spacing and visual balance
    2. Responsive SegmentedTabbar Layout
  • Implemented LayoutBuilder to dynamically calculate available screen width
  • Added intelligent horizontal scrolling that only activates when tab content exceeds screen width
  • Maintained fixed-width behavior on larger screens to preserve existing desktop experience
  • Used BouncingScrollPhysics for smooth, native-feeling scroll behavior on mobile
    3. Added Configuration Constant
  • Introduced kSegmentedTabMinWidth constant to provide flexibility for future tab sizing adjustments

Technical Approach

The solution uses a multi-layered responsive strategy:

  • On large screens (desktop), tabs display with full 140px width per tab as before
  • On medium screens (tablet), FittedBox scales text down proportionally to fit available space
  • On small screens (mobile), horizontal scrolling is enabled if tabs cannot fit even with scaled text
  • Layout calculations occur in real-time using LayoutBuilder constraints

Testing

  • Verified hot reload functionality (225 libraries reloaded successfully)
  • Ran widget test suite: 148 tests passed
  • Confirmed no regression in existing tab bar functionality
  • Tested responsiveness by resizing application window from 1200px to 320px width

Related Issues

Checklist

  • I have gone through the contributing guide
  • I have updated my branch and synced it with project main branch before making this PR
  • I am using the latest Flutter stable branch (run flutter upgrade and verify)
  • I have run the tests (flutter test) and all tests are passing

Added/updated tests?

  • Yes
  • No, and this is why: The changes modify UI layout behavior that adapts to screen constraints. Existing widget tests continue to pass, validating that the changes do not break current functionality. The responsive behavior requires visual verification across multiple device sizes, which is better suited to manual testing and integration testing rather than unit tests. Future work could include widget tests that verify LayoutBuilder constraints and SingleChildScrollView behavior at specific screen widths.

OS on which you have developed and tested the feature?

  • Windows
  • macOS
  • Linux

- Updated TabLabel widget with FittedBox for automatic text scaling
- Changed text overflow from fade to ellipsis for better readability
- Implemented responsive layout in SegmentedTabbar using LayoutBuilder
- Added horizontal scroll capability for small screens
- Maintains fixed width behavior on larger screens
- Added kSegmentedTabMinWidth constant for future flexibility

Fixes tab labels being truncated (Request → Reque, Response → Respo, Dashboard → DashB) on small screen devices and resized windows.
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

Successfully merging this pull request may close these issues.

Tab bar text gets truncated on small screen sizes

1 participant