Using property in canvas results in TypeError: unsupported operand type(s) for *: 'int' and 'NoneType'
<p>I am trying to implement my own ProgressBar* widget.</p>

<pre><code>from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.lang import Builder

kv = """
&lt;MyProgressBar@Widget&gt;:
    max: 1
    value: 0
    limited_value: min(self.value, self.max)
    # Filled ratio should never be 0 or 1
    # otherwise it would cause size_hints equal to 0,
    # that is, None-type value, resulting in ignoring size_hint
    filled_ratio: max(.00001, min(.9999, float(self.value) / self.max))
    empty_ratio: 1-self.filled_ratio
    filled_color: 0,1,0,1
    empty_color: .6,.6,.6,.4

    size_hint_y: .5
    pos_hint: {'center_x': .5, 'center_y': .5}
    canvas.before:
        Color:
            rgba: root.filled_color
        Rectangle:
            size: root.width * root.filled_ratio, root.height
            pos: root.pos
        Color:
            rgba: root.empty_color
        Rectangle:
            size: root.width * root.empty_ratio, root.height
            pos: root.x + root.width*root.filled_ratio, root.y

&lt;MainWidget&gt;:
    MyProgressBar

"""
Builder.load_string(kv)

class MainWidget(BoxLayout):
    pass

class MySimpleApp(App):
    def build(self):
        main = MainWidget(orientation='vertical')
        return main

if __name__ == '__main__':
    MySimpleApp().run()
</code></pre>

<p>When I run the code I get the following error: </p>

<pre><code> BuilderException: Parser: File "&lt;inline&gt;", line 20:
 ...
      18:            rgba: root.filled_color
      19:        Rectangle:
 &gt;&gt;   20:            size: root.width * root.filled_ratio, root.height
      21:            pos: root.pos
      22:        Color:
 ...
 TypeError: unsupported operand type(s) for *: 'int' and 'NoneType'
</code></pre>

<p>Replacing <code>root.filled_ratio</code> and <code>root.empty_ratio</code> in <code>canvas</code> with any float makes the error disappear. So, <code>canvas</code> sees <code>root.filled_ratio</code> as <code>None</code> for some reason, while it should be a float. </p>

<p>The error also disappears if instead of: </p>

<pre><code>filled_ratio: max(.00001, min(.9999, float(self.value) / self.max))
empty_ratio: 1-self.filled_ratio
</code></pre>

<p>.. I use:</p>

<pre><code>filled_ratio: .4
empty_ratio: .6
</code></pre>

<p>What am I doing wrong?</p>

<p><sub>*there is already a <a href="https://kivy.org/docs/api-kivy.uix.progressbar.html?highlight=progressbar#" rel="nofollow">ProgressBar</a> in Kivy).</sub> </p>

<p>Simply defining the properties in python before using them in kv-language fixes the issue: </p>

<pre><code>class MyProgressBar(Widget):
    filled_ratio = NumericProperty(0)
    empty_ratio = NumericProperty(0)
</code></pre>

<p><sub>(Note: I don't consider this a complete answer since it doesn't explain <em>why</em> this happens. Feel free to create an answer that addresses fully the issue)</sub></p>

python kivy kivy-language