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 }, ), ), ); } } |
Contact Us