Flutter – Build a Circular Slider
Last Updated :
19 Nov, 2023
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(
theme: ThemeData(
primarySwatch: Colors.green,
),
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,
max: 100,
appearance: CircularSliderAppearance(
customColors: CustomSliderColors(
progressBarColors: [Colors.blue],
trackColor: Colors.grey,
shadowColor: Colors.green,
shadowMaxOpacity: 0.2,
),
customWidths: CustomSliderWidths(
progressBarWidth: 12,
trackWidth: 12,
shadowWidth: 20,
),
size: 200,
startAngle: 150,
angleRange: 240,
infoProperties: InfoProperties(
mainLabelStyle: TextStyle(fontSize: 24, color: Colors.blue),
modifier: ( double value) {
return '${value.toStringAsFixed(0)}%' ;
},
),
spinnerMode: false ,
animationEnabled: true ,
),
onChange: ( double value) {
},
),
),
);
}
}
|
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(
theme: ThemeData(
primarySwatch: Colors.green,
),
debugShowCheckedModeBanner: false ,
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,
max: 100,
appearance: CircularSliderAppearance(
customColors: CustomSliderColors(
progressBarColors: [Colors.blue],
trackColor: Colors.grey,
shadowColor: Colors.green,
shadowMaxOpacity: 0.2,
),
customWidths: CustomSliderWidths(
progressBarWidth: 12,
trackWidth: 12,
shadowWidth: 20,
),
size: 200,
startAngle: 150,
angleRange: 240,
infoProperties: InfoProperties(
mainLabelStyle: TextStyle(fontSize: 24, color: Colors.blue),
modifier: ( double value) {
return '${value.toStringAsFixed(0)}%' ;
},
),
spinnerMode: false ,
animationEnabled: true ,
),
onChange: ( double value) {
},
),
),
);
}
}
|
Output:
Share your thoughts in the comments
Please Login to comment...