Halo sobat Flutter! Pada artikel kali ini saya ingin membahas tentang “How to adjust the height Bottom Sheet in Flutter?”.
- Pertama custom button sheet sesuai keinginan.
Padding(
padding: const EdgeInsets.only(top: 15, left: 20, right: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Sort By :",
style:
TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
InkWell(
child: Image(
image: AssetImage('assets/icons/close.png'),
height: 25,
width: 25,
color: Colors.black,
),
onTap: () {
Navigator.pop(context);
},
),
],
),
SizedBox(
height: 20,
),
Text(
"Status",
style: TextStyle(
fontSize: 18,
color: Colors.black,
fontWeight: FontWeight.bold),
),
SizedBox(
height: 5,
),
Row(
children: [
Container(
height: 41,
width: 85,
decoration: BoxDecoration(
color: Colors.white,
border:
Border.all(color: Color(0xffE5E5E5), width: 1),
borderRadius: BorderRadius.circular(5)),
child: Padding(
padding: EdgeInsets.all(10),
child: Text(
"Check In",
style: TextStyle(
fontSize: 14, color: Color(0xff333333)),
)),
),
SizedBox(
width: 5,
),
Container(
height: 41,
width: 92,
decoration: BoxDecoration(
color: Colors.white,
border:
Border.all(color: Color(0xffE5E5E5), width: 1),
borderRadius: BorderRadius.circular(5)),
child: Padding(
padding: EdgeInsets.all(10),
child: Text(
"CheckOut",
style: TextStyle(
fontSize: 14, color: Color(0xff333333)),
)),
),
],
),
SizedBox(
height: 15,
),
Text(
"Department",
style: TextStyle(
fontSize: 18,
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 5,
),
Container(
width: 196,
height: 41,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Color(0xffE5E5E5), width: 1),
borderRadius: BorderRadius.circular(5)),
child: Center(
child: Text(
"Mobile Developer (Kotlin)",
style: TextStyle(fontSize: 14),
)),
),
SizedBox(
height: 5,
),
Container(
width: 201,
height: 41,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Color(0xffE5E5E5), width: 1),
borderRadius: BorderRadius.circular(5)),
child: Center(
child: Text(
"Mobile Developer (Flutter)",
style: TextStyle(fontSize: 14),
)),
),
SizedBox(
height: 5,
),
Container(
width: 190,
height: 41,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Color(0xffE5E5E5), width: 1),
borderRadius: BorderRadius.circular(5)),
child: Center(
child: Text(
"Mobile Developer (Swift)",
style: TextStyle(fontSize: 14),
)),
),
SizedBox(height: 5),
Row(
children: [
Container(
width: 160,
height: 41,
decoration: BoxDecoration(
color: Colors.white,
border:
Border.all(color: Color(0xffE5E5E5), width: 1),
borderRadius: BorderRadius.circular(5)),
child: Center(
child: Text(
"Front End Developer",
style: TextStyle(fontSize: 14),
)),
),
SizedBox(
width: 5,
),
Container(
width: 158,
height: 41,
decoration: BoxDecoration(
color: Colors.white,
border:
Border.all(color: Color(0xffE5E5E5), width: 1),
borderRadius: BorderRadius.circular(5)),
child: Center(
child: Text(
"Back End Developer",
style: TextStyle(fontSize: 14),
)),
),
],
),
SizedBox(height: 5),
Row(
children: [
Container(
width: 99,
height: 41,
decoration: BoxDecoration(
color: Colors.white,
border:
Border.all(color: Color(0xffE5E5E5), width: 1),
borderRadius: BorderRadius.circular(5)),
child: Center(
child: Text(
"UI Designer",
style: TextStyle(fontSize: 14),
)),
),
SizedBox(
width: 5,
),
Container(
width: 99,
height: 41,
decoration: BoxDecoration(
color: Colors.white,
border:
Border.all(color: Color(0xffE5E5E5), width: 1),
borderRadius: BorderRadius.circular(5)),
child: Center(
child: Text(
"UX Designer",
style: TextStyle(fontSize: 14),
)),
),
],
),
SizedBox(height: 5),
Container(
width: 142,
height: 41,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Color(0xffE5E5E5), width: 1),
borderRadius: BorderRadius.circular(5)),
child: Center(
child: Text(
"Graphic Designer",
style: TextStyle(fontSize: 14),
)),
),
SizedBox(
height: 30,
),
MaterialButton(
height: 41,
minWidth: double.infinity,
color: Color(0xff27AE60),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
),
child: Center(
child: Text(
"OK",
style: TextStyle(
fontSize: 14,
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
onPressed: () {})
],
),
),2. Kemudian setelah selesai, tambahkan condingan berikut pada widget Button Sheet yang sudah di Custome.
showModalBottomSheet<dynamic>(
isScrollControlled: true,
),3. Terakhir ,tambahkan return Container(), atau wrap Padding dengan Container(), dan tambahkan MediaQuery dan sesuaikan tinggi dengan kebutuhan button sheet yang diinginkan.
builder: (BuildContext bc) {
return Container(
height: MediaQuery.of(context).size.height * 0.83, // tambahkan ini untuk tinggi dari Button Sheet
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(25.0),
topRight: const Radius.circular(25.0),
),
),
);
},Media Query merupakan sebuah widget yang fungsinya dapat menyeting tampilan diberbagai device dan berbagai resolusi. dari lebar dan tingginya device secara spesifik.