app/qml/components/SmoothSwitchDelegate.qml

import QtQuick 2.9
import QtQuick.Controls 2.3

SwitchDelegate {
    id: control

    implicitHeight: 50
    implicitWidth: 100

    baselineOffset: 100

    contentItem: Text {
        visible: false
    }

    Text {

        anchors {
            verticalCenter: parent.verticalCenter
            left: parent.left
            right: indicator.left
            leftMargin: control.width * 0.02
            rightMargin: control.width * 0.01
        }

        text: control.text
        color: appTheme.style.textColor

        fontSizeMode: Text.Fit

        font.pixelSize: control.height * 0.4
    }

    indicator: Rectangle {

        property bool checked: parent.checked
        property bool down: parent.down

        height: parent.height * 0.6
        width: height * 1.84

        anchors {
            verticalCenter: parent.verticalCenter
            right: parent.right
            rightMargin: control.width * 0.02
        }

        radius: height * 0.5
        color: parent.checked ? "#17a81a" : "transparent"
        border.color: parent.checked ? "#17a81a" : "#cccccc"

        Behavior on color{
            ColorAnimation{
                duration: 200
            }
        }

        Rectangle {
            x: parent.checked ? parent.width - width : 0
            width: parent.height
            height: parent.height
            radius: height * 0.5
            color: parent.down ? "#cccccc" : "#ffffff"
            border.color: parent.checked ? (parent.down ? "#17a81a" : "#21be2b") : "#999999"
            Behavior on x{
                NumberAnimation {
                    property: "x"
                    duration: 200
                    easing.type: Easing.InOutQuad
                }
            }
        }
    }

    background: Rectangle {
        opacity: enabled ? 1 : 0.3
        color: control.down ? appTheme.style.delegatePressedColor : appTheme.style.delegateBackgroundColor

        radius: height * 0.3

        Behavior on color {
            ColorAnimation {
                duration: 200
            }
        }
    }
}