A premium segmented toggle/tab bar that emphasizes state with a dashed, animated outline (the classic marching-ants effect). Each segment is a soft-rounded pill that can be filled, ghost, or outlined. On selection the capsule lifts, the dash pattern animates around the boundary, and the label/icon gains contrast. Built for real products: gesture-driven transitions, haptics, accessibility, and full theming.
Functionality
-
Animated dashed stroke around the active segment (speed, dash length, gap, direction).
-
Variants: Filled / Ghost / Outline, with optional icon-only or icon+label.
-
Spring-based selection transitions (tap & swipe-linked), ripple/hover/pressed states, haptic feedback.
-
State machine: idle, focus, hover, pressed, selected, disabled with distinct tokens.
-
Badges/counters and tooltips; long-label ellipsis; equal/intrinsic widths; scrollable rails.
-
Form bindings and validation (
initialValue
,onChanged
,errorText
), reselect callback. -
Theming tokens: radius, elevation/shadows, border width, palette for stroke/fill/text, background blur/gradient.
-
Accessibility: ARIA radiogroup semantics, keyboard navigation (β/β, Space/Enter), screen-reader labels, RTL & Reduce-Motion support.
-
High-performance rendering with layer caching; safe-area aware; dark/light modes.
Use cases
-
Highlighted binary or N-way choices in onboarding and profile forms.
-
Quick filters/modes (e.g., List/Grid, Monthly/Yearly, Delivery/Pickup).
-
Paywall and pricing toggles that need an eye-catching active state.
-
Feature flags or app modes where the selection should remain visually prominent.
-
Dashboards and analytics segments that combine icons + labels + counts.
Keywords
segmented control, segmented button, capsule tabs, dashed outline, marching ants, animated border, ghost button, outline pill, icon with label, badges, haptic feedback, spring animation, hover/pressed, keyboard navigation, ARIA radiogroup, accessibility, RTL, reduce motion, theming tokens, dark mode, scrollable tabs, form field, validation, Flutter widget, FlutterFlow component, premium UI, high performance.
Awesome TabBar Widget V5
- Fixed price & scope
- Pixel-perfect UI/UX
- App Store & Google Play submission
You may only use this template for one project. For more details, please read the Marketplace Terms of Service.