Circular

Features

  • picking values in specific range
  • displaying values in a a circular slider

Getting started

add the package

flutter pub add circular

import the package

import 'package:circular/circular.dart';

Usage

Circular slider

CircularSlider(
decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(200),
    boxShadow: const [
      BoxShadow(
          offset: Offset(-10, -10),
          color: Colors.white,
          blurRadius: 20,
          spreadRadius: 1),
      BoxShadow(
          offset: Offset(10, 10),
          color: Color.fromARGB(255, 158, 158, 158),
          blurRadius: 20,
          spreadRadius: 1)
    ]),
maxValue: 100,
radius:100, 
child: Text(
  value.toString(),
  style: TextStyle(fontSize: 30),
),
color: Color(0xffEEEEEE),
sliderColor: Color(0xff62CBDA),
unSelectedColor: Color(0xffD7DEE7),
onDrag: (value) {
  setState(() {
    this.value = value;
  });
},
),

Circular Viewer

CircularViewer(
  decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(200),
      boxShadow: const [
        BoxShadow(
            offset: Offset(-10, -10),
            color: Colors.white,
            blurRadius: 20,
            spreadRadius: 1),
        BoxShadow(
            offset: Offset(10, 10),
            color: Color.fromARGB(255, 158, 158, 158),
            blurRadius: 20,
            spreadRadius: 1)
      ]),
  value: 50,
  maxValue: 100,
  radius: 100,
  textStyle: TextStyle(fontSize: 30),
  color: Color(0xffEEEEEE),
  sliderColor: Color(0xff62CBDA),
  unSelectedColor: Color(0xffD7DEE7),
)

check out the full example

Additional information

story

after I made the the magic circle I decided to make it useful so I made this package

Contributing

Contributions are always welcome!

License

MIT LICENSE

Libraries

circular