horizontal_compass 1.0.3

A customizable horizontal compass (like Skyrim's top bar navigation?), mostly to be used as a horizontal chart that can be looped infinitely.

Horizontal Compass

At first - it's not a regular compass, but because I wasn't able to think of better name... Well, this plugin creates something like horizontal ruler, but idea behind was to use it as a tool for navigation in the app I had to make.

How does it looks like?

Getting Started

It's a simple widget, so no permissions are required. Just type in the terminal:

flutter pub add horizontal_compass

and enjoy the happiness.

Example

Full example you can see in the Example tab, but that's a shorthand:

HorizontalCompass(
  value: 10,
  segments: {
    'segmentA': 30,
    'segmentB': 50,
    'segmentC': 120,
    'segmentD': 160,
  },
  colors: [
    Colors.blueAccent,
    Colors.deepPurpleAccent,
    Colors.orangeAccent,
    Colors.greenAccent,
  ],
);

Widget requires 3 variables to be set:

• value - which represents current value
• segments - a Map<String, double> which tells widget how large are segments, in a Map, String is for a name for segment, double for its length, so in given example it means: segment a should covers value 0 to 30, segment b values 30 to 80, etc.
• colors - is a List<Color> for created segments, so in given example segment a is blue, segment b purple, etc.

Customization

Widget allows you to customize its look and behavior.

Field	Default value	Description
spacing	15.0	Defines space between the ruler lines.
width	null	Allows to determine widget width, if null it'll cover all possible space.
height	30.0	Widget height.
start	0.0	Initial value.
end	360.0	Last value.
type	HorizontalCompassType.finite	Determines main behavior of the widget. Type finite presents widget from start to the end value, while type infinite makes it loop.
rulerPosition	HorizontalCompassRulerPosition.center	Determines how ruler lines are positioned to each other.
cursorColor	Colors.transparent	Color of the central point of a widget.
cursorWidth	5.0	Width of the central point of a widget.
lineWidth	2.0	Set width for a single line.
markPosition	5	Determines which line should have increased height.
value		required Current value of the widget.
segments		required Map with segments values.
colors		required List of colors to be set for each segment.