Modal Bottom Sheet adalah komponen antarmuka pengguna yang umum digunakan dalam pengembangan aplikasi Flutter untuk menampilkan opsi atau informasi tambahan kepada pengguna. Bottom Sheet ini muncul dari bagian bawah layar dan memberikan pengalaman pengguna yang bersih dan terorganisir. Dalam artikel ini, kita akan menjelajahi cara menampilkan Modal Bottom Sheet dalam proyek Flutter.

Apa itu Modal Bottom Sheet?

Modal Bottom Sheet adalah widget yang muncul dari bawah layar dan memberikan tampilan tambahan atau opsi kepada pengguna tanpa menggantikan tampilan utama aplikasi. Dengan menggunakan Modal Bottom Sheet, kita dapat menyajikan informasi tambahan atau opsi dengan cara yang bersih dan efektif.

Output

Implementasi Modal Bottom Sheet

main.dart

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BottomSheetPage (),
    );
  }
}

bottomsheet.dart

import 'package:flutter/material.dart';

class BottomSheetPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.lightBlueAccent,
        title: Text('Modal Bottom Sheet Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showModalBottomSheet(
              context: context,
              builder: (BuildContext context) {
                return Container(
                  height: 200.0,
                  color: Colors.white,
                  child: Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Text(
                          'This is a Modal Bottom Sheet',
                          style: TextStyle(fontSize: 18.0),
                        ),
                        SizedBox(height: 20.0),
                        ElevatedButton(
                          onPressed: () {
                            Navigator.pop(context);
                          },
                          child: Text('Close'),
                        ),
                      ],
                    ),
                  ),
                );
              },
            );
          },
          child: Text('Show Modal Bottom Sheet'),
        ),
      ),
    );
  }
}

Dalam kode di atas, kita memiliki proyek Flutter sederhana dengan satu layar utama (BottomSheetPage ). Pada layar utama, terdapat tombol “Show Modal Bottom Sheet”. Ketika tombol tersebut ditekan, kita menggunakan fungsi showModalBottomSheet untuk menampilkan Modal Bottom Sheet.

Analisis Kode

1. showModalBottomSheet Function: Kita menggunakan fungsi ini untuk menampilkan Modal Bottom Sheet. Fungsi ini membutuhkan dua parameter, yaitu context dan builder.
2. builder Parameter: Kita memberikan widget Container sebagai konten dari Modal Bottom Sheet. Di dalamnya, kita menambahkan teks dan tombol untuk memberikan contoh fungsionalitas.
3. Menyesuaikan Konten: Sesuaikan konten Modal Bottom Sheet sesuai dengan kebutuhan aplikasi Anda. Anda dapat menambahkan widget atau tata letak lainnya.
4. Menutup Modal Bottom Sheet: Pada contoh ini, kita menambahkan tombol “Close” untuk menutup Modal Bottom Sheet ketika ditekan.

Dengan mengikuti langkah-langkah sederhana ini, Anda dapat dengan mudah mengintegrasikan dan menampilkan Modal Bottom Sheet dalam proyek Flutter Anda untuk memberikan pengalaman pengguna yang lebih baik.