Let's begin the UI development with a new concept, namely screen management. Our application at hand, the chat client, is a fitting example. There will be two application states with different UI that are completely separate from one another:
The login screen where the user enters the hostname to connect to and the desired nickname:
The chatroom screen, where the actual conversation takes place:
Conceptually, these are the application states of the Chat app's frontend.
A straightforward approach to such UI separation will amount to managing the visible and hidden controls depending on some variable that holds the current desired UI state. This gets cumbersome very quickly as the number of widgets grow, and the boilerplate code isn't exactly fun to write anyway.
That's why the Kivy framework provides us with a container widget specifically tailored for the task, ScreenManager. Additionally, ScreenManager supports short animations to visualize the screen change, with a number of...