expected behavior

i tried this code but it give me completely difference result from left side and strange animated

double val = 0;
    @override
      Widget build(BuildContext context) {
    
        return   Stack(
          children: [
    
            Container(
              height: 400,
              color: Colors.red,
            ),
            TweenAnimationBuilder(
                duration: const Duration(milliseconds: 150),
                tween: Tween<double>(begin: 0 , end:  val) ,
    
                builder: (BuildContext context, double? value, Widget? child) {
    
                  return (
                      Transform(
                          alignment: Alignment.center,
                          transform: Matrix4.identity()
                            ..setEntry(3, 2, 0.001)
                            ..setEntry(0, 3, 200 * value!)
                            ..rotateY((pi/6)*value),
                          child:  DefaultTabController(
                              length: 5,
                              child: Scaffold(
    
    
                                  body:   Center(
                                    child: Container(
                                      color: Colors.yellowAccent,
                                      child: IconButton(
                                        onPressed: () {
                                          setState(() {
                                            setState(() {
                                              val == 0 ? val = 1 : val = 0 ;
                                            });
                                          });
                                        },
                                        icon: Text('tab me'),
    
                                      ),
                                    ),
                                  )
    
                              )
                          )
                      )
                  );
    
                }
            )
          ],
        );
    
    
    
      }

also i need only the red Container the one who animated from down to up , but i don't know why the main screen is also animate .. i need it never animated ..

any suggestion most welcome guys .. thanks

CodePudding user response：

Instead of custom animation, you can use AnimatedContainer().

Create a boolean like selected which will tell the animated container when to close and when to open the container. And using setState you can toggle the animation.

Align your AnimatedContainer() with Align() and give alignment: Alignment.bottomCenter. And give height:0 is not selected and when selected give height the half of screen using MediaQuery.of(context)

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  bool selected = false;

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      ElevatedButton(
        onPressed: () {
          setState(() {
            selected = !selected;
          });
        },
        child: Text("Tap Me!!"),
      ),
      Spacer(),
      GestureDetector(
        onTap: () {
          setState(() {
            selected = !selected;
          });
        },
        child: Align(
          alignment: Alignment.bottomCenter,
          child: AnimatedContainer(
            width: double.infinity,
            height: selected ? MediaQuery.of(context).size.height / 2 : 0,
            color: selected ? Colors.red : Colors.blue,
            alignment:
                selected ? Alignment.center : AlignmentDirectional.topCenter,
            duration: const Duration(seconds: 2),
            curve: Curves.fastOutSlowIn,
            child: const FlutterLogo(size: 75),
          ),
        ),
      )
    ]);
  }
}

You can try the same code in dartpad here