curved_roadmap 0.1.1
curved_roadmap: ^0.1.1 copied to clipboard
A configurable Flutter widget for curved, winding roadmap and journey paths, with milestone markers, progress fill, gradients and draw-in animation.
0.1.1 #
- Fix broken README images on the API documentation pages. The relative image paths only resolved on the pub.dev package page, which rewrites them against the repository; dartdoc resolved them against the docs URL instead and 404ed. They are absolute URLs now, so they render on GitHub, pub.dev and dartdoc alike. No code changes.
0.1.0 #
Initial release.
CurvedRoadmapwidget for drawing a configurable curved, winding road path.CurvedRoadmapStylecontrols road color/width/gradient, centerline (solid/dashed/none), curve count and amplitude, orientation and direction.- Road placement and length:
alongStart/alongEndposition the road anywhere along its box at any length,crossExtentfixes its width, andcurveCountchanges only how tight the turns are — never how much space the road occupies. - Full manual shape control:
WaypointCurveStyleplaces every turn individually (position, swing, smooth or sharp), andCustomCurveStylehands over rawPathconstruction. - Preset shapes: S-curve (default), serpentine, zigzag, sine, straight.
SerpentineCurveStylelays out the classic printed-roadmap infographic — straight runs joined by U-turns, one row of milestones per run — with the turns flattening to ellipses rather than swallowing the runs on a narrow box. CurvedRoadmapStyle.borderColor/borderWidthdraw a casing under the road.- Node placement:
RoadmapMarker.side(on/left/right/alternating) andsideOffsetput content clear of the road. Sides are computed from the road's tangent, so they follow the tarmac rather than the screen, and the clearance is measured from the road's edge.RoadPath.tangentAtexposes the same direction information for custom placement. RoadmapMarker.milestone(ringed circle with a caption beneath) andRoadmapMarker.pin(teardrop pin standing on its tip), plusRoadmapMarker.anchorto choose which point of any marker sits on the road.- Markers: any widget along the path, plus a
RoadmapMarker.cardfactory for title/notes/image content. Markers support tap callbacks, pixeloffset, and are kept inside the widget's bounds by default. - Progress fill (completed vs. remaining), path draw-in animation, and gradient strokes (which compose with progress fill).
- Scrollable roadmaps longer than one screen via
RoadmapSizing.fixedSegmentExtent. - Theming through
ThemeExtension<CurvedRoadmapStyle>— paint only, so a theme never carries layout or progress state. - Accessibility: markers take a
semanticLabeland are exposed as buttons when tappable;RoadmapMarker.cardlabels itself from its content. - Performance: the road path and its metrics are built once per (size, geometry) and shared by the painter and marker positioning, and dashed centerlines are memoized — an animating road does not rebuild geometry per frame.
- Golden tests cover the default road, curve variants, progress, gradients,
waypoints, extent, and marker bounds. They are tagged
golden, so CI on a non-reference platform can runflutter test --exclude-tags golden. SineCurveStyleinterpolates the true sine at four points per quarter-wave, keeping it within a pixel of an exact wave instead of visibly undershooting the peaks.- Analysis enforces
public_member_api_docs, so the whole public API is documented.
