Laggy animation

Question

Does anyone have experienced laggy transition between screens when using a TabBar, or am I using it wrong ? Basically I am using it as following by building page in other widgets

home: DefaultTabController(
    initialIndex: 0,
    length: 5,
    child: Scaffold(
      appBar: AppBar(
        bottom: TabBar(
          isScrollable: true,
          labelStyle: TextStyle(fontSize: 12.0, fontWeight: FontWeight.bold),
          tabs: [
            Tab(text: 'HOME'),
            Tab(text: 'SCHEDULE'),
            Tab(text: 'ANALYTICS'),
            Tab(text: 'TEMP'),
            Tab(text: 'SETTINGS'),
          ],
        ),
        title: Text('${widget.title}'),
      ),
      body: TabBarView(
        children: [
          TheGridView().build(),
          SchedulePage(),
          ChartPage(),
          TempPage(),
          SettingsPage(),
        ],
      ),
    ),
  ),

Answer 1

The TabBarView doesn't save the state of the widgets in it. They are rebuilt everytime they reappear on screen. You can check this by adding a print() statement in initState() for one of the widgets. To fix this you can use AutomaticKeepAliveClientMixin

class SettingsPage extends StatefulWidget {
  SettingsPage({Key key}) : super(key: key);

  @override
  _SettingsPageState createState() => _SettingsPageState();
}

class _SettingsPageState extends State<SettingsPage> with AutomaticKeepAliveClientMixin { //<-- AutomaticKeepAliveClientMixin

  @override
  bool get wantKeepAlive => true; //Set to true

  @override
  Widget build(BuildContext context) {
    super.build(context); //You must add this
    return Container(); //A screen here
  }
}

With this small change, the widgets won't rebuild every time they are brought back to the screen