Alert Dialog Boxes For KivyMD – Python Kivy GUI Tutorial #48

In this video I’ll show you how to create alert popup dialog boxes with kivymd and python.

Popup boxes are super popular in most software or apps, and creating dialog box alerts is super easy with KivyMD. In this video I’ll show you how to create an alert with a title and some text, as well as a couple of buttons.

We’ll also look at making the buttons functional so that they do something when you click them in the alert.

#kivy #codemy

Python Code: alert.py
GitHub Code: alert.py

from kivy.lang import Builder
from kivymd.app import MDApp
from kivymd.uix.dialog import MDDialog
from kivymd.uix.button import MDFlatButton, MDRectangleFlatButton

class MainApp(MDApp):
	dialog = None
	def build(self):
		self.theme_cls.theme_style = "Dark"
		self.theme_cls.primary_palette = "BlueGray"
		return Builder.load_file('alert.kv')
	
	def show_alert_dialog(self):
		if not self.dialog:
			self.dialog = MDDialog(
				title = "Pretty Neat, Right?!",
				text = "This is just some text that goes here...",
				buttons =[
					MDFlatButton(
						text="CANCEL", text_color=self.theme_cls.primary_color, on_release = self.close_dialog
						),
					MDRectangleFlatButton(
						text="Yes It's Neat!", text_color=self.theme_cls.primary_color, on_release = self.neat_dialog
						),
					],
				)

		self.dialog.open()

	# Click Cancel Button
	def close_dialog(self, obj):
		# Close alert box
		self.dialog.dismiss()
	
	# Click the Neat Button
	def neat_dialog(self, obj):
		# Close alert box
		self.dialog.dismiss()
		# Change label text
		self.root.ids.my_label.text = "Yes It's Neat!"

MainApp().run()

Kivy Design Code: alert.kv
GitHub Code: alert.kv

MDBoxLayout:
    orientation: 'vertical'

    MDScreen:

        MDRectangleFlatButton:
            text: "ALERT POPUP!"
            pos_hint: {'center_x': .5, 'center_y': .5}
            on_release: app.show_alert_dialog()

        MDLabel:
            id: my_label
            text: "Some Stuff"
            pos_hint: {'center_x': .95, 'center_y': .4}