Sheet nello sviluppo mobile — essenza, tipi e funzionamento

Cos'è un Sheet nelle applicazioni mobili

Sheet è un componente dell'interfaccia a livello superficiale che scivola dal basso dello schermo e visualizza contenuto o azioni aggiuntive senza allontanare l'utente dalla schermata corrente. A differenza delle transizioni a schermo intero, un Sheet preserva il contesto: l'utente vede lo schermo di sfondo e capisce da dove è apparso il Sheet.

L'architettura di un Sheet si basa su un contenitore con altezza regolabile. Nello stato minimo (collapsed), è visibile solo una parte del contenuto — di solito un titolo o un pannellino. L'utente può trascinare il Sheet verso l'alto per espanderlo (expanded) o scorrere verso il basso per chiuderlo. Questo comportamento ricorda un foglio di carta fisico che viene estratto da sotto una pila — da qui il nome.

Google nelle linee guida di Material Design 3 (2024) evidenzia due scenari chiave per l'uso di Sheet: visualizzare azioni aggiuntive che non entrano nella barra degli strumenti principale e mostrare moduli o informazioni dettagliate senza navigare verso una schermata separata. Su iOS, Apple ha aggiunto il supporto di sistema per Sheet a partire da iOS 15 tramite UISheetPresentationController, confermando l'universalità del pattern.

Tipi di Bottom Sheet: standard, modale ed espandibile

Material Design definisce tre tipi di Bottom Sheet, ciascuno con il proprio comportamento e ambito di applicazione. Scegliere il tipo corretto influisce direttamente sull'esperienza utente e sulla conformità alle linee guida della piattaforma.

Bottom Sheet standard

Bottom Sheet standard è un componente non modale: l'utente può interagire con lo schermo di sfondo senza chiudere il Sheet. Ad esempio, mentre sfoglia un elenco di prodotti in background, l'utente vede i filtri in un Bottom Sheet e può modificarli senza chiudere il pannello. Il Sheet regola la sua altezza in base al contenuto — dal 30% al 90% dello schermo.

Il Bottom Sheet standard non blocca lo sfondo e consente l'interazione con il contenuto principale. Questa è la differenza fondamentale rispetto al Sheet modale, che richiede un'azione obbligatoria per procedere. Utilizzare un Sheet standard quando le informazioni aggiuntive non sono critiche per lo scenario principale.

Bottom Sheet modale

Bottom Sheet modale blocca l'interazione con lo schermo di sfondo fino a quando l'utente non esegue un'azione all'interno del Sheet. Questo Sheet viene sempre mostrato nello stato expanded e richiede una chiusura esplicita — tramite un pulsante, un'azione o uno scorrimento verso il basso. Material Design raccomanda il Sheet modale per moduli di login, conferme e impostazioni critiche.

Su Android, il Bottom Sheet modale viene implementato tramite BottomSheetDialogFragment, che blocca automaticamente lo sfondo. Su iOS, un comportamento simile è fornito dalla variante modale di UISheetPresentationController con il parametro .mediumDetent. Il Sheet modale dovrebbe essere usato solo quando il contesto richiede l'attenzione dell'utente.

Bottom Sheet espandibile

Bottom Sheet espandibile combina le proprietà dello standard e del modale: inizia come non modale nello stato collapsed, ma quando viene trascinato verso l'alto diventa modale. In pratica, ciò significa che l'utente può prima dare un'occhiata al contenuto e poi decidere — espandere il Sheet per uno studio dettagliato o chiuderlo.

Questo pattern è particolarmente popolare in mappe e navigatori, dove il pannello inferiore mostra brevi informazioni su un punto del percorso e, quando si scorre verso l'alto, si espande con i dettagli. Google Maps utilizza proprio questo Sheet espandibile per visualizzare informazioni su luoghi e percorsi.

Bottom Sheet su Android: Material Design e Jetpack Compose

Android SDK fornisce diverse API per implementare Bottom Sheet, dall'approccio classico basato su View al moderno Jetpack Compose. La libreria Material Components per Android include implementazioni pronte di BottomSheetDialogFragment e BottomSheetBehavior.

BottomSheetBehavior nel layout XML

BottomSheetBehavior è una classe di Material Components che si attacca a qualsiasi View e controlla la sua posizione sullo schermo. Lo sviluppatore imposta tre stati: STATE_COLLAPSED, STATE_EXPANDED e STATE_HIDDEN. Behavior gestisce automaticamente i gesti di trascinamento e l'animazione.

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 fornisce un'API più dichiarativa attraverso il componente ModalBottomSheet di Material 3. A differenza dell'approccio basato su View, in Compose il Bottom Sheet è una funzione composable che accetta stato e contenuto. Il Sheet anima automaticamente la comparsa, la scomparsa e i cambiamenti di altezza durante il trascinamento.

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

BottomSheetDialogFragment per scenari modali

BottomSheetDialogFragment è un DialogFragment specializzato che viene visualizzato come Bottom Sheet. Gestisce automaticamente la modalità, il ciclo di vita e le modifiche di configurazione. Lo sviluppatore deve solo sovrascrivere onCreateView e restituire il layout del Sheet. Secondo la documentazione Google (Android Developers, 2024), BottomSheetDialogFragment è l'approccio raccomandato per Bottom Sheet modali in Android classico.

Sheet su iOS: UISheetPresentationController e SwiftUI

Apple ha introdotto il supporto di sistema per Sheet a partire da iOS 15 tramite UISheetPresentationController. Prima di ciò, gli sviluppatori implementavano Bottom Sheet manualmente con transizioni personalizzate o librerie di terze parti. Il Sheet nativo di Apple supporta i detents — livelli di espansione predefiniti.

UISheetPresentationController in UIKit

UISheetPresentationController è un controller di presentazione integrato che visualizza un View Controller come Sheet. Lo sviluppatore specifica un array di detents — valori di altezza in corrispondenza dei quali il Sheet può fermarsi. iOS 16 ha aggiunto detents personalizzati con altezza arbitraria. Apple raccomanda di utilizzare i detents medium (.medium) e large (.large) come principali.

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

Modificatore .sheet in SwiftUI

SwiftUI fornisce il modificatore .sheet, che lega la visualizzazione del Sheet a uno stato. Quando una variabile pubblicata diventa true, SwiftUI mostra automaticamente il Sheet. SwiftUI supporta anche i detents tramite il modificatore .presentationDetents, aggiunto in iOS 16.

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

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

Sheet nei framework multipiattaforma: Flutter e React Native

I framework multipiattaforma supportano anche Bottom Sheet, adattando il comportamento alla piattaforma di destinazione. Flutter e React Native forniscono implementazioni integrate e personalizzate con diversi gradi di flessibilità.

Bottom Sheet in Flutter

Flutter SDK contiene due metodi per visualizzare Bottom Sheet: showBottomSheet (standard) e showModalBottomSheet (modale). Material Design in Flutter segue gli stessi principi di Android — il Sheet appare dal basso, supporta il trascinamento e ha altezza regolabile. Per il comportamento espandibile con detents si utilizza DraggableScrollableSheet.

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

Bottom Sheet in React Native

React Native non ha un componente Bottom Sheet integrato nel suo nucleo, quindi gli sviluppatori utilizzano librerie di terze parti. La più popolare è @gorhom/bottom-sheet (oltre 7.000 stelle su GitHub, 2024). Fornisce un Bottom Sheet guidato dai gesti con supporto per snap points, animazioni e intestazioni fisse. La libreria è costruita su Reanimated 2 e Gesture Handler per prestazioni a 60 FPS.

Buone pratiche ed errori comuni

L'uso corretto di Bottom Sheet richiede il rispetto delle linee guida della piattaforma e la comprensione degli scenari in cui un Sheet è appropriato. Esaminiamo le raccomandazioni principali e gli errori comuni nella progettazione di Sheet.

Quando usare Bottom Sheet

Bottom Sheet è ottimale per azioni che sono complementari al contenuto principale dello schermo. Filtri, ordinamento, selezione di opzioni, brevi informazioni su un elemento — scenari tipici. Material Design raccomanda di utilizzare Bottom Sheet per strumenti che non dovrebbero occupare l'intero schermo ma richiedono più spazio di un Action Sheet o Popup Menu.

Quando NON usare Bottom Sheet

Non utilizzare Bottom Sheet per avvisi critici o errori — le finestre di dialogo sono più adatte. Evitare Sheet con un gran numero di campi di input che richiedono scorrimento: l'utente fa fatica a raggiungere la tastiera e perde il contesto. Se un Sheet contiene più di sette elementi di azione, considerare una schermata separata invece di un Sheet.

Errore: modalità collapsed troppo alta

Un errore tipico è impostare peekHeight (altezza nello stato compresso) a più del 40% dello schermo. L'utente non capisce se sta vedendo il Sheet intero o se può essere espanso. Material Design raccomanda peekHeight entro il 15-30% dell'altezza dello schermo per lasciare una parte notevole del contenuto nascosta e motivare il trascinamento.

Errore: ignorare il gesto di scorrimento su iOS

Su iOS, gli utenti si aspettano di poter chiudere un Sheet scorrendo verso il basso da qualsiasi posizione. Se si disabilita questo gesto (tramite UISheetPresentationController.prefersEdgeAttachedInCompactHeight), l'utente prova frustrazione nel tentativo di chiudere il Sheet nel modo abituale. Le Linee Guida per l'Interfaccia Umana di Apple (2024) sottolineano che lo scorrimento per chiudere è un'aspettativa di base degli utenti iOS.