How to make custom animated Container from button of the app till half of the app screen

user_16213673 0
Viewed 297

expected behavior

enter image description here

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

dart flutter animation
1 Answers

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

user_118556540
Related