A polished, sensor-ready compass that renders a 0–360° dial with cardinal letters, major/minor tick marks, and a smooth animated needle. The widget is fully themeable (ring, accent, needle, text, ticks, background, gloss) and supports interaction for demos (drag to rotate) or real-time binding to a heading stream. Clear degree labeling and optional North badge make orientation instantly readable across light/dark UIs.
Functionality
-
Heading input (0–360°) with animated needle (
animate
,animationMs
) and optional drag to simulate (enableDrag
). -
Toggleable layers: cardinals, degree label, major/minor ticks, North badge, gloss overlay.
-
Full theming:
backgroundColor
,ringColor
,accentColor
,needleColor
,needleBaseColor
,majorTickColor
,minorTickColor
,textColor
,northColor
. -
Layout control via explicit Width/Height; renders crisp on high-DPI displays.
-
Performance tuned (GPU-friendly) for butter-smooth 60fps animations.
-
Works with device sensors (magnetometer/gyroscope) or any custom bearing source.
Use cases
-
Navigation and outdoor apps (hiking, biking, off-road).
-
Boating/sailing and heading indicators for drones/RC/robotics.
-
AR/map orientation overlays and calibration screens.
-
Education/demos explaining azimuth, bearings, and cardinal directions.
-
Dashboards and 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, Flutter widget, FlutterFlow component, high performance, 60fps, dark mode.
Smooth Compass Widget
- Fixed price & scope
- Pixel-perfect UI/UX
- App Store & Google Play submission
You may only use this template for one project. For more details, please read the Marketplace Terms of Service.