title: custom animation for flutter tab bar navigation animation
body: <p>How to add custom animation to flutter tabbar and tabbar view i want to add custom navigation animation to the code that is attached below when i attach the tab bar controller i only get the option of animate to certain value i don't want that i want to change the animation completely e.g when i drag or click the tabbar it slides in from that direction what if i want fade in transition or any other animation..</p>
  
  <pre><code>class TabsPage extends StatefulWidget {
    @override
    _TabsPageState createState() =&gt; _TabsPageState();
  }
  
  class _TabsPageState extends State&lt;TabsPage&gt;
      with SingleTickerProviderStateMixin {
    TabController _tabController;
  
    @override
    void initState() {
      super.initState();
      _tabController = new TabController(vsync: this, length: 2);
    }
  
    @override
    Widget build(BuildContext context) {
      return DefaultTabController(
        length: 2,
        child: Scaffold(
          backgroundColor: Colors.white.withOpacity(0.9),
          appBar: AppBar(
            bottom: TabBar(
              onTap: (index) {
                setState(() {
                  _tabController.index = index;
                });
              },
              controller: _tabController,
              labelColor: Colors.black,
              tabs: &lt;Widget&gt;[
                Tab(
                  icon: Icon(Icons.person),
                  text: 'Hello',
                ),
                Tab(
                  icon: Icon(Icons.person),
                  text: 'World',
                ),
              ],
            ),
          ),
          body: TabBarView(
            controller: _tabController,
            children: [
              HomePage(),
              Favorites(),
            ],
          ),
          floatingActionButton: FloatingActionButton(
            child: Icon(Icons.add),
            onPressed: () {
              _tabController.animateTo(1,
                  duration: Duration(seconds: 5), curve: Curves.easeIn);
            },
          ),
        ),
      );
    }
  }
  </code></pre>