wtf_rotary_dial

Rotary Dial

A Widget that allows you to dial numbers by rotating the dial.

Click here to view the full example.

Inspired by this.

Installing

Add it to your pubspec.yaml file:

dependencies:
  wtf_rotary_dial: ^0.1.0

Install packages from the command line

flutter pub get

If you like this package, consider supporting it by giving it a star on GitHub and a like on pub.dev ❤️

Usage

You can use the Rotary Dial widget in the following way:

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'WTF Rotary Dial',
      home: Scaffold(
        body: Center(
          child: RotaryDial(
            onDigitSelected: (value) {
              // The value is entered number.
            },
            rotaryDialThemeData: RotaryDialThemeData(
              spinnerColor: const Color(0xFFFFFFFF),
              rotaryDialColor: const Color(0xFF1871F0),
              dialColor: const Color(0xFF529AFF),
              numberColor: const Color(0xFFFFFFFF),
              margin: null,
              dialBorderRadius: null,
            ),
            duration: const Duration(milliseconds: 500),
            curve: Curves.decelerate,
          ),
        ),
      ),
    );
  }

Result:

Theme

You can customize the widget to your liking. There is a helper RotaryDialThemeData class for this.

Parameter	Description
rotaryDialColor	This parameter is responsible for assigning the color of the main circle.
spinnerColor	This parameter is responsible for assigning the color of the rotating part.
dialColor	This parameter is responsible for assigning the color of the circle inside which the number is located.
numberColor	This parameter is responsible for assigning the color of numbers.
margin	This parameter is responsible for setting the outer padding.
dialBorderRadius	This parameter is responsible for assigning the radius of the circle inside which the number is located.