Flutter tabview refresh issue

Question

I have a TabBarView in my main.dart and every tab got a class to show the content(it's listview object), when i go between the tabs, the listview page refresh everytime, is it normal for tabbarview? I don't expect it will refresh everytime when i go between the tabs.

is it the problem my class? how to fix this? the code is something like this.

    class ListWidget extends StatefulWidget {
  final catID;

  ListWidget(this.catID);


  _ListWidgetState createState() => new _ListWidgetState(catID);
}

class _ListWidgetState extends State<ListWidget> {

  var catID;

  void initState() {
    super.initState();
    _fetchListData();
  }

  @override

  Widget build(BuildContext context) {
    // TODO: implement build

    return new Scaffold(.......
}

Robert Apikyan · Answer 1 · 2021-02-28T06:32:10.317

29

MahMoos is right, however it's good to have an example here ...

Use AutomaticKeepAliveClientMixin
override wantKeepAlive property and return true

`

class ListWidget extends StatefulWidget {

  @override
  _ListWidgetState createState() => _ListWidgetState();

}

class _ListWidgetState extends State<ListWidget> with 
                  AutomaticKeepAliveClientMixin<ListWidget>{ // ** here

  @override
  Widget build(BuildContext context) {
    super.build(context)
    return Container();
  }

  @override
  bool get wantKeepAlive => true; // ** and here
}

edited Feb 28 '21 at 06:32

answered Oct 17 '18 at 12:36

Robert Apikyan

1,972
1
20
23

Thanks for your useful answer. But, when I use AutomaticKeepAliveClientMixin, the widget's build method shows this error: ""This method overrides a method annotated as '@mustCallSuper' in 'AutomaticKeepAliveClientMixin', but doesn't invoke the overridden method."" – Hossein Yousefpour Feb 26 '21 at 08:39
1

Good catch, I have added super.build(context), thanks! – Robert Apikyan Feb 28 '21 at 06:32
1

None of these solutions is working for me – Gordon developer Jun 24 '21 at 11:33

MahMoos · Accepted Answer · 2020-05-20T19:06:30.850

10

If I understood you well, you are complaining about the refreshing because you need the views to save their states after moving between tabs. There is an open issue on the subject and there is a way around this problem mentioned in the comments.

Update:

There is a workaround for this issue by using AutomaticKeepAliveClientMixin which you can learn more about in this article.

edited May 20 '20 at 19:06

answered Jul 13 '18 at 08:07

MahMoos

1,014
9
16

score 4 · Answer 3 · answered Mar 20 '19 at 06:27

If you want that your Tab view data does not refresh when you change Tab you should use

AutomaticKeepAliveClientMixin

class BaseScreen extends StatefulWidget {

  BaseScreen(this.title, this.listener, {Key key}) : super(key: key);

}

class BaseScreenState extends State<BaseScreen> with AutomaticKeepAliveClientMixin {

  @override
  Widget build(BuildContext context) {
    screenWidth = MediaQuery.of(context).size.width;
    screenHeight = MediaQuery.of(context).size.height;
    primaryColor = Theme.of(context).primaryColor;
    textTheme = Theme.of(context).textTheme;
    return Scaffold(
      key: scaffoldKey,
      appBar: getAppBar(),
      body: Container(),
    );
  }

  @override
  bool get wantKeepAlive => true;
}

I was facing the same issue and this tutorial helped me.

Happy Coding.

Flutter tabview refresh issue

3 Answers3

Linked