Halo sobat Flutter! Pada artikel kali ini saya ingin membahas tentang “Flutter Dialog Box Animation”.
- Buat class baru dengan nama _openDialogBox{]
_openDialogBox2() {}2. Tambahkan return dibawahnya kemudian panggil widget showGeneralDialog();
_openDialogBox2() {
return showGeneralDialog(
);
}
3. Create class baru untuk custon openDialogBox dengan nama animations.dart. Kemudian buat codingan seperti dibawah ini.
import 'package:flutter/material.dart';
class Animations {
static fromBottom(Animation<double> _animation,
Animation<double> _secondaryAnimation, Widget _child) {
return SlideTransition(
child: _child,
position: Tween<Offset>(end: Offset.zero, begin: Offset(0.0, 1.0))
.animate(_animation),
);
}
}
Pada custom animations yang saya praktekan, saya menggunakan animation direction dari bottom to top.
4. Kembali pada class openDialogBox(), kemudian panggil class animations untuk custom pada class openDialogBox
_openDialogBox2() {
return showGeneralDialog(
context: context,
barrierLabel: '',
transitionDuration: Duration(milliseconds: 600), //untuk memberi durasi pada dialog box
barrierDismissible: true,
transitionBuilder: (context, _animation, _secondaryAnimation, _child) {
return Animations.fromBottom(_animation, _secondaryAnimation, _child);
},
);
}5. Panggil pageBuilder kemudian masukkan codingan berikut :
pageBuilder: (_animation, _secondaryAnimation, _child)6. Kemudian panggil widget AlertDialog.
_openDialogBox2() {
return showGeneralDialog(
context: context,
barrierLabel: '',
transitionDuration: Duration(milliseconds: 600),
barrierDismissible: true,
transitionBuilder: (context, _animation, _secondaryAnimation, _child) {
return Animations.fromBottom(_animation, _secondaryAnimation, _child);
},
pageBuilder: (_animation, _secondaryAnimation, _child) {
return AlertDialog(
);
});
}7.Terakhir custom widget Alert Dialog sesuai keinginan
return AlertDialog(
content: Container(
height: 323,
width: 320,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Attendance ",
style: TextStyle(
fontSize: 18,
color: Color(0xff27AE60),
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: 15,
),
Text(
"Type Permit",
style: TextStyle(fontSize: 12, color: Colors.black),
),
SizedBox(
height: 5,
),
Container(
height: 35,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(2),
color: Colors.white,
boxShadow: [
BoxShadow(color: Colors.grey),
]),
child: TextFormField(
decoration: InputDecoration(
hintStyle: TextStyle(fontSize: 14),
hintText: 'Sakit',
border: InputBorder.none,
contentPadding: EdgeInsets.all(10),
),
),
),
SizedBox(
height: 15,
),
Text(
"Dari Tanggal",
style: TextStyle(fontSize: 12, color: Colors.black),
),
SizedBox(
height: 5,
),
Container(
height: 35,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(2),
color: Colors.white,
boxShadow: [
BoxShadow(color: Colors.grey),
]),
child: TextFormField(
decoration: InputDecoration(
hintStyle: TextStyle(fontSize: 14),
hintText: '07 Oktober 2021',
border: InputBorder.none,
contentPadding: EdgeInsets.all(10),
),
),
),
SizedBox(
height: 15,
),
Text(
"Sampai Tanggal",
style: TextStyle(fontSize: 12, color: Colors.black),
),
SizedBox(
height: 5,
),
Container(
height: 35,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(2),
color: Colors.white,
boxShadow: [
BoxShadow(color: Colors.grey),
]),
child: TextFormField(
decoration: InputDecoration(
hintStyle: TextStyle(fontSize: 14),
hintText: '09 Oktober 2021',
border: InputBorder.none,
contentPadding: EdgeInsets.all(10),
),
),
),
SizedBox(
height: 25,
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
MaterialButton(
elevation: 1,
height: 28,
minWidth: 75,
color: Colors.white,
child: Container(
child: Center(
child: Text(
"Decline",
style: TextStyle(color: Colors.red),
)),
),
onPressed: () {}),
SizedBox(
width: 10,
),
MaterialButton(
height: 28,
minWidth: 75,
color: Color(0xff27AE60),
child: Container(
child: Center(
child: Text(
"Approve",
style: TextStyle(color: Colors.white),
)),
),
onPressed: () {}),
],
),
],
)),
);
Berikut adalah hasil dari custom dialog.
Berikut codingan lengkap dari class openDialogBox
_openDialogBox2() {
return showGeneralDialog(
context: context,
barrierLabel: '',
transitionDuration: Duration(milliseconds: 600),
barrierDismissible: true,
transitionBuilder: (context, _animation, _secondaryAnimation, _child) {
return Animations.fromBottom(_animation, _secondaryAnimation, _child);
},
pageBuilder: (_animation, _secondaryAnimation, _child) {
return AlertDialog(
content: Container(
height: 323,
width: 320,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Attendance ",
style: TextStyle(
fontSize: 18,
color: Color(0xff27AE60),
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: 15,
),
Text(
"Type Permit",
style: TextStyle(fontSize: 12, color: Colors.black),
),
SizedBox(
height: 5,
),
Container(
height: 35,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(2),
color: Colors.white,
boxShadow: [
BoxShadow(color: Colors.grey),
]),
child: TextFormField(
decoration: InputDecoration(
hintStyle: TextStyle(fontSize: 14),
hintText: 'Sakit',
border: InputBorder.none,
contentPadding: EdgeInsets.all(10),
),
),
),
SizedBox(
height: 15,
),
Text(
"Dari Tanggal",
style: TextStyle(fontSize: 12, color: Colors.black),
),
SizedBox(
height: 5,
),
Container(
height: 35,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(2),
color: Colors.white,
boxShadow: [
BoxShadow(color: Colors.grey),
]),
child: TextFormField(
decoration: InputDecoration(
hintStyle: TextStyle(fontSize: 14),
hintText: '07 Oktober 2021',
border: InputBorder.none,
contentPadding: EdgeInsets.all(10),
),
),
),
SizedBox(
height: 15,
),
Text(
"Sampai Tanggal",
style: TextStyle(fontSize: 12, color: Colors.black),
),
SizedBox(
height: 5,
),
Container(
height: 35,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(2),
color: Colors.white,
boxShadow: [
BoxShadow(color: Colors.grey),
]),
child: TextFormField(
decoration: InputDecoration(
hintStyle: TextStyle(fontSize: 14),
hintText: '09 Oktober 2021',
border: InputBorder.none,
contentPadding: EdgeInsets.all(10),
),
),
),
SizedBox(
height: 25,
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
MaterialButton(
elevation: 1,
height: 28,
minWidth: 75,
color: Colors.white,
child: Container(
child: Center(
child: Text(
"Decline",
style: TextStyle(color: Colors.red),
)),
),
onPressed: () {}),
SizedBox(
width: 10,
),
MaterialButton(
height: 28,
minWidth: 75,
color: Color(0xff27AE60),
child: Container(
child: Center(
child: Text(
"Approve",
style: TextStyle(color: Colors.white),
)),
),
onPressed: () {}),
],
),
],
)),
);
});
}Terakhir, berikut codingan lengkap dari class animations.dart
import 'package:flutter/material.dart';
class Animations {
static fromBottom(Animation<double> _animation,
Animation<double> _secondaryAnimation, Widget _child) {
return SlideTransition(
child: _child,
position: Tween<Offset>(end: Offset.zero, begin: Offset(0.0, 1.0))
.animate(_animation),
);
}
}
Selamat Mencoba Sobat Flutter 🙂