Windrose compass

A simple windrose compass widget for Flutter.

Shows a compass rose with 8 cardinal directions (N, NE, E, SE, S, SW, W, NW). Tap near the border to select a direction; an arrow indicates the selection.

Includes a compassToHexDir utility for mapping compass indices (0-7) to hex grid direction indices (0-5).

Usage

WindRose(
  directionDegrees: 0,           // 0-360, 0=N
  onChanged: (degrees) { /* snapped degrees 0-360 */ },
  size: 100,
  snapTo: 45,                    // 0=no snap, 45=8-dir, 30=12-dir, 5=72-dir
  showDegrees: false,            // true="045°", false="NE"
  showArrow: true,               // show/hide direction arrow
)

Assets

  • assets/windrose.vec — compass rose background
  • assets/arrow.vec — direction indicator arrow

Recompiling SVGs to .vec

Edit the .svg source files in assets/, then recompile:

vector_graphics_compiler -i assets/windrose.svg -o assets/windrose.vec
vector_graphics_compiler -i assets/arrow.svg -o assets/arrow.vec

The vector_graphics_compiler tool is provided by the vector_graphics_compiler package:

dart pub global activate vector_graphics_compiler

Dependencies

  • flutter
  • vector_graphics

Libraries

main
windrose_compass