How do I dynamically add widget to grid? - layout

Question

I have a Button in the top boxlayout that I want to add a widget to my grid layout below.
Here is my .py file code
class rootWidget(BoxLayout):
pass
class topWidget(BoxLayout):
print("top part")
class middelWidget(GridLayout):
pass
class bottomWidget(BoxLayout):
pass
class NewButton(Button):
pass
class mainkv(App):
def newButt(self):
print("button clicked")
butt = NewButton(text="New Button")
middelWidget().add_widget(butt)
def build(self):
return rootWidget()
mainkv().run()
And here is my .kv file
<topWidget>:
Button:
text: 'CLick add to grid'
on_press:
app.newButt()
<middelWidget>:
cols: 6
id: grid
Button:
text: 'middel Grid'
<bottomWidget>:
Button:
text: 'bottom'
<rootWidget>:
orientation: 'vertical'
Button:
text: 'Root'
topWidget:
middelWidget:
bottomWidget:
I am not getting any errors but it's not working.
Can't figure out what am missing any help much appreciated.

Answer 1

The problem is that the code:
middelWidget().add_widget(butt)
is creating a new instance of the middelWidget, and adding the Button to that new instance. However, that new instance of middelWidget is not part of your GUI, so nothing happens. The fix is to use the instance of middelWidget that is already in your GUI. That can be done using ids. Here is a modified version of your rootWidget rule in the kv:
<rootWidget>:
orientation: 'vertical'
Button:
text: 'Root'
topWidget:
middelWidget:
id: middle # id for accessing middelWidget
bottomWidget:
Then the newButt() method can be:
def newButt(self):
print("button clicked")
butt = NewButton(text="New Button")
middle = self.root.ids.middle # get a reference to the middelWidget instance
middle.add_widget(butt)
# middelWidget().add_widget(butt)
Also, your classes should begin with and upper case letters. This is not just for appearance, it can cause errors when those classes are used in kv.