title: Horizontal list view animation
body: <p>I am trying to create a list view like that <a href="https://dribbble.com/shots/4816428--Minimalistic-travel-app-interactions" rel="nofollow noreferrer">list view</a>, I am getting something not bad but it is not as smooth as it is on the dribble.</p>
  
  <p>I am guessing it's because I am calling setState too many times and it's updating the tree during the animation, but I don't know how to make it smoother and maybe just call setState once.
  I am using an inherited widget to pass my state through my tree, here is the definition of my edit state</p>
  
  <pre><code>void onChangeIndex (int newIndex) {
      fadeText(_index, newIndex);
      changePosition(newIndex);
    }
  
    void fadeText(int oldIndex,int newIndex) async {
      setState(() {
        _visible[oldIndex] = !_visible[oldIndex];
          });
      await Future.delayed(Duration(milliseconds: 300));
      setState(() {
        _visible[newIndex] = !_visible[newIndex];
      debugPrint(_visible[oldIndex].toString());
      });     
    }
  
    void changePosition(newIndex) async {
      await Future.delayed(Duration(milliseconds: 50));    
      setState(() {
        _index = newIndex;
        _scrollController.animateTo((_index)*320.0, duration: Duration(milliseconds: 800), curve: Curves.fastOutSlowIn);
      });
    }
  </code></pre>
  
  <p>this part is called when I am dragging my list view, it's job is to scroll the list view and animate my text</p>
  
  <p>Here is the card contained in my list view, I am sorry if the structure is chaotic i am fairly new to flutter. </p>
  
  <pre><code>GestureDetector(
        child: Padding(
          padding: EdgeInsets.all(6.0),
          child: Card(
            elevation: 0.0,
            color: Colors.transparent,
            child: Container(
                width: 295.0,
                child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: &lt;Widget&gt;[
                      Row(
                        children:&lt;Widget&gt;[ 
                          Expanded(
                            child: 
                            Card(
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.all(Radius.circular(15.0)),
                              ),
                              elevation: 5.0,
                              child: ClipRRect(
                                borderRadius: BorderRadius.circular(10.0),
                                child: Image.asset('images/paris.jpg', fit: BoxFit.contain),
                              ),  
                            )
                          ),
  
                        ]
                      ),
                      Row(
                        children: &lt;Widget&gt;[
                          Expanded(
                            child: AnimatedOpacity(
                              opacity: StateManager.of(context).visible[widget.index] ? 1.0 : 0.0,
                              duration: Duration(milliseconds: 300),
                              child: Container(
                                height: 24.0,
                                child: Padding(
                                  padding: const EdgeInsets.only(
                                    left: 8.0
                                  ),
                                  child: Text(
                                    "Paris, France", 
                                    style: TextStyle(
                                      color: Color.fromRGBO(0,0,0,0.9),
                                      fontSize: 24.0,
                                      fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                )                             
                              )
                            )
                          ), 
                        ],
                      ),
                      Row(
                        children: &lt;Widget&gt;[
                          Expanded(
                            child: AnimatedOpacity(
                              opacity: StateManager.of(context).visible[widget.index] ? 1.0 : 0.0,
                              duration: Duration(milliseconds: 300),
                              child:  Container(
                                height: 30.0,
                                child: Padding(
                                  padding: const EdgeInsets.only(
                                    left: 8.0
                                  ),
                                  child: Text(
                                    "Visiter ou bien aller au travail à vélo facilement grâce aux nombreux parkings à vélo présent dans cette ville.", 
                                    style: TextStyle(
                                      color: Color.fromRGBO(0,0,0,0.7),
                                      fontSize: 12.0,
                                      fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                )  
                              )
                            )
                          ), 
                        ],
                      ),
                    ])),
            // shape: RoundedRectangleBorder(
            //   borderRadius: BorderRadius.all(Radius.circular(15.0)),
            // ),
          ),
        ),
        onHorizontalDragEnd: (details) { 
          var cardIndex = StateManager.of(context).index;                
          if(details.velocity.pixelsPerSecond.dx &gt; 0) {
            if(cardIndex&gt;0) {
              StateManager.of(context).onChangeIndex(cardIndex-1);
            }
          }else if(details.velocity.pixelsPerSecond.dx &lt; 0){
            if(cardIndex&lt;2) { 
              StateManager.of(context).onChangeIndex(cardIndex+1);
            }
          }
        },
      );
  </code></pre>
  
  <p>If you have any idea how i can improve the way I am setting my state to make my animation smoother it would help me a lot.</p>