CODEWITHSUNDEEP
dartflutter
Q. Eude
Q. Eude

Reputation: 881

Laggy animation

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(),
        ],
      ),
    ),
  ),

Upvotes: 10

Views: 3440

Answers (3)

camelCase1492
camelCase1492

Reputation: 672

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

Upvotes: 10

Pedro Molina
Pedro Molina

Reputation: 1484

Try your application in release mode:

flutter build apk

Take the apk and install it in your device (i did through drive) and check if work better.

In debug mode is normal have a worse experience. Debug mode is not just the process of debugging with your cable... is a kind of apk.

I hope this work for you.

Upvotes: 0

Shikhir Aggarwal
Shikhir Aggarwal

Reputation: 91

You have not used TabsController maybe it can help you with the performance of tabs.

TabController controller;

and in initState()

controller = new TabController(length: 5, vsync: this);

Like in here https://api.flutter.dev/flutter/material/TabController-class.html

Upvotes: 0

Related Questions