TabBar setting setting state of tabviews

Question

I have a Main page with a tabbar with 5 tabs. In Main page, i load a JSON from internet and set different parts of it in each tab. It's a world cup app, showing a tab for each match fase (groups, round of 16, quarterfinals, semifinal, and final). When each tab is loaded, i get the json and build a list view.

In additional, i want to set a button to reload the information (something like a fab or action in appbar). But, when i reload the JSON, how do i setstate of the actual tab?

This is my Main page widget build:

Widget build(BuildContext context) {
return new Scaffold(
  appBar: new AppBar(
    leading: new IconButton(
      icon: new Icon(Icons.arrow_back),
      onPressed: () => Navigator.pop(context),
    ),
    title: new Text(title),
  ),
  body: new Center(
    child: new TabBarView(
      controller: _tabController,
      children: <Widget>[
        new GroupStageMatches(),
        new RoundOfSixteen(),
        new QuarterFinals(),
        new SemiFinal(),
        new Final(),
      ],
    ),
  ),
  bottomNavigationBar: new Material(
    color: Colors.blueAccent,
    child: new TabBar(
      controller: _tabController,
      tabs: <Widget>[
        new Tab(text: "Grupos"),
        new Tab(text: "Oitavas"),
        new Tab(text: "Quartas"),
        new Tab(text: "Semi"),
        new Tab(text:"Final"),
      ],
    ),
  ),
  floatingActionButton: new FloatingActionButton(
    onPressed: () {
      setState(() {
        sing.updateData();
      });
    }
  ),
);}

Answer 1

Most simple solution would be to create valueNotifier in your singleton

  ValueNotifier<String> valueNotifier = new ValueNotifier<String>("");

Then, inside each tab in initState do

sing.valueNotifier.addListener(_valueChanged)

and on dispose clean up listeners.

to notify listeners, you would change the value. If the value is different thatn the previous one it will notify the listeners. This will call _valueChanged method

sing.valueNotifier.value = "HelloWorld";

Once _valueChanged gets called, you can set state in your tab.

EDIT: based on code example

You see, value notifier holds the value that you will need in your class. so once the getJSON resolves, listener will be called in your view.

class Singleton {
  static final Singleton _singleton = new Singleton._internal();
  ValueNotifier<Map<String, dynamic>> groupsJson =
      new ValueNotifier<Map<String, dynamic>>(null);
  ValueNotifier<Map<String, dynamic>> eliminationJson =
      new ValueNotifier<Map<String, dynamic>>(null);

  factory Singleton() {
    return _singleton;
  }

  Singleton._internal() {
    // updateData();
  }


  updateGroupsJson() async {
    _groupsJson.value = await this.getJson(
        "http://www.srgoool.com.br/call?ajax=get_classificacao2&id_fase=1796");
  }

  updateEliminationJson() async {
    _eliminationJson.value = await this.getJson(
        "http://www.srgoool.com.br/call?ajax=get_chaves&id_ano_campeonato=434");
  }

  Future<Map<String, dynamic>> getJson(url) async {
    print("loading");
    final response = await http.get(url);

    if (response.statusCode == 200) {
      print("loaded");
      var teste = json.decode(response.body);
      return teste;
    } else {
      print("erro");
      return null;
    }
  }
}

In your view:

void initState() {
  super.initState();
  sing = new Singleton();
  sing.groupsJson.addListener(onGroupJson);
  sing.updateGroupsJson();

  //you can already draw your frontend with latest groupsJson. Thiss will just update the view when you get a new one
}

void onGroupJson{
  setState ((){
    // assing fields that you need for drawing the view 
  });
}