title: Flutter: TabBarView Moving to a tab rebuilds also the other ones
body: <p>I use <code>TabBarView</code> and i noticed something really strange. I have put some print messages in all of the tabs' widgets in order to have feedback while swiping tabs. And i got these results:</p>
  <ul>
  <li>from 0 -&gt; 1:
  Tab 1 called,
  Tab 3 called,
  Tab 4 called,
  Tab 0 called.</li>
  <li>from 1 -&gt; 2:
  Tab 2 called,
  Tab 2 called,
  Tab 1 called,
  Tab 3 called,
  Tab 4 called,
  Tab 2 called.</li>
  <li>from 2 -&gt; 3:
  Tab 1 called,
  Tab 3 called,
  Tab 4 called,
  Tab 2 called.</li>
  <li>from 3 -&gt; 4:
  Tab 1 called,
  Tab 3 called,
  Tab 4 called.</li>
  </ul>
  <p>So really strange things. It actually rebuilds(calls <code>setState</code>) a tab even tho it's not selected. Take in mind that only Tab 0 and Tab 2 have actual content inside, the other ones have empty containers.</p>
  <p>Here is my code:</p>
  <pre><code>class Home extends StatefulWidget {
    @override
    _HomeState createState() =&gt; _HomeState();
  }
  
  class _HomeState extends State&lt;Home&gt; with SingleTickerProviderStateMixin {
    final AuthService _authService = AuthService();
    final colors = [
      Colors.red,
      Colors.lightGreen,
      Colors.blue,
      Colors.amber,
      Colors.deepPurpleAccent
    ];
    Color scaffoldColor = Colors.red;
    TabController _controller;
  
    @override
    void initState() {
      super.initState();
      _controller = TabController(vsync: this, length: 5);
      _controller.addListener(() {
        if (_controller.indexIsChanging) {
          print(&quot;index is changing&quot;);
        } else {
          setState(() {
            scaffoldColor = colors[_controller.index];
          });
        }
      });
      _controller.index = 1;
    }
  
    @override
    Widget build(BuildContext context) {
      return DefaultTabController(
        length: 5,
        child: Scaffold(
          backgroundColor: scaffoldColor,
          appBar: AppBar(
            backgroundColor: scaffoldColor,
            leading: IconButton(
              icon: Icon(Icons.menu),
              color: Colors.white,
              onPressed: () {},
            ),
            elevation: 0,
            title: Text(
              'HOME Screen',
              style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold),
            ),
            actions: [
              FlatButton.icon(
                onPressed: () async {
                  await _authService.signOut();
                },
                icon: Icon(Icons.exit_to_app),
                label: Text('Log out'),
              ),
            ],
            bottom: TabBar(
              isScrollable: true,
              controller: _controller,
              indicatorWeight: 6,
              indicatorColor: Colors.transparent,
  
              tabs: &lt;Widget&gt;[
                Tab(
                  child: Container(
                    child: Text(
                      'Chats',
                      style: TextStyle(
                          color:
                              _controller.index == 0 ? Colors.white : Colors.grey,
                          fontSize: 18),
                    ),
                  ),
                ),
                Tab(
                  child: Container(
                    child: Text(
                      'Online',
                      style: TextStyle(
                          color:
                              _controller.index == 1 ? Colors.white : Colors.grey,
                          fontSize: 18),
                    ),
                  ),
                ),
                Tab(
                  child: Container(
                    child: Text(
                      'Discover',
                      style: TextStyle(
                          color:
                              _controller.index == 2 ? Colors.white : Colors.grey,
                          fontSize: 18),
                    ),
                  ),
                ),
                Tab(
                  child: Container(
                    child: Text(
                      'NULL',
                      style: TextStyle(
                          color:
                              _controller.index == 3 ? Colors.white : Colors.grey,
                          fontSize: 18),
                    ),
                  ),
                ),
                Tab(
                  child: Container(
                    child: Text(
                      'NULL2',
                      style: TextStyle(
                          color:
                              _controller.index == 4 ? Colors.white : Colors.grey,
                          fontSize: 18),
                    ),
                  ),
                ),
              ],
            ),
          ),
          body: TabBarView(
            controller: _controller,
            children: &lt;Widget&gt;[
              Column(
                children: &lt;Widget&gt;[
                  //CategorySelector(),
                  Expanded(
                    child: Container(
                      decoration: BoxDecoration(
                        color: Theme.of(context).accentColor,
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(30),
                          topRight: Radius.circular(30),
                        ),
                      ),
                      child: Column(
                        children: &lt;Widget&gt;[
                          FavoriteContacts4(),
                          RecentChats(),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
              Tab1(),
              Column(
                children: &lt;Widget&gt;[
                  //CategorySelector(),
                  Expanded(
                    child: Container(
                      decoration: BoxDecoration(
                        color: Theme.of(context).accentColor,
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(30),
                          topRight: Radius.circular(30),
                        ),
                      ),
                      child: SuggestedUsers(),
                    ),
                  ),
                ],
              ),
              Tab3(),
              Tab4(),
            ],
          ),
        ),
      );
    }
  
    Widget tmpWidget(int i) {
      print(&quot;Tab &quot; + i.toString() + &quot; is called&quot;);
      return Text(&quot;Number&quot; + i.toString());
    }
  }
  
  </code></pre>
  <p>It is really annoying cause every time i switch(or almost) to another tab it calls an api in tab2. I think it has to do with the controller!</p>
  <p><strong>Update:</strong>
  Even tho i have put <code>AutomaticKeepAliveClientMixin</code> into every of my <code>Statefull</code> Tab widgets, there are going to be rebuild. For example when im swiping from Tab3 to go to Tab4 all the Tabs are going to be rebuild. Tab1,2,3,4 all of them.</p>
  <p>Here is the code i have put for Tab 1,3 and 4. Tab 0 and 2 have other widgets but act the same.</p>
  <pre><code>class Tab1 extends StatefulWidget {
    @override
    _Tab1State createState() =&gt; _Tab1State();
  }
  
  class _Tab1State extends State&lt;Tab1&gt; with AutomaticKeepAliveClientMixin {
    @override
    Widget build(BuildContext context) {
      super.build(context);
      print(&quot;Tab 1 Has been built&quot;);
      return Text(&quot;TAB 1&quot;);
    }
  
    @override
    // TODO: implement wantKeepAlive
    bool get wantKeepAlive =&gt; true;
  }
  
  </code></pre>