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.
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;
});
},
),
),
);
}
}