Rotary Dial

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

demo1

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:

demo1

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.

Libraries

wtf_rotary_dial