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_sliderStep 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.
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.
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 .
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
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
},
),
),
);
}
}