title: Animate multiple widgets on same screen flutter
body: <p><a href="https://i.stack.imgur.com/bSJs5.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bSJs5.gif" alt="animation"></a></p>
  
  <p>I need slide animation from left to right and vice versa.</p>
  
  <p>Can anyone give me any guidance which widget i should use in it?
  I have tried a few thing like :- <a href="https://github.com/serenader2014/flutter_carousel_slider" rel="nofollow noreferrer">carousel_slider</a>, <a href="https://github.com/best-flutter/transformer_page_view" rel="nofollow noreferrer">transformer_pageview</a>, <a href="https://github.com/roughike/page-transformer" rel="nofollow noreferrer">page_transformer</a></p>
  
  <p>I used <a href="https://api.flutter.dev/flutter/widgets/SlideTransition-class.html" rel="nofollow noreferrer">SlideTransition</a> class, but it is not giving me expected result, I have also tried different range/values of OffSet but no luck.</p>
  
  <pre><code>import 'package:flutter/cupertino.dart';
  import 'package:flutter/material.dart';
  import 'package:sliding_up_panel/sliding_up_panel.dart';
  
  class HomePage extends StatefulWidget {
    const HomePage({Key key}) : super(key: key);
  
    @override
    _HomePageState createState() =&gt; _HomePageState();
  }
  
  class _HomePageState extends State&lt;HomePage&gt; with TickerProviderStateMixin {
    AnimationController _controller;
    Animation&lt;Offset&gt; _offsetAnimation;
  
    AnimationController _controllerTwo;
    Animation&lt;Offset&gt; _offsetAnimationTwo;
  
    @override
    void initState() {
      _controller = AnimationController(
        duration: const Duration(seconds: 1),
        vsync: this,
      );
      _offsetAnimation = Tween&lt;Offset&gt;(
        begin: const Offset(-0.00001, 0.0),
        end: const Offset(0.09, 0.0),
      ).animate(CurvedAnimation(
        parent: _controller,
        curve: Curves.easeInOut,
      ));
      _controllerTwo = AnimationController(
        duration: const Duration(seconds: 1),
        vsync: this,
      );
      _offsetAnimationTwo = Tween&lt;Offset&gt;(
        begin: const Offset(-0.85, 0.0),
        end: const Offset(-0.00001, 0.0),
      ).animate(CurvedAnimation(
        parent: _controllerTwo,
        curve: Curves.easeInOut,
      ));
      super.initState();
    }
  
    @override
    Widget build(BuildContext context) {
      return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: &lt;Widget&gt;[
          Expanded(
            child: new GestureDetector(
              onHorizontalDragUpdate: (details) {
                if (details.primaryDelta &gt; 0) {
                  _controller..reverse();
                  _controllerTwo..reverse();
                }
                if (details.primaryDelta &lt; 0) {
                  _controller..forward();
                  _controllerTwo..forward();
                }
                print(details.primaryDelta);
              },
              child: Row(
                mainAxisSize: MainAxisSize.max,
                children: &lt;Widget&gt;[
                  SlideTransition(
                    position: _offsetAnimationTwo,
                    child: Card(
                      color: Colors.black54,
                      child: Container(),
                    ),
                  ),
                  Flexible(
                    child: SlideTransition(
                      position: _offsetAnimation,
                      child: Container(
                        child: SlidingUpPanel(
                          renderPanelSheet: false,
                          panel: _floatingStatement(),
                          body: CardsStack(context),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          )
        ],
      );
    }
  
    Widget _floatingStatement() {
      return Container(
        margin: const EdgeInsets.all(24.0),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.all(Radius.circular(24.0)),
          boxShadow: [
            BoxShadow(
              blurRadius: 20.0,
              color: Colors.grey,
            ),
          ],
        ),
      );
    }
  }
  
  class CardsStack extends StatelessWidget {
    const CardsStack(BuildContext context, {Key key}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return new Stack(
        alignment: Alignment.center,
        children: &lt;Widget&gt;[
          Positioned(
            top: 20,
            left: 10,
            right: 10,
            child: Card(
              color: Colors.black54,
              child: Container(),
            ),
          ),
          Positioned(
            top: 70,
            left: 10,
            right: 10,
            child: Card(
              color: Colors.black54,
              child: Container(),
            ),
          ),
          Positioned(
            top: 120,
            left: 10,
            right: 10,
            child: Card(
              color: Colors.black54,
              child: Container(),
            ),
          ),
        ],
      );
    }
  }
  </code></pre>