
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 🙂