I’m trying to build a custom expandable list item that matches a specific UI design from my mockup. The design shows two states - collapsed and expanded connectors.
What I need:
Left side shows the collapsed state (normal connector)
Right side shows the expanded state (active connector with additional details)
Both connectors should display different visual states
What I’ve tried:
I attempted using the ExpansionTile widget but couldn’t achieve the exact styling and layout shown in my design mockup.
My question:
What’s the best approach to create this expandable connector UI in Flutter? Should I use a different widget or build a custom solution?
Any suggestions for widgets or techniques that would work better than ExpansionTile for this specific design pattern?
Standard ExpansionTile won’t cut it for custom expandable connectors like this. I’ve built similar stuff before - you need a custom StatefulWidget for proper control over the visual states. Use AnimatedContainer or AnimatedCrossFade for smooth transitions between collapsed/expanded states. For styling, wrap your content in a Container with custom border decorations and structure everything with Column widgets. The trick is managing expansion state with a boolean and calling setState when users tap the connector. I’d build separate widgets for collapsed and expanded versions, then conditionally render them based on your state variable. This gives you full control over styling and animation timing, which you’ll need since most mockups don’t follow Material Design patterns anyway.
I hit this same problem building a timeline interface. Skip the built-in components and create a custom widget that handles expansion yourself. Wrap your item in a GestureDetector for tap events, then use AnimatedSize for smooth height transitions. For the connectors, make two separate Container widgets with different decorations - one collapsed, one expanded. Use Stack if you need overlays. AnimationController works great for fine-tuning timing curves. I ended up using CustomPainter for complex connector shapes that basic Container styling couldn’t handle. This gives you full design control and keeps performance solid during state changes.