WindRose Compass

A Flutter wind rose compass widget. Shows a compass rose with 16 cardinal directions (N, NNE, NE, etc.) and an interactive directional arrow.

Features

• SVG-based compass rose background with 16-point labels
• Interactive arrow: tap to set direction, drag to rotate continuously
• snapTo: snap to increments (45° = cardinal, 22.5° = half-wind, etc.)
• showDegrees: toggle between numeric degrees and compass labels
• showArrow: hide the arrow to use as a static compass
• size: adjustable widget size (60–200px recommended)
• directionDegrees: controlled or uncontrolled mode
• onChanged: callback when the user selects a direction

Run the showcase

cd example && flutter run

Usage

import 'package:windrose_compass/windrose_compass.dart';

WindRose(
  directionDegrees: _direction,
  onChanged: (degrees) => setState(() => _direction = degrees),
  size: 120,
  snapTo: 45,
  showDegrees: true,
  showArrow: true,
)

Direction mapping

Compass labels follow standard 16-point notation:

• N (0°), NNE (22.5°), NE (45°), ENE (67.5°)
• E (90°), ESE (112.5°), SE (135°), SSE (157.5°)
• S (180°), SSW (202.5°), SW (225°), WSW (247.5°)
• W (270°), WNW (292.5°), NW (315°), NNW (337.5°)

Hex grid integration

Use compassToHexDir(compassIndex) to map compass directions to hex grid directions (0-5). The 8-point compass maps to 6 axial hex directions: