Halo teman Flutter! Pada artikel kali ini saya ingin membahas tentang Bottom Sheet Full Screen in Flutter”.
Bottom Sheet adalah salah satu komponen material widget Flutter. Bottom Sheet merupakan menu pilihan yang pada umumnya disembunyikan dibagian bawah layar, yang bisa ditarik keatas untuk menampilkan menu layar tersebut.
- Buat Class stful baru dengan nama listFloating
class listFloating extends StatefulWidget {
const listFloating({Key? key}) : super(key: key);
@override
_listFloatingState createState() => _listFloatingState();
}
class _listFloatingState extends State<listFloating> {
@override
Widget build(BuildContext context) {
return Scaffold();
}
}
2. Kemudian build UI sesuai kebutuhan
class listFloating extends StatefulWidget {
const listFloating({Key? key}) : super(key: key);
@override
_listFloatingState createState() => _listFloatingState();
}
class _listFloatingState extends State<listFloating> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Padding(
padding: const EdgeInsets.only(top: 20),
child: Column(
children: [
Row(
children: [
IconButton(
icon: Icon(Icons.arrow_back_ios),
color: Color(0xff13A89E),
onPressed: () {
Navigator.pop(context);
},
),
SizedBox(
width: 20,
),
Text(
'Pilih Ustadz',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
color: Color(0xff333333)),
),
],
),
Container(
height: 600,
child: ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
physics: ClampingScrollPhysics(),
itemCount: floating.length,
itemBuilder: (context, index) {
return SingleChildScrollView(
physics: NeverScrollableScrollPhysics(),
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(10.0),
child: Row(
children: [
Image(
image: AssetImage(
'assets/icons/${floating[index]['gambar']}'),
height: 40,
width: 40,
),
SizedBox(
width: 20,
),
Text(
'${floating[index]['nama']}',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
color: Colors.black),
),
],
),
),
Divider(
thickness: 0.5,
color: Color(0xff828282),
)
],
));
}),
),
],
),
),
);
}
}
3. Terakhir panggil Bottom Sheet didalam onPressed()
onPressed: () {
showModalBottomSheet(
isScrollControlled: true,
context: context,
builder: (context) => );
},
4. Panggil class listFloating didalam builder seperti berikut
onPressed: () {
showModalBottomSheet(
isScrollControlled: true,
context: context,
builder: (context) => listFloating());
},
Hasil Running Aplikasi :
Selamat Mencoba sobat Flutter 🙂