How to make half circular slider in flutter

Viewed 1705

I am new to flutter. I am developing a music app. I want to half(180°) or more then half(180°-240°) circular slider which increase or decrease the volume.

IMAGE IS HERE FOR REFERENCE

Note:

1 Answers

You can use the sleek_circular_slider from pub.dev

Add the dependency to pubspec.yaml

dependencies:
    sleek_circular_slider : ^1.1.0

Run flutter packages get to fetch the dependencies.

Import it to your project file

import 'package:sleek_circular_slider/sleek_circular_slider.dart';

Then you can create the slider like so -

        final SleekCircularSlider(
            min: 0,
            max: 100,
            initialValue: 0,
            onChange: (double value) {
              // callback providing a value while its being changed (with a pan gesture)
            },
            onChangeStart: (double startValue) {
              // callback providing a starting value (when a pan gesture starts)
            },
            onChangeEnd: (double endValue) {
              // callback providing an ending value (when a pan gesture ends)
            },
            innerWidget: (double value) {
              //This the widget that will show current value
              return Center(child: Text("${value.toInt().toString()} %", style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.w200),));
            },
          ),

This will create something like this -

enter image description here

You can read about more customization options here.

Related