KivyMD User created button, imported and used across multiple screens

Question

Thanks for taking a look. I am trying to create a "widgetdesign.kv" file, which will house my user created widgets, like:

<AwesomeButton@Button>
    text: "MDRectangleFlatIconButton"
    icon: "language-python"
    line_color: 0, 0, 0, 0 #NO LINE
    pos_hint: {"center_x": .5, "center_y": .5}
    text_color: "white"
    md_bg_color: app.BACKGROUND3

I have multiple screens, multiple files (.py and .kv) and am trying to be able to import widgets off my "widgetdesign.kv" file into the different .kv screen files. Below is a .kv file housing a single kivy designed screen.

Like:

<ValidateEmail>:
    name: 'validate_email'
    on_pre_enter: print("ValidateEmail.kv on_pre_enter in the intro_widget SM")
    MDBoxLayout:
        orientation: 'vertical'
        md_bg_color: app.BACKGROUNDCOLOR
        spacing: '20dp'
        padding: '20dp'
        MDLabel:
            text: "Check Email for Verification Number"
            halign: 'center'

        MDCard:
            border_radius: '20dp'
            radius: (20)
            elevation: 20
            padding: '20dp'
            spacing: '10dp'
            style: 'elevated' #"filled", "elevated", "outlined"
            #size: root.id.event_email.size
            ripple_behavior: True
            focus_color: "grey"
            md_bg_color: app.BACKGROUNDCOLOR2

            MDLabel:
                id: validateemail_email
                text: app.USEREMAIL
                size_hint: .8, None
                pos_hint: {'center_x': .5, "center_y": .5,}

            MDTextField:
                id: validateemail_number
                mode: "rectangle"
                icon_left: "numeric"
                hint_text: "Number"
                helper_text_mode: "on_focus"
                helper_text: "Verification Number From Email"
                color_mode: "custom"
                line_color_focus: 1,0,1,1
                size_hint: .8, None
                pos_hint: {'center_x': .5, "center_y": .5,}
        AwesomeButton:
            text: "Validate Email"
            #size_hint: 1, None
            pos_hint: {'center_x': .5, "center_y": .5,}
            on_release:
                #root.manager.transition = NoTransition()
                root.validate_email(validateemail_number.text, app.USEREMAIL)

I have tried different iterations of: #:import my_button kv.ButtonStyles at the top of my .kv files, but cannot seem to get the widget to be accessable from the different kivy screens and their respective .kv files.

Answer 1

First you have to create a file awesome_button.py

from kivy.uix.button import Button
from kivy.lang.builder import Builder
class AwesomeButton(Button):
    pass
Builder.load_string("""
<AwesomeButton>:
    text: "MDRectangleFlatIconButton"
    icon: "language-python"
    line_color: 0, 0, 0, 0 #NO LINE
    pos_hint: {"center_x": .5, "center_y": .5}
    text_color: "white"
    md_bg_color: app.BACKGROUND
""")

And now you can use the class AwesomeButton like this

#: import AwesomeButton awesome_button.AwesomeButton
<ValidateEmail>:
    name: 'validate_email'
    on_pre_enter: print("ValidateEmail.kv on_pre_enter in the intro_widget SM")
    MDBoxLayout:
        orientation: 'vertical'
        md_bg_color: app.BACKGROUNDCOLOR
        spacing: '20dp'
        padding: '20dp'
        MDLabel:
            text: "Check Email for Verification Number"
            halign: 'center'

        MDCard:
            border_radius: '20dp'
            radius: (20)
            elevation: 20
            padding: '20dp'
            spacing: '10dp'
            style: 'elevated' #"filled", "elevated", "outlined"
            #size: root.id.event_email.size
            ripple_behavior: True
            focus_color: "grey"
            md_bg_color: app.BACKGROUNDCOLOR2

            MDLabel:
                id: validateemail_email
                text: app.USEREMAIL
                size_hint: .8, None
                pos_hint: {'center_x': .5, "center_y": .5,}

            MDTextField:
                id: validateemail_number
                mode: "rectangle"
                icon_left: "numeric"
                hint_text: "Number"
                helper_text_mode: "on_focus"
                helper_text: "Verification Number From Email"
                color_mode: "custom"
                line_color_focus: 1,0,1,1
                size_hint: .8, None
                pos_hint: {'center_x': .5, "center_y": .5,}
        AwesomeButton:
            text: "Validate Email"
            #size_hint: 1, None
            pos_hint: {'center_x': .5, "center_y": .5,}
            on_release:
                #root.manager.transition = NoTransition()
                root.validate_email(validateemail_number.text, app.USEREMAIL)