How do i hide MDcard and switch to another one in KivyMD?

Question

Hello I'm trying to make a simple authentication app in KivyMD framework. So, I made two MDcards, one should represent login window, and one should represent content after logging in. Here is the code:

#kv file
Screen:

    MDCard:
        id: login_card
        size_hint: None, None
        size: 300, 400
        pos_hint: {"center_x": 0.5, "center_y": 0.5}
        elevation: 10
        padding: 25
        spacing: 25
        orientation: 'vertical'

        MDLabel:
            text: "WELCOME"
            font_size: 40
            halign: 'center'
            size_hint_y: None
            height: self.texture_size[1]
            padding_y: 15

        MDTextFieldRound:
            id: username
            hint_text: "username"
            icon_right: "account"
            size_hint_x: None
            width: 200
            font_size: 18
            pos_hint: {"center_x": 0.5}

        MDTextFieldRound:
            id: password
            hint_text: "password"
            icon_right: "eye-off"
            size_hint_x: None
            width: 200
            font_size: 18
            pos_hint: {"center_x": 0.5}
            password: True

        MDLabel:
            id: response_label
            font_size: 12
            pos_hint: {"center_x": 0.5}

        MDRoundFlatButton:
            text: "LOG IN"
            font_size: 12
            pos_hint: {"center_x": 0.5}
            on_press: app.logger()


    MDCard:
        id: user_card
        size_hint: None, None
        size: 1100, 650
        pos_hint: {"center_x": 0.5, "center_y": 0.5}
        elevation: 10
        padding: 25
        spacing: 25
        orientation: 'vertical'
        opacity: 0

        MDLabel:
            id: hello_user
            font_size: 40
            halign: 'center'
            size_hint_y: None
            height: self.texture_size[1]
            padding_y: 5

        MDLabel:
            id: user_website
            font_size: 25
            halign: 'center'
            size_hint_y: None
            height: self.texture_size[1]
            padding_y: 1

        MDRoundFlatButton:
            text: "Start Testing"
            font_size: 20
            pos_hint: {"center_x": 0.5}

        MDCard:
            size_hint: None, None
            size: 1000, 300
            pos_hint: {"center_x": 0.5, "center_y": 0.5}
            padding: 25
            spacing: 25
            orientation: 'vertical'

            MDLabel:
                text: "Website tests result will be printed here in next version of PEN-TEST-TOOL"
                font_size: 20
                halign: 'center'

        MDRoundFlatButton:
            text: "Log out"
            font_size: 20
            pos_hint: {"center_x": 0.5}
            on_press: app.logout()

# py file
from kivy.lang import Builder
from kivymd.app import MDApp
from kivy.core.window import Window

Window.size = (1280, 720)


class MainApp(MDApp):
    def build(self):
        self.theme_cls.theme_style = "Dark"
        self.theme_cls.primary_palette = "BlueGray"
        return Builder.load_file('login.kv')

    def logger(self):
        self.root.ids.login_card.opacity = 0
        self.root.ids.hello_user.text = f"Hello {self.root.ids.username.text}"
        self.root.ids.user_card.opacity = 1

    def logout(self):
        self.root.ids.user_card.opacity = 0
        self.root.ids.login_card.opacity = 1


MainApp().run()

So I tried to play with opacity, and after pressing the login button, I set login_card opacity to 0, and user_card opacity to 1. But this is obviously a bad solution, because it will hide the elements but will not deactivate them, and text inputs and buttons from previous page can still be clicked. which is bad and it's not what I want.

What is the right way to hide one card, and present another?

Answer 1

This is exactly what ScreenManager and Screen were intended for. Here is a modified version of your code that uses ScreenManager :

kv:

#kv file
ScreenManager
    MDScreen:
        name: 'login'

        MDCard:
            id: login_card
            size_hint: None, None
            size: 300, 400
            pos_hint: {"center_x": 0.5, "center_y": 0.5}
            elevation: 10
            padding: 25
            spacing: 25
            orientation: 'vertical'
    
            MDLabel:
                text: "WELCOME"
                font_size: 40
                halign: 'center'
                size_hint_y: None
                height: self.texture_size[1]
                padding_y: 15
    
            MDTextFieldRound:
                id: username
                hint_text: "username"
                icon_right: "account"
                size_hint_x: None
                width: 200
                font_size: 18
                pos_hint: {"center_x": 0.5}
    
            MDTextFieldRound:
                id: password
                hint_text: "password"
                icon_right: "eye-off"
                size_hint_x: None
                width: 200
                font_size: 18
                pos_hint: {"center_x": 0.5}
                password: True
    
            MDLabel:
                id: response_label
                font_size: 12
                pos_hint: {"center_x": 0.5}
    
            MDRoundFlatButton:
                text: "LOG IN"
                font_size: 12
                pos_hint: {"center_x": 0.5}
                on_press: app.logger()

    MDScreen:
        name: 'user'
        
        MDCard:
            id: user_card
            size_hint: None, None
            size: 1100, 650
            pos_hint: {"center_x": 0.5, "center_y": 0.5}
            elevation: 10
            padding: 25
            spacing: 25
            orientation: 'vertical'
            # opacity: 0 # no longer needed
    
            MDLabel:
                id: hello_user
                font_size: 40
                halign: 'center'
                size_hint_y: None
                height: self.texture_size[1]
                padding_y: 5
    
            MDLabel:
                id: user_website
                font_size: 25
                halign: 'center'
                size_hint_y: None
                height: self.texture_size[1]
                padding_y: 1
    
            MDRoundFlatButton:
                text: "Start Testing"
                font_size: 20
                pos_hint: {"center_x": 0.5}
    
            MDCard:
                size_hint: None, None
                size: 1000, 300
                pos_hint: {"center_x": 0.5, "center_y": 0.5}
                padding: 25
                spacing: 25
                orientation: 'vertical'
    
                MDLabel:
                    text: "Website tests result will be printed here in next version of PEN-TEST-TOOL"
                    font_size: 20
                    halign: 'center'
    
            MDRoundFlatButton:
                text: "Log out"
                font_size: 20
                pos_hint: {"center_x": 0.5}
                on_press: app.logout()

.py:

# py file
from kivy.lang import Builder
from kivymd.app import MDApp
from kivy.core.window import Window

Window.size = (1280, 720)


class MainApp(MDApp):
    def build(self):
        self.theme_cls.theme_style = "Dark"
        self.theme_cls.primary_palette = "BlueGray"
        return Builder.load_file('login.kv')

    def logger(self):
        self.root.current = 'user'  # just switch to the other Screen
        self.root.ids.hello_user.text = f"Hello {self.root.ids.username.text}"

    def logout(self):
        self.root.current = 'login'  # switch back to the login Screen


MainApp().run()