How to make Custom thumb of seekbar with flutter? - flutter

Question

I'm trying to make seekbar like below image, but unable to made.
I followed Seekbar Package plugin.

Answer 1

Using flutter_xlider plugin makes this a breeze.
Here is a small example from their docs:
FlutterSlider(
...
handler: FlutterSliderHandler(
decoration: BoxDecoration(),
child: Material(
type: MaterialType.canvas,
color: Colors.orange,
elevation: 3,
child: Container(
padding: EdgeInsets.all(5),
child: Icon(Icons.adjust, size: 25,)),
),
),
)
Their slider is very well documented, check it out.

Answer 2

if you are trying to create a custom Thumb design,
then you can extend your choice of Existing thumb class and override the drawing to get the shape you want.
check out this code in dart pad it will help you get started.
Update:
Here is the source code for the same in case the link goes offline:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Custom Slider Thumb Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: SliderTheme(
child: RangeSlider(
min: 0,
max: 100,
divisions: 10,
onChanged: (RangeValues value) {
if (value.end - value.start <= 10) return;
print('current progress: $value');
},
values: RangeValues(0, 100),
),
data: SliderThemeData(
// change size here to customize the thumb
rangeThumbShape: SliderThumbShape(thumbSize: 15.0),
),
),
),
);
}
}
class SliderThumbShape extends RangeSliderThumbShape {
final double thumbSize;
const SliderThumbShape({this.thumbSize = 10.0});
#override
Size getPreferredSize(bool isEnabled, bool isDiscrete) {
return Size.fromWidth(thumbSize);
}
#override
void paint(
PaintingContext context,
Offset center, {
Animation<double> activationAnimation,
#required Animation<double> enableAnimation,
bool isDiscrete,
bool isEnabled,
bool isOnTop,
TextDirection textDirection,
SliderThemeData sliderTheme,
Thumb thumb,
}) {
assert(context != null);
assert(center != null);
assert(enableAnimation != null);
assert(sliderTheme != null);
assert(sliderTheme.disabledThumbColor != null);
assert(sliderTheme.thumbColor != null);
final Canvas canvas = context.canvas;
final ColorTween colorTween = ColorTween(
begin: sliderTheme.disabledThumbColor,
end: sliderTheme.thumbColor,
);
canvas.drawRect(
Rect.fromCenter(center: center, height: thumbSize/2, width: thumbSize),
Paint()..color = colorTween.evaluate(enableAnimation),
);
}
}