Flutter: Default Tab Bar Controller does not maintain state after swipe

Question

I am writing an application in flutter that has 4 tabbed views, kinda like the stock android phone app or clock app. One of those views hash a floating action button that when pressed will add some text in a list. However, when I scroll to one of the other views and come back, all of the text is gone. Is there a way to fix this?

Here is my code:

import 'package:flutter/material.dart';
import 'Screens/Dashboard.dart';
import 'Screens/CreateQuestionnaire.dart';
import 'Screens/AccountScreen.dart';

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
  @override
 createState() => new MyAppState();
}

class MyAppState extends State<MyApp> {
  final primaryColour = const Color(0xFF5CA1CA);
  final secondaryColour = const Color(0xFFC36B42);
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new DefaultTabController(
        length: 4,
        child: new Scaffold(
          appBar: new AppBar(
            actions: <Widget>[
              new IconButton(icon: new Icon(Icons.account_circle),
              onPressed: (){
                Navigator.push(context, new MaterialPageRoute(builder: (context) => new AccountScreen()));
              }),
            ],
            bottom: new TabBar(
              tabs: <Widget>[
                new Tab(icon: new Icon(Icons.home)),
                new Tab(icon: new Icon(Icons.contacts)),
                new Tab(icon: new Icon(Icons.description)),
                new Tab(icon: new Icon(Icons.settings))
              ],
            ),
            title: new Text("NLPro Questionnaire"),
          ),
          body: new TabBarView(
            children: <Widget>[
              new Dashboard(),
              new CreateQuestionnaire(),
              new Text("Surveys"),
              new Text("Settings")
            ],
          ),
        ),
      ),
      theme:new ThemeData(
        primaryColor: primaryColour,
        accentColor: secondaryColour,
      ),
    );
  }
}

enter image description here

Amyotonia

Answer 1

You need to use AutomaticKeepAliveClientMixin over your stateful widget and implement override method called wantKeepAlive

class MyApp extends StatefulWidget {
@override
createState() => new MyAppState();
}

use AutomaticKeepAliveClientMixin with your class extending state and ov

class MyAppState extends State<MyApp> with AutomaticKeepAliveClientMixin<MyApp>{

//your existing code.....

@override
bool get wantKeepAlive => true;   //by default it will be null, change it to true.

//your existing code......

}

on setting wantKeepAlive to true, initState method will run only once, at the time of creation.

Somatology

You should create a widget with above mentioned AutomaticKeepAliveClientMixin. And then use it in TabBarView. Solves the issue. – Dewitt

Answer 2

Variables in Flutter that are created inside a Stateful widget are updated weithin the change of the state. The state changes when you go to another view and then back. So what you can do is to define two variables. A temporary one that is just for the layout and one that is kept a little longer in storage. Pseudo Code:

var globalVar;
Stateful Widget...
var _temp;
setState({_temp=yourData; globalVar=yourData})
doSomethingWithYourText(_temp != null ? _temp : globalVar)

While you use the _temp var for all layout updates. The globalVar changes will not be noticable until the State resets (you change to another view).

So what this does is save your data in two vars and check wether the State was used before. If not it uses the var that was saved earlier.

Lilybel

Answer 3

You need to use PageStorage widget and PageStoageBucket and wrap your page inside a PageStorage widget.

Please refer to this tutorial for more details:
Persisting UI State and Building Bottom Navigation Bars in Dart's Flutter Framework

Tersanctus

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review – Bleeding

Yes, you are right. I've updated my answer with a general overview of the solution – Tersanctus

I tried this method as well, but it did not work. Do I have some type of data already created for it to work? – Amyotonia

Answer 4

class _RepoInfoState extends State<RepoInfo> with AutomaticKeepAliveClientMixin {

  @override
  bool get wantKeepAlive => true; // Note here

  @override
  Widget build(BuildContext context) {
    super.build(context); // Note here

    return Text('嘿');
  }

}

Galcha

please would you add some explanatory notes to your answer to help others – Durden