circular

Description:

circular

Circular #












Features #

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

Getting started #
add the package
flutter pub add circular
copied to clipboard
import the package
import 'package:circular/circular.dart';
copied to clipboard
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;
});
},
),
copied to clipboard
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),
)
copied to clipboard
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