Sheet dalam pengembangan mobile — pengertian, jenis, dan cara kerjanya

Apa itu Sheet dalam aplikasi mobile

Sheet adalah komponen UI permukaan yang muncul dari bawah layar dan menampilkan konten atau tindakan tambahan tanpa membawa pengguna keluar dari layar saat ini. Berbeda dengan transisi layar penuh, Sheet mempertahankan konteks: pengguna melihat layar latar belakang dan memahami dari mana Sheet muncul.

Arsitektur Sheet didasarkan pada wadah dengan tinggi yang dapat diubah. Dalam status minimum (collapsed) hanya sebagian konten yang terlihat — biasanya judul atau panel kecil. Pengguna dapat menarik Sheet ke atas untuk memperluasnya (expanded) atau menggeser ke bawah untuk menutupnya. Perilaku ini mengingatkan pada lembaran kertas fisik yang ditarik dari bawah tumpukan — itulah asal namanya.

Google dalam panduan Material Design 3 (2024) membedakan dua skenario utama penggunaan Sheet: menampilkan tindakan tambahan yang tidak muat di bilah alat utama, dan menampilkan formulir atau informasi detail tanpa berpindah ke layar terpisah. Di iOS, Apple menambahkan dukungan sistem untuk Sheet mulai dari iOS 15 melalui UISheetPresentationController, yang menegaskan universalitas pola ini.

Jenis Bottom Sheet: standar, modal, dan diperluas

Material Design mendefinisikan tiga jenis Bottom Sheet, masing-masing dengan perilaku dan area penerapannya sendiri. Pemilihan jenis yang tepat secara langsung memengaruhi pengalaman pengguna dan kepatuhan terhadap panduan platform.

Bottom Sheet Standar (Standard)

Bottom Sheet Standar adalah komponen non-modal: pengguna dapat berinteraksi dengan layar latar belakang tanpa menutup Sheet. Misalnya, saat menelusuri daftar produk di jendela latar belakang, pengguna melihat filter di Bottom Sheet dan dapat mengubahnya tanpa menutup panel. Sheet menyesuaikan tingginya dengan konten — dari 30% hingga 90% layar.

Bottom Sheet Standar tidak memblokir latar belakang dan memungkinkan interaksi dengan konten utama. Ini adalah perbedaan utama dari Sheet modal, yang memerlukan tindakan wajib untuk melanjutkan pekerjaan. Gunakan Sheet standar ketika informasi tambahan tidak kritis untuk skenario utama.

Bottom Sheet Modal (Modal)

Bottom Sheet Modal memblokir interaksi dengan layar latar belakang sampai pengguna melakukan tindakan di dalam Sheet. Sheet semacam itu selalu ditampilkan dalam status expanded dan memerlukan penutupan eksplisit — melalui tombol, tindakan, atau geser ke bawah. Material Design merekomendasikan Sheet modal untuk formulir masuk, konfirmasi, dan pengaturan kritis.

Di Android, Bottom Sheet modal diimplementasikan melalui BottomSheetDialogFragment, yang secara otomatis memblokir latar belakang. Di iOS, perilaku serupa disediakan oleh varian modal UISheetPresentationController dengan parameter .mediumDetent. Sheet modal hanya boleh digunakan ketika konteks memerlukan perhatian pengguna.

Bottom Sheet Diperluas (Expanding)

Bottom Sheet Diperluas menggabungkan properti standar dan modal: dimulai sebagai non-modal dalam status collapsed, tetapi menjadi modal saat ditarik ke atas. Dalam praktiknya, ini berarti pengguna dapat melihat sekilas konten terlebih dahulu, lalu memutuskan — memperluas Sheet untuk mempelajari detail atau menutupnya.

Pola ini sangat populer di peta dan navigator, di mana panel bawah menampilkan informasi singkat tentang titik rute, dan saat digeser ke atas terbuka dengan detail. Google Maps menggunakan Sheet diperluas seperti ini untuk menampilkan informasi tentang tempat dan rute.

Bottom Sheet di Android: Material Design dan Jetpack Compose

Android SDK menyediakan beberapa API untuk implementasi Bottom Sheet, mulai dari pendekatan View klasik hingga Jetpack Compose modern. Material Components Library untuk Android mencakup implementasi siap pakai BottomSheetDialogFragment dan BottomSheetBehavior.

BottomSheetBehavior di tata letak XML

BottomSheetBehavior adalah kelas dari Material Components yang dapat dilampirkan ke View mana pun dan mengelola posisinya di layar. Pengembang menetapkan tiga status: STATE_COLLAPSED (tertutup), STATE_EXPANDED (terbuka), dan STATE_HIDDEN (tersembunyi). Behavior secara otomatis menangani gerakan drag dan animasi.

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

Bottom Sheet di Jetpack Compose

Jetpack Compose menyediakan API yang lebih deklaratif melalui komponen ModalBottomSheet dari Material 3. Berbeda dengan pendekatan View, Bottom Sheet di Compose adalah fungsi composable yang menerima status dan konten. Sheet secara otomatis menganimasikan kemunculan, penyembunyian, dan perubahan tinggi saat drag.

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

BottomSheetDialogFragment untuk skenario modal

BottomSheetDialogFragment adalah DialogFragment khusus yang ditampilkan sebagai Bottom Sheet. Ia secara otomatis menangani modalitas, siklus hidup, dan perubahan konfigurasi. Pengembang hanya perlu menimpa onCreateView dan mengembalikan tata letak Sheet. Menurut dokumentasi Google (Android Developers, 2024), BottomSheetDialogFragment adalah metode yang direkomendasikan untuk Bottom Sheet modal di Android klasik.

Sheet di iOS: UISheetPresentationController dan SwiftUI

Apple memperkenalkan dukungan sistem untuk Sheet mulai dari iOS 15 melalui UISheetPresentationController. Sebelumnya, pengembang mengimplementasikan Bottom Sheet secara manual melalui custom transition atau pustaka pihak ketiga. Sheet native Apple mendukung detents — tingkat pembukaan yang telah ditentukan.

UISheetPresentationController di UIKit

UISheetPresentationController adalah kontroler presentasi bawaan yang menampilkan View Controller sebagai Sheet. Pengembang menetapkan array detents — nilai tinggi di mana Sheet dapat berhenti. iOS 16 menambahkan custom detents dengan tinggi sembarang. Apple merekomendasikan penggunaan detents medium (.medium) dan large (.large) sebagai yang utama.

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

Modifier .sheet di SwiftUI

SwiftUI menyediakan modifier .sheet yang mengikat tampilan Sheet ke status. Ketika variabel published menjadi true, SwiftUI secara otomatis menampilkan Sheet. SwiftUI juga mendukung detents melalui modifier .presentationDetents, yang ditambahkan di 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 di framework lintas platform: Flutter dan React Native

Framework lintas platform juga mendukung Bottom Sheet, menyesuaikan perilaku dengan platform target. Flutter dan React Native menyediakan implementasi bawaan dan kustom dengan tingkat fleksibilitas yang berbeda.

Bottom Sheet di Flutter

Flutter SDK berisi dua metode untuk menampilkan Bottom Sheet: showBottomSheet (standar) dan showModalBottomSheet (modal). Material Design di Flutter mengikuti prinsip yang sama seperti di Android — Sheet muncul dari bawah, mendukung drag, dan tinggi yang dapat dikonfigurasi. Untuk perilaku diperluas dengan detents, digunakan DraggableScrollableSheet.

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 di React Native

React Native tidak memiliki komponen Bottom Sheet bawaan di intinya, sehingga pengembang menggunakan pustaka pihak ketiga. Yang paling populer adalah @gorhom/bottom-sheet (lebih dari 7 ribu bintang di GitHub, 2024). Ini menyediakan Bottom Sheet berbasis gesture dengan dukungan snap points, animasi, dan header tetap. Pustaka ini ditulis dengan Reanimated 2 dan Gesture Handler untuk performa 60 FPS.

Praktik terbaik dan kesalahan umum

Penggunaan yang benar Bottom Sheet memerlukan kepatuhan terhadap panduan platform dan pemahaman tentang skenario di mana Sheet tepat digunakan. Mari kita lihat rekomendasi utama dan kesalahan umum saat merancang Sheet.

Kapan menggunakan Bottom Sheet

Bottom Sheet optimal untuk tindakan yang bersifat tambahan terhadap konten utama di layar. Filter, pengurutan, pemilihan opsi, informasi singkat tentang elemen — skenario yang umum. Material Design merekomendasikan penggunaan Sheet untuk alat yang tidak boleh memenuhi seluruh layar, tetapi membutuhkan lebih banyak ruang daripada Action Sheet atau Popup Menu.

Kapan TIDAK menggunakan Bottom Sheet

Jangan gunakan Bottom Sheet untuk peringatan kritis atau kesalahan — untuk ini gunakan jendela dialog. Hindari Sheet dengan banyak bidang input yang memerlukan scroll: pengguna kesulitan mencapai keyboard dan kehilangan konteks. Jika Sheet berisi lebih dari tujuh elemen tindakan, pertimbangkan layar terpisah sebagai ganti Sheet.

Kesalahan: mode collapsed terlalu tinggi

Kesalahan umum adalah menetapkan peekHeight (tinggi dalam status collapsed) lebih dari 40% layar. Pengguna tidak memahami apakah mereka melihat Sheet secara penuh atau dapat memperluasnya. Material Design merekomendasikan peekHeight dalam kisaran 15-30% tinggi layar untuk menyisakan bagian konten yang tersembunyi dan mendorong drag.

Kesalahan: mengabaikan gesture geser di iOS

Di iOS, pengguna mengharapkan Sheet dapat ditutup dengan menggeser ke bawah dari posisi mana pun. Jika Anda menonaktifkan gesture ini (melalui UISheetPresentationController.prefersEdgeAttachedInCompactHeight), pengguna akan frustrasi saat mencoba menutup Sheet dengan cara biasa. Apple Human Interface Guidelines (2024) menekankan bahwa geser untuk menutup adalah ekspektasi dasar pengguna iOS.