Cara Menggunakan Bottom Sheet pada Flutter Development

Hello people spirit of learning!

Dalam aplikasi ketika melakukan suatu interaksi di dalamnya, terdapat muncul dar bawah Pop up container atau lembaran yang berisi komponen-komponen yang bisa kita gunakan. dalam pengembangan aplikasi tersebut, kita bisa menggunakan lembaran tersebut dengan widget showModalBottomSheet. Fungsinya agar kita bisa membuat komponenen atau menu tanpa membuat halaman baru lagi. Langsung saja masuk ke dalam tutorialnya.

1. Kita membuat button sederhana

void main(List<String> args) {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: page(),
    );
  }
}

class page extends StatelessWidget {
  const page({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: ElevatedButton(onPressed: () {}, child: Text('Click me')),
    ));
  }
}

Pertama, kita buat button terlebih dahulu yang nantinya saat kita klik muncul Pop up lembaran yang akan kita buat nanti.

2. Pada properti OnPressed, kita isi dengan showmodalbottomsheet

onPressed: () {
            showModalBottomSheet(
                shape: RoundedRectangleBorder(
                    borderRadius:
                        BorderRadius.vertical(top: Radius.circular(32))),
                context: context,
                builder: (BuildContext context) => Container());
          },

Kedua kita isi widget dengan showModalBottomSheet dan properti yang harus diisi ialah context dan builder, Fungsinya adalah agar kita bisa menurunkan widget-widget yang biasa kita gunakan.

3. Membuat state widget untuk isi content

class content extends StatelessWidget {
  const content({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      child: Column(children: [
        Center(
          child: Container(
            width: MediaQuery.of(context).size.width - (2 * 24),
            height: 60,
            child: TextFormField(
              scrollPadding: EdgeInsets.symmetric(vertical: 20),
              decoration: InputDecoration(
                  prefixIcon: Icon(
                    Icons.search,
                    color: Colors.grey,
                  ),
                  hintText: "Contoh membuat textformfield",
                  focusedBorder: OutlineInputBorder(
                      borderSide: BorderSide(color: Color(0xffE5E4E3)),
                      borderRadius: BorderRadius.circular(16)),
                  enabledBorder: OutlineInputBorder(
                      borderSide: BorderSide(color: Color(0xffE5E4E3)),
                      borderRadius: BorderRadius.circular(16))),
            ),
          ),
        ),
      ]),
    );
  }
}

Langkah ketiga kita membuat stateless widget khusus untuk isi dari content modal bottom sheet. Disini saya isi dengan cara membuat TextFormField.

4. Implementasi ke dalam showModalBottomSheet

onPressed: () {
            showModalBottomSheet(
                shape: RoundedRectangleBorder(
                    borderRadius:
                        BorderRadius.vertical(top: Radius.circular(32))),
                context: context,
                builder: (BuildContext context) => content());
          },

Yang terakhir tinggal kita impementasikan ke dalam buildernya, Maka saat kita klik tombolnya maka akan keluar bottom sheet dan berisikan content textformfield.

Terima kasih dan semoga bermanfaat!