curved_roadmap 0.1.1 copy "curved_roadmap: ^0.1.1" to clipboard
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.

  • CurvedRoadmap widget for drawing a configurable curved, winding road path.
  • CurvedRoadmapStyle controls road color/width/gradient, centerline (solid/dashed/none), curve count and amplitude, orientation and direction.
  • Road placement and length: alongStart/alongEnd position the road anywhere along its box at any length, crossExtent fixes its width, and curveCount changes only how tight the turns are — never how much space the road occupies.
  • Full manual shape control: WaypointCurveStyle places every turn individually (position, swing, smooth or sharp), and CustomCurveStyle hands over raw Path construction.
  • Preset shapes: S-curve (default), serpentine, zigzag, sine, straight. SerpentineCurveStyle lays 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/borderWidth draw a casing under the road.
  • Node placement: RoadmapMarker.side (on/left/right/alternating) and sideOffset put 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.tangentAt exposes the same direction information for custom placement.
  • RoadmapMarker.milestone (ringed circle with a caption beneath) and RoadmapMarker.pin (teardrop pin standing on its tip), plus RoadmapMarker.anchor to choose which point of any marker sits on the road.
  • Markers: any widget along the path, plus a RoadmapMarker.card factory for title/notes/image content. Markers support tap callbacks, pixel offset, 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 semanticLabel and are exposed as buttons when tappable; RoadmapMarker.card labels 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 run flutter test --exclude-tags golden.
  • SineCurveStyle interpolates 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.
4
likes
160
points
125
downloads
screenshot

Documentation

API reference

Publisher

verified publisherjoynul.com

Weekly Downloads

A configurable Flutter widget for curved, winding roadmap and journey paths, with milestone markers, progress fill, gradients and draw-in animation.

Repository (GitHub)
View/report issues

Topics

#roadmap #path #progress #animation #widget

License

MIT (license)

Dependencies

flutter

More

Packages that depend on curved_roadmap