A polished expandable-text component that keeps long copy compact and reveals content with a centered chevron control. V3 uses a soft gradient fade at the bottom of the clamped block and an animated chevron that rotates on expand/collapse, preserving scroll position and visual rhythm across lists and cards.
Functionality
-
Configurable line clamp with ellipsis and optional fade overlay (height, opacity, curve).
-
Center chevron toggle (down/up) with rotation + scale animation; supports custom icons/widgets.
-
Smooth height reflow with scroll-position retention to avoid layout jumps.
-
Controlled/uncontrolled modes with
isExpanded
,onExpand
,onCollapse
, andonToggle
. -
Rich content support (plain/RichText/Markdown), link handling, and nested inline widgets.
-
Accessibility ready: semantic expander, focus ring, keyboard navigation, full i18n for hints.
-
Theming tokens for typography, paddings, radius, shadows, icon size/color, light/dark.
-
State persistence per item (keyed) for long, virtualized lists.
Use cases
-
Blog/news teasers and product descriptions that shouldn’t overwhelm layouts.
-
Reviews, FAQs, and release notes with optional compact-by-default behavior.
-
Legal/help sections where a summary expands to full details on demand.
-
Card-heavy dashboards and mobile feeds that require strict vertical economy.
Keywords
read more, expandable text, collapsible, line clamp, ellipsis, fade overlay, center chevron, rotating arrow, animated expand, scroll retention, accessibility, localization, theming, Markdown, list virtualization, Flutter widget, FlutterFlow component, mobile UI.