flutter_dial #

A customizable rotary dial input widget for Flutter, allowing users to select numbers by rotating a dial. The package provides a configurable interface with animation support for mode changes.

Features #

• Customizable rotary dial with configurable properties such as padding, width, colors, and more.
• Animated transitions for background and foreground elements.
• Easy integration with other widgets through a DialConfigProvider.
• Supports gesture detection for rotating the dial and selecting numbers.

Demo #

Here are some animated GIFs showcasing the RotationDialInput widget in action:

Basic Usage:

Customization:

Getting Started #

Prerequisites #

• Flutter SDK
• Dart SDK

Installation #

Add flutter_dial to your pubspec.yaml:

dependencies:
    flutter_dial:
        git:
            url: git://github.com/yourusername/flutter_dial.git
            ref: main

Run flutter pub get to install the package.

Usage #

Basic Usage #

Here is a simple example of how to use the RotationDialInput widget in your Flutter application:

import 'package:flutter/material.dart';
import 'package:flutter_dial/flutter_dial.dart';
import 'dart:math' show pi;

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Dial Example'),
        ),
        body: const Center(
          child: DialExample(),
        ),
      ),
    );
  }
}

class DialExample extends StatefulWidget {
  const DialExample({super.key});

  @override
  _DialExampleState createState() => _DialExampleState();
}

class _DialExampleState extends State<DialExample> {

  @override
  Widget build(BuildContext context) {
    int num = 0;

    return RotationDialInput(
      textStyle: Theme.of(context).textTheme.headlineLarge!.copyWith(
            color: Colors.white,
            fontWeight: FontWeight.w600,
            fontSize: 20.0,
          ),
      animationDuration: const Duration(seconds: 1),
      onNumSelected: (currentnum) {
        num = num * 10 + currentnum;
        print("Selected number: $currentnum, total: $num");
      },
    );
  }
}

Additional Information #

Configuration #

You can configure various properties of the RotationDialInput widget to suit your needs:

RotationDialInput(
  inputNumbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
  ringPadding: 4.0,
  ringWidth: 70.0,
  singleNumberPadding: 8.0,
  firstNumPosition: pi / 3,
  maxRingAngle: pi * 7 / 4,
  maxSweepAngle: pi / 2 * 3,
  textStyle: TextStyle(
    color: Colors.white,
    fontWeight: FontWeight.w600,
    fontSize: 20.0,
  ),
  backgroundColor: Colors.black,
  foregroundColor: Colors.white,
  numberBackgroundColor: Colors.black,
  boxSize: 400.0,
  singleNumberRadius: 20,
);

Contributing #

We welcome contributions! If you find a bug or have a feature request, please open an issue on our GitHub repository. Feel free to submit pull requests as well.

License #

This project is licensed under the MIT License. See the LICENSE file for details.

For more information, visit our GitHub repository.

Maintainers #

• Dikshant

Thank you for using flutter_dial! If you have any questions, feel free to reach out.