Chapter 18
Displaying an Expandable Bottom Sheet Using Presentation Detents

Bottom sheets have gained popularity recently and can be found in popular apps like Facebook and Uber. They are an enhanced version of action sheets that slide up from the bottom of the screen and overlay on top of the original view. Bottom sheets provide contextual information or additional user options. For example, Instagram displays a bottom sheet when saving a photo to a collection, Facebook shows a sheet with additional actions when clicking the ellipsis button of a post, and Uber uses bottom sheets to display trip pricing.

The size of bottom sheets can vary depending on the information being displayed. Some bottom sheets, known as backdrops, occupy 80-90% of the screen. Users can interact with the sheet using drag gestures, sliding it up to expand or down to minimize or dismiss it.

Figure 1. Uber, Facebook and Instagram all use bottom sheets in their apps
Figure 1. Uber, Facebook and Instagram all use bottom sheets in their apps

In this chapter, we will create an expandable bottom sheet using SwiftUI gestures. The demo app features a list of restaurants in the main view. When a user taps on a restaurant record, a bottom sheet will appear, displaying the details of the selected restaurant. You can expand the sheet by sliding it up. To dismiss the sheet, you can slide it down.

Figure 2. Building a expandable bottom sheet
Figure 2. Building a expandable bottom sheet

To access the full content and the complete source code, please get your copy at https://www.appcoda.com/swiftui.

results matching ""

    No results matching ""