Flutter animated container change size of child widget

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.

score 1 · Accepted Answer · answered Mar 02 '22 at 12:57

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

Glad to help. Please check it as correct solution for community to easily find it in the future. — Ante Bule, Mar 02 '22 at 13:28

Flutter animated container change size of child widget

1 Answers1