Menerapkan Modal Bottom Sheet untuk Interaksi Pengguna yang Lebih Baik dalam Aplikasi Flutter

Mobile

Menerapkan Modal Bottom Sheet untuk Interaksi Pengguna yang Lebih Baik dalam Aplikasi Flutter

M. Dzikrul Hakim

July 21, 2023

Modal Bottom Sheet adalah komponen yang sering digunakan dalam aplikasi Flutter untuk menampilkan konten tambahan atau menu yang muncul dari bagian bawah layar. Penggunaan Modal Bottom Sheet dapat meningkatkan interaksi dengan pengguna, karena memungkinkan pengguna untuk dengan cepat mengakses opsi tambahan tanpa harus meninggalkan halaman saat ini. Dalam artikel ini, kita akan membahas tentang cara menampilkan Modal Bottom Sheet dalam Flutter dan memberikan contoh implementasinya.

Apa itu Modal Bottom Sheet?

Modal Bottom Sheet adalah tampilan semi-transparan yang muncul dari bagian bawah layar dan menampilkan konten tambahan. Biasanya digunakan untuk menampilkan pilihan atau opsi tambahan kepada pengguna, seperti menu, filter, atau detail tambahan. Modal Bottom Sheet diberikan prioritas tinggi karena tampilannya yang menutupi sebagian layar, dan biasanya dimunculkan dengan gestur atau tindakan pengguna tertentu.

Cara Menampilkan Modal Bottom Sheet di Flutter

Flutter menyediakan fungsi showModalBottomSheet untuk menampilkan Modal Bottom Sheet. Fungsi ini mengambil BuildContext dan builder sebagai parameter. Builder digunakan untuk membangun widget yang akan ditampilkan dalam Modal Bottom Sheet.

Contoh Implementasi

Berikut adalah contoh sederhana tentang cara menampilkan Modal Bottom Sheet dalam aplikasi Flutter:

import ‘package:flutter/material.dart’;
import ‘package:flutter/src/widgets/framework.dart’;
import ‘package:flutter/src/widgets/placeholder.dart’;

class ArtikelPage19 extends StatefulWidget {
const ArtikelPage19({super.key});

@override
State<ArtikelPage19> createState() => _ArtikelPage19State();
}

class _ArtikelPage19State extends State<ArtikelPage19> {
dialog() async {
await showModalBottomSheet<void>(
context: context,
builder: (BuildContext context) {
return Container(
padding: const EdgeInsets.all(20.0),
child: Wrap(
children: [
SizedBox(
width: MediaQuery.of(context).size.width,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(‘Apakah anda yakin ingin close?’),
const SizedBox(
height: 20.0,
),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blueGrey,
),
onPressed: () {
Navigator.pop(context);
},
child: const Text(“Ok”),
),
],
),
),
],
),
);
},
);
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(‘Show modal bottom sheet’), centerTitle: true),
body: Center(
child: ElevatedButton(
onPressed: () {
dialog();
},
child: Text(‘Tampilkan bottom sheet’),
),
),
);
}
}

Berikut adalah visualisasinya :

Dalam contoh di atas, kita menggunakan fungsi showModalBottomSheet untuk menampilkan Modal Bottom Sheet. Ketika tombol ditekan, Modal Bottom Sheet akan muncul dengan dua pilihan: “Edit” dan “Hapus”. Ketika pengguna memilih salah satu dari pilihan tersebut, Modal Bottom Sheet akan ditutup.

Kesimpulan

Modal Bottom Sheet adalah komponen yang bermanfaat untuk menampilkan konten tambahan atau opsi tambahan dalam aplikasi Flutter. Dalam artikel ini, kita telah membahas tentang cara menampilkan Modal Bottom Sheet dalam Flutter dan memberikan contoh implementasinya. Cobalah mengintegrasikan Modal Bottom Sheet dalam proyek Flutter Anda untuk memberikan pengalaman pengguna yang lebih baik dan interaktif.