🧩 Tabs Widget
A customizable tab bar widget that displays a horizontal list of text-based tabs with an optional search icon. It supports dynamic styling based on the presence of a background color and selection states. The widget is designed to provide a consistent navigation experience across the app.
The Tabs widget is ideal for creating navigation bars with selectable tabs and an optional search action.
🧱 Parameters:​
[labels] – List of strings representing the text for each tab (required). Maximum of 11 tabs allowed.
[showSearchIcon] – Whether to display a search icon button before the tabs (required).
[background] – Optional background color for the tab bar container. If provided, affects padding and button configuration (optional).
🎨 Supported Configurations
Background Styling:​
With background (background is set): Tabs have no additional padding between them, and unselected tabs use ButtonConfiguration.naked.
Without background (background is null): Tabs have horizontal padding, and unselected tabs use ButtonConfiguration.filled.
Button Configuration:
Selected tab: Uses ButtonConfiguration.outlined with black text color.
Unselected tabs: Use ButtonConfiguration.naked (with background) or ButtonConfiguration.filled (without background) with blue text color.
Search Icon: Displayed as an IconButton with Icons.search when showSearchIcon is true.
🎯 Behavior and States
Selection: Only one tab can be selected at a time, tracked by selectedIndex. Clicking a tab updates the selected tab, and clicking the search icon deselects all tabs (selectedIndex = -1).
Button Styling: Each tab is a Button widget with ButtonSize.medium and ButtonPriority.primary. Styling adapts based on selection and background.
Height: Fixed at 56 pixels for consistent appearance.
Responsive Notes: Currently, tab width is fixed at 100 pixels. Future improvements will adapt width to breakpoints (see Notes).
🎯 Usage Example:
Tabs( labels: ["Home", "Profile", "Settings"], showSearchIcon: true, background: Colors.grey[200], )
Tabs( labels: ["Tab 1", "Tab 2"], showSearchIcon: false, )
📌 Notes:
Constraints: Maximum of 11 text tabs allowed (plus one search icon if enabled).
Selection Styling: Selected tabs use ButtonConfiguration.outlined and black text, while unselected tabs adapt based on the background parameter.
Future Improvements:
Add support for button states (enabled, pressed, hovered) when selected.
Implement responsive width adjustments based on breakpoints.
Add transition animations for tab selection.
Enhance background and text color logic for better contrast (e.g., selected tab text color matching background color).
Dependencies: Relies on the Button widget from package:hudi/turtleneck/atoms/buttons/button.dart.
Known Limitations:
Fixed tab width (100 pixels) may not be ideal for all screen sizes.
No animation for tab transitions.
Responsive design is pending integration with the Mix framework.