Floating Action Button with Bottom Sheet in Flutter

Halo sobat baraja coding, pada artikel kali ini kita akan membahas tentang Floating Action Button with Bottom Sheet in Flutter. Floating action button adalah tombol icon mengambang berbentuk lingkaran yang digunakan untuk mempromosikan tindakan atau menambahkan sesuatu pada halaman aplikasi.

Step 1. Buat Floating Action Button

Buat floating action button dengan menambahkan code seperti berikut 

floatingActionButton: FloatingActionButton(
        child: Icon(
          Icons.add,
          size: 30,
          color: Color(0xff219653),
        ),
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(10))),
        onPressed: () {},
        backgroundColor: Colors.white,
      ),

Step 2. Tambahkan Dependencies 

Tambahkan dependencies dotted_decoration pada pubspec.yml

dependencies:
  flutter:
    sdk: flutter
  dotted_decoration: ^2.0.0

Step 3. Tambahkan showModalBottomSheet

Tambahkan function showModalBottomSheet() onPressed Floating Action Button seperti berikut

showModalBottomSheet(
              context: context,
              builder: (context) {
                return Container(
                    height: 150,
                    padding: EdgeInsets.only(top: 15, left: 20, right: 20),
                    child: Column(mainAxisSize: MainAxisSize.min, children: [
                      Text(
                        “Tambah Baru”,
                        style: TextStyle(
                            fontSize: 14,
                            fontWeight: FontWeight.w500,
                            fontFamily: “Poppins”,
                            color: Colors.black),
                      ),
                      SizedBox(
                        height: 9,
                      ),
                      Container(
                          width: double.infinity,
                          height: 80,
                          decoration: DottedDecoration(
                            shape: Shape.box,
                            borderRadius: BorderRadius.circular(5),
                          ),
                          child: Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Text(
                                  “Upload Disini”,
                                  style: TextStyle(
                                      fontSize: 14,
                                      fontWeight: FontWeight.w500,
                                      fontFamily: “Poppins”,
                                      color: Color(0xffBDBDBD)),
                                )
                              ]))
                    ]));
              });

Hasil Run : 

Jadi sekian pada artikel kali ini, sampai jumpa pada artikel selanjutnya. Selamat Mencoba ­čÖé

spot_imgspot_img

Subscribe

Related articles

Memanfaatkan Include Dan Required Function Pada PHP

 Halo teman-teman sobat baraja udacoding, selamat datang kembali di...

CARA MEMBUAT KONEKSI DATABASE DI PHP

Halo teman-teman, selamat datang kembali di baraja uda coding....

Pseudo Class Dan Penggunaannya part 2

Anchor Pseudo-classesMerubah link dengan beberapa cara yang berbeda tergantung...

Gridview and Container with Random Colors

Hallo sobat flutter, selamat pagi, siang, sore, malam. Apa...

Mengenal Pseudo Element Dan Penggunaannya part 2

Seperti yang kita semua ketahui tentang Pseudo Element pada artikel...
spot_imgspot_img

LEAVE A REPLY

Please enter your comment!
Please enter your name here