Search code examples
pythonkivydashboardkivymd

Creating dashboard using python's kivymd library

I was trying to create a dashboard using pythons's kivymd library...the code ran properly without any error but still no image or text is visible on the card that was created. here below is the code for the dashboard created

from kivy.lang import Builder
from kivymd.app import MDApp
from kivy.uix.screenmanager import ScreenManager
from kivy.core.window import Window

Window.size = (350, 580)

kv ="""
MDScreen:
    md_bg_color:56/255,40/255,81/255,1
    MDBoxLayout:
        orientation:'vertical'
        MDBoxLayout:
            size_hint_y:.23
            padding:dp(25)
            MDBoxLayout:
                orientation:"vertical"
                MDLabel:

                    text:"Hey!! Customer"
                    font_style:"H4"
                MDBoxLayout:
                    adaptive_size:True
                    spacing:dp(10)
                    #MDLabel:
                    #    text:"Home"
                    #    text_size:None,None
                    #   adaptive_width:True
                    #MDIcon:
                    #    icon:'chevron-down'

            MDIconButton:
                icon:"bell"
        MDGridLayout:
            size_hint_y:.75
            cols:2
            padding:[dp(15),dp(15),dp(15),dp(35)]
            spacing:dp(15)
            ElementCard:
                image:"home.jpg"
                text:"locality 1"
                subtext:"area 1"
                items_count:"xyz"

            ElementCard:
                image:"home.jpg"
                text:"locality 2"
                subtext:"area 2"
                items_count:"xyz"

            ElementCard:
                image:"home.jpg"
                text:"locality 3"
                subtext:"area 3"
                items_count:"xyz"

            ElementCard:
                image:"home.jpg"
                text:"locality 4"
                subtext:"area 4"
                items_count:"xyz"


            ElementCard:
                image:"home.jpg"
                text:"To Do"
                subtext:"Homework, Design"
                items_count:"4 Items"

            ElementCard:
                image:"home.jpg"
                text:"locality 5"
                subtext:"area 5"
                items_count:"xyz"



<ElementCard@MDCard>:
    md_bg_color:69/255,55/255,86/255,1
    padding:dp(15)
    spacing:dp(15)
    radius:dp(25)
    ripple_behavior: True
    image:''
    text:""
    items_count:""
    subtext:''

    orientation:'vertical'
    Image:
        source:root.image
    MDBoxLayout:
        orientation:'vertical'
        MDLabel:
            halign:"center"
            text:root.text
            font_style:"H6"
        MDLabel:
            halign:"center"
            font_style:"Caption"
            text:root.subtext
        MDLabel:
            halign:"center"
            text:root.items_count
"""
class MainApp(MDApp):
    def build(self):
        global screen_manager
        screen_manager = ScreenManager()
        screen_manager.add_widget(Builder.load_string(kv))
        self.title='KivyMD Dashboard'
        self.theme_cls.theme_style = "Dark"
        self.theme_cls.primary_palette = "DeepPurple"
        return screen_manager

MainApp().run()

I was expecting the text and image on the element card created through grid layout but output comes like the below shown pic, without any error given

enter image description here

can anyone help me out with this so that I can get the desired output??

Solution

  • If you add at the start of your kv:

    #:import MDCard kivymd.uix.card.MDCard

    it seems to work. Doesn't seem like that should be necessary.