Reputation: 149
Ho do i add animation to a widget in a stateful widget in flutter?
I have a stateful widget where i have a button that controls the visibility of a container, when this button is tapped, the container is shown, and when tapped again, the container is hidden.
How do i add animation so when the container is being hidden and visible it appear like a dropdown menu?
For clarification i will add both picture and code
Image:
Above image, when you tap the drop down button again, the content details is hidden.
Code :
Padding(
padding: const EdgeInsets.only(
left: 22.0, right: 22.0, top: 15.0, bottom: 5.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Job details ',
style: GoogleFonts.poppins(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Color(0xff34495E)),
),
controller.isDropDownVisible.isFalse
? IconButton(
onPressed: () {
setState(() {
controller.toggleDropDownVisibility();
});
},
icon: Icon(
Icons.expand_more,
),
color: Color(0xff3498DB),
)
: IconButton(
onPressed: () {
setState(() {
controller.toggleDropDownVisibility();
});
},
icon: Icon(
Icons.expand_less,
),
color: Color(0xff3498DB),
)
],
),
),
Divider(
color: Color(0xff34495E).withOpacity(0.1),
thickness: 2,
),
controller.isDropDownVisible.isTrue
? Container(
color: Color(0xffF5F5F5),
child: Padding(
padding:
const EdgeInsets.only(left: 22.0, right: 22),
child: Table(
border: TableBorder(
horizontalInside: BorderSide(
strokeAlign: 10,
color: Color(0xff34495E).withOpacity(0.1),
),
),
defaultColumnWidth: const IntrinsicColumnWidth(),
children: [
TableRow(
children: [
Padding(
padding: EdgeInsets.all(8.0),
child: Text(
'Title',
style: GoogleFonts.poppins(
fontSize: 10,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.italic,
color: Color(0xff34495E)
.withOpacity(0.8)),
),
),
Padding(
padding: EdgeInsets.all(8.0),
child: Text(
'Asoebi Gown',
style: GoogleFonts.poppins(
fontSize: 12,
fontWeight: FontWeight.w400,
color: Color(0xff34495E)
.withOpacity(0.8)),
),
),
],
),
TableRow(
children: [
Padding(
padding: EdgeInsets.all(8.0),
child: Text(
'Quantity',
style: GoogleFonts.poppins(
fontSize: 10,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.italic,
color: Color(0xff34495E)
.withOpacity(0.8)),
),
),
Padding(
padding: EdgeInsets.all(8.0),
child: Text(
'12',
style: GoogleFonts.poppins(
fontSize: 12,
fontWeight: FontWeight.w400,
color: Color(0xff34495E)
.withOpacity(0.8)),
),
),
],
),
TableRow(
children: [
Padding(
padding: EdgeInsets.all(8.0),
child: Text(
'Description',
style: GoogleFonts.poppins(
fontSize: 10,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.italic,
color: Color(0xff34495E)
.withOpacity(0.8)),
),
),
Padding(
padding: EdgeInsets.all(8.0),
child: Text(
'Praesent vitae neque porta, hendrerit enim sed, temps ante. Suspendisse vitae massa neque. Praesent vitae neque porta, hendrerit enim sed, tempus ante.',
style: GoogleFonts.poppins(
fontSize: 12,
fontWeight: FontWeight.w400,
color: Color(0xff34495E)
.withOpacity(0.8)),
),
),
],
),
TableRow(
children: [
Padding(
padding: EdgeInsets.all(8.0),
child: Text(
'Phone',
style: GoogleFonts.poppins(
fontSize: 10,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.italic,
color: Color(0xff34495E)
.withOpacity(0.8)),
),
),
Padding(
padding: EdgeInsets.all(8.0),
child: Text(
'09077338833',
style: GoogleFonts.poppins(
fontSize: 12,
fontWeight: FontWeight.w400,
color: Color(0xff34495E)
.withOpacity(0.8)),
),
),
],
),
TableRow(
children: [
Padding(
padding: EdgeInsets.all(8.0),
child: Text(
'Date to complete',
style: GoogleFonts.poppins(
fontSize: 10,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.italic,
color: Color(0xff34495E)
.withOpacity(0.8)),
),
),
TableCell(
verticalAlignment:
TableCellVerticalAlignment.fill,
child: Row(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: EdgeInsets.all(8.0),
child: Text(
'05-03-22',
style: GoogleFonts.poppins(
fontSize: 12,
fontWeight: FontWeight.w400,
color: Color(0xff34495E)
.withOpacity(0.8)),
),
),
Container(
decoration: BoxDecoration(
color: Color.fromRGBO(
50, 151, 219, 0.09),
borderRadius:
BorderRadius.circular(20),
),
child: Padding(
padding:
const EdgeInsets.all(8.0),
child: Text(
'15 days',
style: GoogleFonts.poppins(
fontSize: 10,
fontWeight:
FontWeight.w400,
fontStyle:
FontStyle.italic,
color: Color(0xff34495E)),
),
),
),
],
)),
],
),
],
),
),
)
: SizedBox(),
This is my controller :
final isDropDownVisible = false.obs;
oid toggleDropDownVisibility() {
isDropDownVisible.value = !isDropDownVisible.value;
}
I know nothing about flutter animations apart from AnimatedContainer but in this logic, i don't think i have to use AnimatedContainer and even if i do, i don't know how to implement it.
Lastly I would also need help removing the extra padding as seen in the image below after my divider when the visible container is shown.
Upvotes: 0
Views: 115
Answers (1)
Reputation: 644
What you want is the ExpansionPanel Widget. It will require you to completely rework your code though. It also needs the ExpansionPanelList. To be clear the ExpansionPanelList is a list of ExpansionPanels.
Upvotes: 1