Awesome Flat QML UI

 

Modified using Qml's RadioButton and CheckBox controls.

single button

    Main.qml file code  

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.5
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("https://dabreha.blogspot.com/")
    ColumnLayout{
        Layout.fillWidth: true
        anchors.centerIn: parent
        spacing: 50
        GridLayout {
            width: parent.width
            rows: 5
            
            Repeater {
                model: ["#727CF5", "#0ACF97", "#F9375E", "#FFBC00", "#2B99B9"]
                
                Column {
                    spacing: 15
                    
                    MyRadioButton {
                        text: "Radio Button 1"
                        checked: true
                        checkedColor: modelData
                    }
                    
                    MyRadioButton {
                        text: "Radio Button 2"
                        checkedColor: modelData
                    }
                    
                    MyRadioButton {
                        text: "Radio Button 3"
                        checkedColor: modelData
                    }
                }
            }
        }
        GridLayout {
            width: parent.width
            rows: 5
            
            Repeater {
                model: ["#727CF5", "#0ACF97", "#F9375E", "#FFBC00", "#2B99B9"]
                
                Column {
                    spacing: 15
                    
                    MyCheckBox {
                        text: "Check Button 1"
                        checked: true
                        checkedColor: modelData
                    }
                    
                    MyCheckBox {
                        text: "Check Button 2"
                        checkedColor: modelData
                    }
                    
                    MyCheckBox {
                        text: "Check Button 3"
                        checkedColor: modelData
                    }
                }
            }
        }
    }
}

 

• RadioButton code

import QtQuick 2.0
import QtQuick.Controls 2.0

RadioButton {
    id: root

    property color checkedColor: "#0ACF97"
    text: qsTr("RadioButton")

    indicator: Rectangle {
        x: root.leftPadding
        anchors.verticalCenter: parent.verticalCenter
        width: 26; height: width
        antialiasing: true
        radius: width/2
        border.width: 2
        border.color: root.checkedColor

        Rectangle {
            anchors.centerIn: parent
            width: parent.width*0.7; height: width
            antialiasing: true
            radius: width/2
            color: root.checkedColor
            visible: root.checked
        }
    }
}

• RadioButton style code

GridLayout {
    width: root.width
    rows: 5

    Repeater {
        model: ["#727CF5", "#0ACF97", "#F9375E", "#FFBC00", "#2B99B9"]

        Column {
            spacing: 15

            RadioButton {
                text: "Radio Button 1"
                checked: true
                checkedColor: modelData
            }

            RadioButton {
                text: "Radio Button 2"
                checkedColor: modelData
            }

            RadioButton {
                text: "Radio Button 3"
                checkedColor: modelData
            }
        }
    }
}

check button

• CheckBox code

import QtQuick 2.0
import QtQuick.Controls 2.0

CheckBox {
    id: root

    property color checkedColor: "#0ACF97"

    text: qsTr("CheckBox")

    indicator: Rectangle {
        x: root.leftPadding
        anchors.verticalCenter: parent.verticalCenter
        width: 26; height: width
        antialiasing: true
        radius: 5
        border.width: 2
        border.color: root.checkedColor

        Rectangle {
            anchors.centerIn: parent
            width: parent.width*0.7; height: width
            antialiasing: true
            radius: parent.radius * 0.7
            color: root.checkedColor
            visible: root.checked
        }
    }
}

• CheckBox style source code

GridLayout {
    width: root.width
    rows: 5

    Repeater {
        model: ["#727CF5", "#0ACF97", "#F9375E", "#FFBC00", "#2B99B9"]

        Column {
            spacing: 15

            CheckBox {
                text: "Check Button 1"
                checked: true
                checkedColor: modelData
            }

            CheckBox {
                text: "Check Button 2"
                checkedColor: modelData
            }

            CheckBox {
                text: "Check Button 3"
                checkedColor: modelData
            }
        }
    }
}