Sheet in mobiele ontwikkeling — wat ze zijn, soorten en hoe ze werken

Wat is Sheet in mobiele apps

Sheet is een oppervlakkige UI-component die onderaan het scherm omhoog komt en extra inhoud of acties weergeeft zonder de gebruiker van het huidige scherm weg te leiden. In tegenstelling tot volledige schermovergangen behoudt Sheet de context: de gebruiker ziet het achtergrondscherm en begrijpt waar de Sheet vandaan komt.

De architectuur van Sheet is gebaseerd op een container met variabele hoogte. In de minimale toestand (collapsed) is slechts een deel van de inhoud zichtbaar — meestal een titel of een klein paneel. De gebruiker kan de Sheet omhoog trekken om deze uit te vouwen (expanded) of omlaag vegen om te sluiten. Dit gedrag doet denken aan een fysiek vel papier dat onder een stapel vandaan wordt getrokken — vandaar de naam.

Google onderscheidt in de Material Design 3 (2024) richtlijnen twee belangrijke scenario's voor het gebruik van Sheet: het tonen van extra acties die niet op de hoofdwerkbalk passen, en het weergeven van formulieren of gedetailleerde informatie zonder naar een apart scherm te navigeren. Op iOS voegde Apple vanaf iOS 15 systeemondersteuning voor Sheet toe via UISheetPresentationController, wat de universaliteit van het patroon bevestigt.

Soorten Bottom Sheet: standaard, modaal en uitgebreid

Material Design definieert drie soorten Bottom Sheet, elk met eigen gedrag en toepassingsgebied. De juiste keuze van het type beïnvloedt direct de gebruikerservaring en naleving van platformrichtlijnen.

Standaard Bottom Sheet (Standard)

Standaard Bottom Sheet is een niet-modale component: de gebruiker kan met het achtergrondscherm interageren zonder de Sheet te sluiten. Bijvoorbeeld, terwijl de gebruiker door een productlijst op de achtergrond bladert, ziet hij filters in de Bottom Sheet en kan hij deze wijzigen zonder het paneel te sluiten. De Sheet past zijn hoogte aan de inhoud aan — van 30% tot 90% van het scherm.

Standaard Bottom Sheet blokkeert de achtergrond niet en maakt interactie met de hoofdinhoud mogelijk. Dit is het belangrijkste verschil met een modale Sheet, die een verplichte actie vereist om verder te werken. Gebruik een standaard Sheet wanneer de extra informatie niet kritisch is voor het hoofdscenario.

Modale Bottom Sheet (Modal)

Modale Bottom Sheet blokkeert interactie met het achtergrondscherm totdat de gebruiker een actie binnen de Sheet uitvoert. Zo'n Sheet wordt altijd in expanded-status getoond en vereist expliciet sluiten — via een knop, actie of omlaag vegen. Material Design beveelt modale Sheet aan voor inlogformulieren, bevestigingen en kritieke instellingen.

Op Android wordt modale Bottom Sheet geïmplementeerd via BottomSheetDialogFragment, dat automatisch de achtergrond blokkeert. Op iOS wordt vergelijkbaar gedrag geboden door de modale variant van UISheetPresentationController met de parameter .mediumDetent. Modale Sheet mag alleen worden gebruikt wanneer de context de aandacht van de gebruiker vereist.

Uitgebreide Bottom Sheet (Expanding)

Uitgebreide Bottom Sheet combineert eigenschappen van standaard en modaal: hij begint als niet-modaal in collapsed-status, maar wordt modaal bij omhoog slepen. In de praktijk betekent dit dat de gebruiker eerst een glimp van de inhoud kan opvangen en vervolgens kan beslissen — de Sheet uitvouwen voor gedetailleerde bestudering of sluiten.

Dit patroon is vooral populair in kaarten en navigators, waar het onderste paneel korte informatie over een routepunt toont en bij omhoog vegen wordt uitgevouwen met details. Google Maps gebruikt precies zo'n uitgebreide Sheet voor het tonen van informatie over plaatsen en routes.

Bottom Sheet op Android: Material Design en Jetpack Compose

Android SDK biedt verschillende API's voor het implementeren van Bottom Sheet, van de klassieke View-benadering tot moderne Jetpack Compose. De Material Components Library voor Android bevat kant-en-klare implementaties van BottomSheetDialogFragment en BottomSheetBehavior.

BottomSheetBehavior in XML-layout

BottomSheetBehavior is een klasse uit Material Components die aan elke View kan worden gekoppeld en de positie op het scherm beheert. De ontwikkelaar stelt drie statussen in: STATE_COLLAPSED (ingeklapt), STATE_EXPANDED (uitgeklapt) en STATE_HIDDEN (verborgen). Behavior verwerkt automatisch sleepgebaren en animatie.

val sheet = findViewById<View>(R.id.bottom_sheet)
val behavior = BottomSheetBehavior.from(sheet)
behavior.state = BottomSheetBehavior.STATE_COLLAPSED
behavior.peekHeight = 200

Bottom Sheet in Jetpack Compose

Jetpack Compose biedt een meer declaratieve API via de ModalBottomSheet component uit Material 3. In tegenstelling tot de View-benadering is Bottom Sheet in Compose een composable-functie die status en inhoud accepteert. De Sheet animeert automatisch het verschijnen, verbergen en hoogteverandering bij slepen.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun FilterSheet(onDismiss: () -> Unit) {
    ModalBottomSheet(onDismissRequest = onDismiss) {
        Text("Filters")
        Button(onClick = onDismiss) { Text("Apply") }
    }
}

BottomSheetDialogFragment voor modale scenario's

BottomSheetDialogFragment is een gespecialiseerde DialogFragment die als Bottom Sheet wordt weergegeven. Het verwerkt automatisch modaliteit, levenscyclus en configuratiewijzigingen. De ontwikkelaar hoeft alleen onCreateView te overschrijven en de Sheet-layout terug te geven. Volgens de Google-documentatie (Android Developers, 2024) is BottomSheetDialogFragment de aanbevolen methode voor modale Bottom Sheets in klassiek Android.

Sheet op iOS: UISheetPresentationController en SwiftUI

Apple heeft vanaf iOS 15 systeemondersteuning voor Sheet geïntroduceerd via UISheetPresentationController. Daarvoor implementeerden ontwikkelaars Bottom Sheet handmatig via custom transition of externe bibliotheken. Native Sheet van Apple ondersteunt detents — vooraf gedefinieerde uitvouwingsniveaus.

UISheetPresentationController in UIKit

UISheetPresentationController is een ingebouwde presentatiecontroller die een View Controller als Sheet weergeeft. De ontwikkelaar stelt een reeks detents in — hoogtewaarden waarop de Sheet kan stoppen. iOS 16 voegde custom detents met willekeurige hoogte toe. Apple beveelt het gebruik van medium (.medium) en large (.large) detents als standaard aan.

let viewController = MySheetViewController()
if let sheet = viewController.sheetPresentationController {
    sheet.detents = [.medium, .large]
    sheet.prefersGrabberVisible = true
    sheet.preferredCornerRadius = 16
}
present(viewController, animated: true)

.sheet modifier in SwiftUI

SwiftUI biedt de .sheet modifier die de weergave van Sheet aan een status koppelt. Wanneer een published-variabele true wordt, toont SwiftUI automatisch de Sheet. SwiftUI ondersteunt ook detents via de .presentationDetents modifier, toegevoegd in iOS 16.

struct ContentView: View {
    @State private var showSheet = false

    var body: some View {
        Button("Show Sheet") { showSheet = true }
            .sheet(isPresented: $showSheet) {
                FilterView()
                    .presentationDetents([.medium, .large])
            }
    }
}

Sheet in cross-platform frameworks: Flutter en React Native

Cross-platform frameworks ondersteunen ook Bottom Sheet en passen het gedrag aan het doelplatform aan. Flutter en React Native bieden ingebouwde en custom implementaties met verschillende mate van flexibiliteit.

Bottom Sheet in Flutter

Flutter SDK bevat twee methoden voor het tonen van Bottom Sheet: showBottomSheet (standaard) en showModalBottomSheet (modaal). Material Design in Flutter volgt dezelfde principes als in Android — de Sheet verschijnt onderaan, ondersteunt slepen en instelbare hoogte. Voor uitgebreid gedrag met detents wordt DraggableScrollableSheet gebruikt.

Scaffold.of(context).showBottomSheet((context) {
    return Container(
        padding: EdgeInsets.all(16),
        child: Column(
            children: [
                Text("Sheet Content"),
                ElevatedButton(
                    onPressed: () => Navigator.of(context).pop(),
                    child: Text("Close")
                )
            ]
        )
    );
})

Bottom Sheet in React Native

React Native heeft geen ingebouwde Bottom Sheet component in de kern, dus ontwikkelaars gebruiken externe bibliotheken. De meest populaire is @gorhom/bottom-sheet (meer dan 7.000 sterren op GitHub, 2024). Het biedt een gesture-driven Bottom Sheet met ondersteuning voor snap points, animaties en vaste kopteksten. De bibliotheek is geschreven in Reanimated 2 en Gesture Handler voor prestaties op 60 FPS.

Beste praktijken en veelgemaakte fouten

Correct gebruik van Bottom Sheet vereist naleving van platformrichtlijnen en begrip van scenario's waarin Sheet geschikt is. Laten we de belangrijkste aanbevelingen en veelgemaakte fouten bij het ontwerpen van Sheet bekijken.

Wanneer Bottom Sheet gebruiken

Bottom Sheet is optimaal voor acties die aanvullend zijn op de hoofdinhoud op het scherm. Filters, sorteren, opties selecteren, korte informatie over een item — typische scenario's. Material Design beveelt Sheet aan voor tools die niet het hele scherm hoeven te vullen, maar meer ruimte nodig hebben dan Action Sheet of Popup Menu.

Wanneer NIET Bottom Sheet gebruiken

Gebruik Bottom Sheet niet voor kritieke waarschuwingen of fouten — hiervoor zijn dialoogvensters geschikt. Vermijd Sheet met veel invoervelden die scrollen vereisen: de gebruiker bereikt moeilijk het toetsenbord en verliest context. Als de Sheet meer dan zeven actie-elementen bevat, overweeg dan een apart scherm in plaats van Sheet.

Fout: te hoge collapsed-modus

Een veelgemaakte fout is het instellen van peekHeight (hoogte in ingeklapte toestand) op meer dan 40% van het scherm. De gebruiker begrijpt niet of hij de Sheet volledig ziet of dat deze kan worden uitgevouwen. Material Design beveelt peekHeight aan tussen 15-30% van de schermhoogte om een aanzienlijk deel van de inhoud verborgen te houden en tot slepen aan te moedigen.

Fout: negeren van veeggebaar op iOS

Op iOS verwachten gebruikers dat de Sheet kan worden gesloten door omlaag te vegen vanuit elke positie. Als u dit gebaar uitschakelt (via UISheetPresentationController.prefersEdgeAttachedInCompactHeight), raakt de gebruiker gefrustreerd bij het proberen de Sheet op de gebruikelijke manier te sluiten. Apple Human Interface Guidelines (2024) benadrukken dat vegen om te sluiten een basisverwachting is van iOS-gebruikers.