A precise ruler-style value picker with a centered indicator, dense major/minor tick marks, and a large live numeric readout with units (e.g., kg). Smooth inertial scrolling and step snapping make it ideal for inputs that need accuracy without a full keyboard.
Functionality
-
Scrollable ruler track with major (numbered) and minor ticks.
-
Center indicator line: align ticks under the marker to select the value.
-
Large live value with unit label (kg, cm, %, etc.), configurable precision.
-
Step size & snapping (e.g., 0.1 / 0.5 / 1.0) for consistent increments.
-
Min/Max bounds with soft limits and clamped selection.
-
Inertial scrolling with gentle deceleration for natural feel.
-
Tap/drag gestures and keyboard support (optional) for fine tuning.
-
Haptics/ripple feedback on step changes (optional).
-
Theming: accent color, tick density/length, typography, indicator style.
-
RTL & localization: reversible direction, localized number format.
-
Accessibility: high-contrast ticks, readable type, semantic value announcements.
-
Data-ready: bind to Firestore/Supabase/REST/local state;
onChange
/onEnd
. -
Light/Dark support with subtle shadows for depth.
-
Use cases: weight/height, dosage, budgets, percentages, scores, timers.
Great for: health forms, fitness apps, calculators, booking limits, and any UI that needs a precise yet touch-friendly numeric input.
Keywords: FlutterFlow ruler picker, scale slider, tick marks, major minor ticks, numeric input, precision picker, step snapping, inertial scroll, centered indicator, live value, unit label, kilograms, centimeters, percentage, dosage, budget slider, measurement picker, localized numbers, RTL support, accessible control, high contrast, themable UI, haptic feedback, onChange callback, onEnd callback, min max bounds, value precision, Flutter widget, FlutterFlow component, mobile form input, calculator control, modern UX, lightweight component.
Ruler Scale Picker 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.