How to implement this custom slider flutter - flutter

Question

I am trying to implement this custom slider on my flutter app. I have searched most of the open source libraries but I cannot seem to get the one that suits my need.
The closet I got to is Cupertino Slider but I couldn't customize it to fit my need. Any ideas?

Answer 1

this is what you are looking for, slider_button:
SliderButton(
action: () {
///Do something here OnSlide
},
///Put label over here
label: Text(
"Slide to cancel !",
style: TextStyle(
color: Color(0xff4a4a4a),
fontWeight: FontWeight.w500,
fontSize: 17),
),
icon: Center(
child: Icon(
Icons.power_settings_new,
color: Colors.white,
size: 40.0,
semanticLabel: 'Text to announce in accessibility modes',
)),
///Change All the color and size from here.
width: 230,
radius: 10,
buttonColor: Color(0xffd60000),
backgroundColor: Color(0xff534bae),
highlightedColor: Colors.white,
baseColor: Colors.red,
);

Answer 2

Try this:
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
class View extends StatefulWidget {
const View({Key? key}) : super(key: key);
#override
_ViewState createState() => _ViewState();
}
class _ViewState extends State<View> {
int segmentedControlGroupValue = 0;
final Map<int, Widget> myTabs = const <int, Widget>{
0: Icon(Icons.arrow_forward, color: Colors.white,),
1: Text("Start Shopping", style: TextStyle(color: Colors.orange),)
};
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: CupertinoSlidingSegmentedControl(
backgroundColor: Colors.orange.withOpacity(0.2),
groupValue: segmentedControlGroupValue,
thumbColor: CupertinoColors.activeOrange,
children: myTabs,
onValueChanged: (newValue) {
setState(() {
segmentedControlGroupValue = newValue as int;
});
}),
),
);
}
}