Flutter: Animate z axis of a widget

Question

I want to animate a widget like this gif. i have tried to animate the elevation but didn't work as expected. also tried transform widget.

Answer 1

This is a ScaleTransition, you can't animate z axis.

class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
    AnimationController _controller;

    @override
    void initState() {
      super.initState();
      _controller = AnimationController(
        vsync: this,
        lowerBound: 0.8,
        upperBound: 1,
        duration: Duration(milliseconds: 500),
      )..repeat(reverse: true);
    }

    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(title: Text("Animation")),
        body: Center(
          child: ScaleTransition(scale: _controller, child: FlutterLogo(size: 200)),
        ),
      );
    }
}

Answer 2

In case you need the code , I made an example :

    class AnimatedSample extends StatefulWidget {
      @override
      _AnimatedSampleState createState() => _AnimatedSampleState();
    }

    class _AnimatedSampleState extends State<AnimatedSample>
        with SingleTickerProviderStateMixin {
      AnimationController _controller;

      @override
      void initState() {
        super.initState();
        _controller = AnimationController(
            vsync: this,
            lowerBound: 0.8,
            upperBound: 1.2,
            duration: Duration(seconds: 1));

        _controller.repeat(reverse: true);
      }

      @override
      void dispose() {
        super.dispose();
        _controller.dispose();
      }

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Center(
            child: Container(
              margin: EdgeInsets.all(10),
              height: 100,
              color: Colors.grey[400],
              child: Row(children: [
                SizedBox(
                  width: 20,
                ),
                AnimatedBuilder(
                  animation: _controller,
                  child: Icon(
                    Icons.notifications,
                    size: 35,
                    color: Colors.white,
                  ),
                  builder: (context, widget) =>
                      Transform.scale(scale: _controller.value, child: widget),
                ),
                SizedBox(
                  width: 20,
                ),
                Expanded(
                  child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: [
                        Text(
                          "Alert title",
                          style: TextStyle(
                              color: Colors.white,
                              fontSize: 23,
                              fontWeight: FontWeight.w600),
                        ),
                        Text(
                          "Alert text...",
                          style: TextStyle(color: Colors.white, fontSize: 17),
                        ),
                      ]),
                )
              ]),
            ),
          ),
        );
      }
    }