NpsSpeedometer

NpsSpeedometer is a visual and interactive widget designed to display rating scales in the form of a speedometer (from 0 to 10). It is highly customizable and can be easily integrated into flows where quick user feedback is needed, such as NPS (Net Promoter Score) surveys.

---

Main Features

• Smooth rendering using CustomPainter.
• Score scale from 0 to 10.
• Interaction through Tap gestures.
• Optional decorative and informative elements (icons, images, text).
• Customizable colors.

---

Usage

Example

NpsSpeedometer(
  colorSelected: Colors.green,
  onSelected: (int score) {
    print("You selected: $score");
  },
  image: Image.asset('assets/happy.png'),
  iconLabelLeft: (
                  icon: Icons.thumbs_down,
                  label: 'Not likely',
                ),
  iconLabelRight: (
                  icon: Icons.thumbs_up,
                  label: 'Very likely',
                ),
  maxWidth: 300,
)

---

Parameters - NpsSpeedometer

Name	Type	Required	Description
colorSelected	Color	✔️	Background color for the selected segment.
onSelected	void Function(int)	✔️	Callback triggered when a user selects a score.
horizontalPadding	double	❌	Internal horizontal padding (default is 0). Does not apply to widgets passed through children.
image	Widget	❌	Optional image displayed at the center of the speedometer.
iconLabelLeft	({IconData, String})?	❌	Icon and label shown at the beginning of the scale (left side).
iconLabelRight	({IconData, String})?	❌	Icon and label shown at the end of the scale (right side).
maxWidth	double?	❌	Maximum width of the component.
children	List<Widget>?	❌	Additional widgets displayed below the speedometer.

---

Subcomponents

SpeedometerSection (speedometer.dart)

SpeedometerSection is the component responsible for rendering each section of the speedometer. Each section corresponds to a possible score represented as a segmented arc.

Name	Type	Required	Description
sizeReference	double	✔️	Angular size of the arc to be painted.
value	double	✔️	Angular offset that determines the arc’s starting position.
width	double	✔️	Total width of the base square used for painting the arc.
height	double	✔️	Total height of the base square used for painting the arc.
color	Color	✔️	Base background color for each section.
colorSelected	Color	✔️	Color used when a section is selected.
isSelected	bool	❌	Indicates if the section should be rendered as selected.
strokeWidth	double	❌	Stroke width of the arc (UILayout.layout_48 by default).

---

ItemArc (item_arc.dart)

ItemArc is the component responsible for rendering each interactive score section on the speedometer.

Name	Type	Required	Description
angle	double	❌	Rotation angle applied to the element.
left	double?	❌	Relative left position for placing the element along the arc.
bottom	double?	❌	Relative bottom position for placing the element along the arc.
onTap	void Function()?	❌	Callback triggered when the item is tapped.
width	double?	❌	Width of the container.
height	double?	❌	Height of the container.
text	String	❌	Central text, usually the score associated with this item.
isSelected	bool	❌	Whether the item is selected (affects the text style).

---

ItemArcInfo (arc_info.dart)

ItemArcInfo is a utility class used to set the relative position of elements along the arc, which are passed to the ItemArc widget.

Name	Type	Required	Description
angle	double	❌	Rotation angle applied to the item.
left	double?	✔️	Relative left position to place the element on the arc.
bottom	double?	✔️	Relative bottom position to place the element on the arc.
width	double?	✔️	Width of the container.
height	double?	✔️	Height of the container.

---

Considerations

• Ideal for survey forms, user feedback, or quick rating flows.

---

Support

• luisgomez@tyba.com.co
• esteban@tyba.com.co
• nicolaslopez@tyba.com.co

---