How to implement this custom slider 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;
              });
            }),
      ),
    );
  }
}