Navigation in foldables and large screens

In the Designing UIs for large screens and foldables section of Chapter 4, we learned about the WindowSize class and how we can make our apps responsive in foldable devices and large screens. In this section, we are going to make our Pets app responsive in foldable devices and large screens. We are going to make several changes, as follows:

• Add a bottom bar to PetsScreen, which will have several options.
• Add NavigationRail and NavigationDrawer, which will be used depending on the screen size.
• Observe the device’s foldable state and change the layout of the app depending on the foldable state.
• Depending on the screen size, we will also change the content type. On large screens, we will display the list of cats and the details of the selected cat side by side. On small screens, we will display the list of cats and the details of the selected cat on different screens.

Quite a lot of changes are required. The good...