custom_timeline_example

A Flutter app to demonstrate the usage of CustomPainter, flutter_boxy, and staggered animations.

Demo

output.mp4

Challenges

• Deciding which way should I use to create the connectors with CustomPainter was crucial. I ended up using a Rect to draw the arcs.
• Gluing the connectors with the card widget was tricky and I decided I should try using boxy since I need to know the size and position of the elements of the layout.
• Animating the connectors was quite tricky because it consisted of two parts (the line and the arc).

Have a suggestion to refactor? create an issue!

References

• CustomPainter vs ClipPath

• CustomPainter explained with examples

• Draw a dashed paths with CustomPainter

• Animating a CustomPainter.

• Staggered (Sequential/overlapping) animations.

For help getting started with Flutter, view the online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.