title: I have laggy animation because of setState() in my code
body: <p>I have animated pageview and listview that connected to each other. But I have an animation problem that caused by setState(i have tested to removed the setState and the animation works well).</p>
  
  <pre class="lang-dart prettyprint-override"><code>import 'package:flutter/material.dart';
  
   const double _listheight = 80;
  
  class LoyaltyPage extends StatefulWidget {
    @override
    _LoyaltyPageState createState() =&gt; new _LoyaltyPageState();
  }
  
  class _LoyaltyPageState extends State&lt;LoyaltyPage&gt; {
    PageController controller;
    ScrollController listcontroller;
    int selected = 0;
    List&lt;String&gt; images=[
      'https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500',
      'https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500',
      'https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500',
      'https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500',
    ];
    @override
    initState() {
      super.initState();
      controller = new PageController(
        initialPage: selected,
        keepPage: false,
        viewportFraction: 0.7,
      );
      listcontroller = new ScrollController();
    }
  
    @override
    dispose() {
      controller.dispose();
      super.dispose();
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white,
          iconTheme: IconThemeData(color: Colors.black),
          title: Text(
            'Loyalty',
            style: TextStyle(color: Colors.black),
          ),
        ),
        body: Column(
          children: &lt;Widget&gt;[
            Expanded(
              flex: 3,
              child: new Container(
                child: new PageView.builder(
                    onPageChanged: (value) {
                    //ADDING THIS SET STATE CAUSE SELECTED COLOR WORKS BUT LAGGY ANIMATION
                    setState(() {
                      selected=value;
                    });
                      listcontroller.animateTo(value*_listheight,duration: Duration(milliseconds: 500),curve: Curves.ease);
                    },
                    itemCount: images.length,
                    controller: controller,
                    itemBuilder: (context, index) =&gt; builder(index)),
              ),
            ),
            Expanded(
              flex: 6,
              child: new Container(
                child: new ListView.builder(
                  controller: listcontroller,
                  itemCount: images.length,
                  itemBuilder: (context,index) =&gt; _listbuilder(index),
                ),
              ),
            ),
          ],
        ),
      );
    }
  
    builder(int index) {
      return new AnimatedBuilder(
        animation: controller,
        builder: (context, child) {
          double value = 1.0;
          if (controller.position.haveDimensions) {
            value = controller.page - index;
            value = (1 - (value.abs() * .4)).clamp(0.0, 1.0);
          }
          return new Center(
            child: new SizedBox(
              height: Curves.easeOut.transform(value) * 180,
              width: Curves.easeOut.transform(value) * 270,
              child: child,
            ),
          );
        },
        child: new Card(
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
            semanticContainer: true,
            clipBehavior: Clip.antiAliasWithSaveLayer,
          child:Container(
            child: Image.network(images[index],fit: BoxFit.fill,)
          ),
        ),
      );
    }
  
    _listbuilder(int index){
      return Container(
        height: _listheight,
        child: Column(
          children: &lt;Widget&gt;[
            ListTileTheme(
              selectedColor: Colors.blueAccent,
              child: ListTile(
                title: Text(images[index],maxLines: 1,overflow: TextOverflow.ellipsis,),
                subtitle: Text('Level : Gold'),
                leading: GestureDetector(
                  onTap: (){
                    //ADDING THIS SET STATE CAUSE SELECTED COLOR WORKS BUT LAGGY ANIMATION
                    setState(() {
                      selected=index;
                    });
                    controller.animateToPage(index,duration: Duration(milliseconds: 500),curve: Curves.ease); 
                  },
                  child: Icon(
                    Icons.credit_card),
                ),
                trailing: Icon(Icons.navigate_next),
                selected: index==selected,//THIS IS THE SELECTED THAT I TRIED TO CHANGE
              ),
            ),
            Divider(height: 1,color: Colors.black45,),
          ],
        ),
      );
    }
  }
  
  </code></pre>
  
  <p>I use setState at 2 places where it's on pagechanged and on leading listtile of my app.And here is my app looks like.</p>
  
  <p><a href="https://i.stack.imgur.com/yKYVj.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yKYVj.jpg" alt="SNAP 1"></a></p>
  
  <p>the first one is the expected output of my app but it laggy,
  the second one has smooth animation but the text color doesn't change.</p>