FlutterFlow smooth compass widget — a polished, sensor-ready 🧭 dial that shows 0–360° with bold cardinals (N/E/S/W), major/minor tick marks, and a buttery-smooth animated needle. Fully themeable (ring, accent, needle, text, ticks, background, gloss) and ready for both demo interactions (drag to rotate) and real-time sensor binding. Clear ° labels and an optional North badge 🔴 make orientation snap-readable in light/dark UIs.

Functionality

• 🎯 Heading input (0–360°) with animated needle (animate, animationMs) and optional drag-to-rotate demo (enableDrag).

• 🧩 Toggleable layers: cardinals, degree label, major/minor ticks, North badge, gloss overlay.

• 🎨 Full theming: backgroundColor, ringColor, accentColor, needleColor, needleBaseColor, majorTickColor, minorTickColor, textColor, northColor.

• 📐 Explicit sizing via width/height; razor-sharp on high-DPI screens.

• 🚀 GPU-friendly, 60fps animations.

• 📡 Works with device sensors (magnetometer/gyroscope) or any custom bearing stream.

Use cases

• 🥾 Hiking/off-road & outdoor navigation.

• ⛵️ Boating/sailing and drone/RC/robotics heading indicators.

• 🗺️ AR/map orientation overlays & calibration screens.

• 🧪 Education/demos for azimuth & bearings.

• 📊 Dashboards/instrument panels needing a compact, legible compass.

Keywords: compass, heading, bearing, azimuth, cardinal directions, dial, gauge, animated needle, degree label, tick marks, north badge, theming, gloss, ring color, accent color, magnetometer, gyroscope, orientation, navigation ui, flutterflow widget, flutterflow component, high performance, 60fps, dark mode, flutterflow smooth compass widget.