Flutter animated container change size of child widget - flutter

Question

I'm trying to create a container in which I can perform two gesture: onTapDown and onTapUp. I want to decrease the dimension of my container when I perform onTapDown.
What I want is something like that:
https://i.imgur.com/7hW2Cn1.gifv
The problem is that if I work with AnimatedController I need to resize also the children and it's a mess.
I also looked to the flutter_bounce library but what I want is not something based on a duration. If the user keep pressed the container maintains the state of pressed.
class CustomContainerState extends State<CustomContainer> {
double width = 90.w;
double height = 35.h;
#override
Widget build(BuildContext context) {
return GestureDetector(
child: Center(
child: AnimatedContainer(
duration: Duration(milliseconds: 200),
margin: EdgeInsets.only(left: 5.w, right: 5.w),
width: width,
height: height,
child: Column(
children: [
Container(
width: 90.w,
height: 25.h,
decoration: BoxDecoration(
color: green400,
borderRadius: BorderRadius.only(topLeft: Radius.circular(5.w), topRight: Radius.circular(5.w)),
),
),
Container(
margin: EdgeInsets.only(left: 5.w, right: 5.w, top: 1.h, bottom: 1.h),
width: 90.w,
height: 8.h,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(bottomLeft: Radius.circular(5.w), bottomRight: Radius.circular(5.w)),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Text(
"Ratings",
style: TextStyle(
fontFamily: "SanFrancisco",
fontSize: 10.sp,
fontWeight: FontWeight.w400,
overflow: TextOverflow.ellipsis,
),
),
Text(
"Title",
style: TextStyle(
fontFamily: "SanFrancisco",
fontSize: 12.sp,
fontWeight: FontWeight.w600,
overflow: TextOverflow.ellipsis,
),
),
Text(
"Description",
style: TextStyle(
fontFamily: "SanFrancisco",
fontSize: 10.sp,
fontWeight: FontWeight.w400,
overflow: TextOverflow.ellipsis,
),
),
],
),
),
],
),
),
),
onTapDown: (tapDownDetails) {
setState(() {
width = 85.w;
height = 30.h;
});
},
onTapUp: (TapUpDetails) {
setState(() {
width = 90.w;
height = 35.h;
});
},
);
}
}
The problem so is how to decrease only the parent container that automatically decrease also the children? Because I can use multiple AnimatedContainer also for the children but the problem is that the text is not animated.

Answer 1

Have you tried with scale instead of changing width and height? Something like this:
class CustomContainerState extends State<CustomContainer> {
double width = 90;
double height = 350;
double scale = 1;
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: GestureDetector(
child: Center(
child: AnimatedContainer(
transform: Matrix4.identity()..scale(scale),
color: Colors.green,
duration: Duration(milliseconds: 200),
margin: EdgeInsets.only(left: 5, right: 5),
width: width,
height: height,
child: Column(
children: [
Container(
width: 90,
height: 25,
decoration: BoxDecoration(
// color: green400,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5),
topRight: Radius.circular(5)),
),
),
Container(
margin: EdgeInsets.only(
left: 5, right: 5, top: 1, bottom: 1),
width: 90,
height: 80,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(5),
bottomRight: Radius.circular(5)),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Text(
"Ratings",
style: TextStyle(
fontFamily: "SanFrancisco",
fontSize: 10,
fontWeight: FontWeight.w400,
overflow: TextOverflow.ellipsis,
),
),
Text(
"Title",
style: TextStyle(
fontFamily: "SanFrancisco",
fontSize: 12,
fontWeight: FontWeight.w600,
overflow: TextOverflow.ellipsis,
),
),
Text(
"Description",
style: TextStyle(
fontFamily: "SanFrancisco",
fontSize: 10,
fontWeight: FontWeight.w400,
overflow: TextOverflow.ellipsis,
),
),
],
),
),
],
),
),
),
onTapDown: (tapDownDetails) {
setState(() {
// width = 85;
// height = 300;
scale = .8;
});
},
onTapUp: (TapUpDetails) {
setState(() {
// width = 90;
// height = 350;
scale = 1;
});
},
),
),
);
}
}