I’m trying to recreate a specific UI design in my Flutter app. The design shows expandable connectors that change appearance when tapped.
What I need:
- Connector items that can be collapsed or expanded
- Different visual states for inactive and active connectors
- The expanded state should reveal additional connector options
What I’ve tried:
I attempted using the ExpansionTile widget but couldn’t match the exact visual design requirements.
Current challenge:
The main issue is getting the styling and layout to match the mockup exactly. The default ExpansionTile styling doesn’t provide the flexibility I need for this particular connector interface.
Has anyone successfully implemented similar expandable UI components? What approach would work best for creating custom expandable tiles with specific styling requirements?
Had the same issue last year. I ditched ExpansionTile completely and built my own solution. Used AnimatedContainer with GestureDetector for tap handling and state changes. Made a custom StatefulWidget to manage expanded/collapsed states internally, then added AnimatedSize for smooth transitions. For styling, Container with custom BoxDecoration gave me way more control over borders, shadows, and colors than the built-in widgets. The real trick was implementing my own animation controller to get the expand/collapse transitions exactly right for the design. More work upfront, but I got complete control over how the connector interface looked and behaved.
use column with animatedcrossfade instead. wrap each connector in a container and let animatedcrossfade handle the collapsed/expanded switching. way easier than fighting with expansion tiles, plus u get complete control over how it looks. just track a boolean for each connector’s state.