fancy_indicator 0.1.4

The FancyIndicator is a customizable Flutter widget that serves as a visual indicator with gradient colors, labels, and dynamic animations.

fancy_indicator

FancyIndicator Widget

The FancyIndicator is a customizable Flutter widget that serves as a visual indicator with gradient colors, labels, and dynamic animations. It's ideal for creating interactive indicators that users can manipulate by tapping or dragging, providing an intuitive interface for selecting values.

Showcase

Usage example

To use the FancyIndicator widget in your Flutter project, add the following dependency to your pubspec.yaml:

dependencies:
  fancy_indicator: ^1.0.0

Then, import the package and use the widget as shown below:

import 'package:fancy_indicator/fancy_indicator.dart';

class ExampleWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: FancyIndicator(
          gradientColors: [Colors.blue, Colors.red],
          gradientColorsStops: [0.0, 1.0],
          width: 300,
          height: 100,
          onSelectedNumber: (selectedNumber) {
          },
          
          marker: [10, 20, 30],
          labelTextColor: Colors.white,
          selectedTextColor: Colors.green,
          measureItemColor: Colors.yellow,
          backgroundColor: Colors.black,
          draggableButtonColor: Colors.white,
          draggableButtonCircleColor: Colors.grey,
          draggableButtonIconsColor: Colors.red,
          draggableButtonCircleAnimateColor: Colors.blue,
          labelTextSize: 18,
          selectedTextSize: 24,
        ),
      ),
    );
  }
}

FancyIndicator properties

FancyIndicator Properties

The FancyIndicator widget exposes several customizable properties, allowing you to tailor the appearance and behavior to fit your needs:

Required Parameters:

• gradientColors (List
• gradientColorsStops (List
• width (double): The width of the indicator widget.
• height (double): The height of the indicator widget.
• onSelectedNumber (Function(int)): Callback function triggered when a number is selected via tapping or dragging.

Optional Parameters:

• marker (List
• labelTextColor (Color): The color of the labels displayed on the indicator. Default is FancyIndicatorUtils.whiteColor.
• selectedTextColor (Color): The color of the selected label text. Default is FancyIndicatorUtils.blueColor.
• measureItemColor (Color): The color of the measurement items. Default is FancyIndicatorUtils.yellowColor.
• backgroundColor (Color): The background color of the indicator widget. Default is FancyIndicatorUtils.primaryColor.
• numberAppendix (String): A string appended to the selected number, e.g., %. Default is "%".
• draggableButtonColor (Color): The color of the draggable button. Default is FancyIndicatorUtils.whiteColor.
• draggableButtonIconsColor (Color): The color of the icons on the draggable button. Default is FancyIndicatorUtils.triangleColor.
• draggableButtonCircleColor (Color): The color of the circle around the draggable button. Default is FancyIndicatorUtils.greyDarkerColor.
• draggableButtonCircleAnimateColor (Color): The animated color of the draggable button circle. Default is FancyIndicatorUtils.greyColor.
• labelTextSize (double): The size of the label text. Default is 20.0.
• selectedTextSize (double): The size of the selected label text. Default is 30.0.

How it Works

Interactions

The FancyIndicator widget supports the following interactions:

• Tapping: Select a value by tapping on the indicator.
• Dragging: Drag the draggable button to select a value.
• Animations: Smooth animations are triggered when interacting with the indicator, enhancing the user experience.

Callbacks

The onSelectedNumber callback provides the selected value, enabling you to capture user input and respond accordingly in your application

Conclusion

The FancyIndicator widget is a powerful and customizable tool for building interactive and visually appealing indicators in Flutter applications. Its wide range of properties allows you to customize the look and feel to match your specific requirements.