Flutter – Build a Circular Slider

A CircularSlider is a unique and engaging way to input or visualize values within a circular, radial design. In Flutter, this can be achieved using various packages, such as the sleek_circular_slider package. This package enables us to create a wide range of Circular Sliders and we can create a Circular Slider easily using this package. In this article, we are going to take the help of the sleek_circular_slider package to easily implement a CircularSlider. A sample Video is given below to get an idea about what we are going to do in this article.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Adding the Dependencies

Here we have to add the the following dependencies to our pubspec.yaml file.

dependencies:
  sleek_circular_slider: ^2.0.1

or simply you can run this command in your terminal .

flutter pub add sleek_circular_slider

Step 3: Import the Package

First of all import material.dart package and the sleek_circular_slider.dart package.

import 'package:flutter/material.dart';
import 'package:sleek_circular_slider/sleek_circular_slider.dart';

Step 4: Execute the main Method

Here the execution of our app starts.

Dart

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

Step 5: Create MyApp Class

In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.

Dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Define the app's theme
      theme: ThemeData(
        primarySwatch: Colors.green, // Set the app's primary theme color
      ),
      debugShowCheckedModeBanner: false,
      home: CircularSliderWidget(),
    );
  }
}

Step 6: Create CircularSliderWidget Class

In this class we are going to create a circular Slider with the help of sleek_circular_slider package .It contains some parameters mentioned below :

• trackColor: Sets the color of the circular track.
• shadowColor: Sets the color of the shadow.
• shadowMaxOpacity: Defines the maximum opacity for the shadow.
• trackWidth: Sets the width of the track.
• spinnerMode: Disables the spinner mode for the slider .

Dart

class CircularSliderWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sleek Circular Slider Example'),
      ),
      body: Center(
        child: SleekCircularSlider(
          initialValue: 50, // Initial value
          max: 100, // Maximum value
          appearance: CircularSliderAppearance(
            customColors: CustomSliderColors(
              progressBarColors: [Colors.blue], // Customize progress bar colors
              trackColor: Colors.grey, // Customize track color
              shadowColor: Colors.green, // Customize shadow color
              shadowMaxOpacity: 0.2, // Set shadow maximum opacity
            ),
            customWidths: CustomSliderWidths(
              progressBarWidth: 12, // Set progress bar width
              trackWidth: 12, // Set track width
              shadowWidth: 20, // Set shadow width
            ),
            size: 200, // Set the slider's size
            startAngle: 150, // Set the starting angle
            angleRange: 240, // Set the angle range
            infoProperties: InfoProperties(
              // Customize label style
              mainLabelStyle: TextStyle(fontSize: 24, color: Colors.blue),
              modifier: (double value) {
                // Display value as a percentage
                return '${value.toStringAsFixed(0)}%';
              },
            ),
            spinnerMode: false, // Disable spinner mode
            animationEnabled: true, // Enable animation
          ),
          onChange: (double value) {
            // Handle value change here
          },
        ),
      ),
    );
  }
}

Here is the full Code of main.dart file

Dart

import 'package:flutter/material.dart';
import 'package:sleek_circular_slider/sleek_circular_slider.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Define the app's theme
      theme: ThemeData(
        primarySwatch: Colors.green, // Set the app's primary theme color
      ),
      debugShowCheckedModeBanner: false, // Remove debug banner
      home: CircularSliderWidget(),
    );
  }
}

class CircularSliderWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sleek Circular Slider Example'),
      ),
      body: Center(
        child: SleekCircularSlider(
          initialValue: 50, // Initial value
          max: 100, // Maximum value
          appearance: CircularSliderAppearance(
            customColors: CustomSliderColors(
              progressBarColors: [Colors.blue], // Customize progress bar colors
              trackColor: Colors.grey, // Customize track color
              shadowColor: Colors.green, // Customize shadow color
              shadowMaxOpacity: 0.2, // Set shadow maximum opacity
            ),
            customWidths: CustomSliderWidths(
              progressBarWidth: 12, // Set progress bar width
              trackWidth: 12, // Set track width
              shadowWidth: 20, // Set shadow width
            ),
            size: 200, // Set the slider's size
            startAngle: 150, // Set the starting angle
            angleRange: 240, // Set the angle range
            infoProperties: InfoProperties(
              // Customize label style
              mainLabelStyle: TextStyle(fontSize: 24, color: Colors.blue),
              modifier: (double value) {
                // Display value as a percentage
                return '${value.toStringAsFixed(0)}%';
              },
            ),
            spinnerMode: false, // Disable spinner mode
            animationEnabled: true, // Enable animation
          ),
          onChange: (double value) {
            // Handle value change here
          },
        ),
      ),
    );
  }
}

Output: