The setState method doesn't refresh all the page in my flutter app

Question

I have in my flutter app a 'TabBar' with 4 tabs... When I switch the tab, it opens an other page as you can see in my code here:

    Widget _selectedContent(){
    switch(_selectedItems){
      case 0:
        setState(() {});
        return _buildCategory();
        break;
      case 1:
        setState(() {});
        return _buildLanguage();
        break;
      case 2:
        setState(() {});
        return _buildContact();
        break;
      case 3:
        setState(() {});
        return _buildThemeColor();
        break;
    }
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text(allTranslations.text('SettingsPageTitle')),
        centerTitle: true,
        backgroundColor: GeneralVariables.appBarColor,
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.help_outline),
            onPressed: () => Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context) => new RulesExplanation())),
            iconSize: 30.0,
          ),
        ],
      ),
      body: Container(
        child: _selectedContent(),
      ),
      bottomNavigationBar: Container(
        padding: EdgeInsets.only(bottom: 5),
        color: GeneralVariables.appBarColor,
        child: TabBar(
          indicatorColor: Colors.red,
          controller: tabBarController,
          onTap: (int index) => setState(() {_selectedItems = index;}),
          tabs: <Widget>[
            Tab(
              icon: Icon(Icons.check_circle_outline),
              text: allTranslations.text('SettingsPageTab1Title'),
            ),
            Tab(
              icon: Icon(Icons.language),
              text: allTranslations.text('SettingsPageTab2Title'),
            ),
            Tab(
              icon: Icon(Icons.mail_outline),
              text: allTranslations.text('SettingsPageTab3Title'),
            ),
            Tab(
              icon: Icon(Icons.color_lens),
              text: "Thèmes",
            )
          ],
        ),
      ),
      backgroundColor: GeneralVariables.mainColor,
    );
  }

  Widget _buildCategory(){
    return CategoryPage();
  }

  Widget _buildContact(){
    return ContactPage();
  }

  Widget _buildLanguage(){
    return LanguagePage();
  }

  Widget _buildThemeColor(){
    return ThemeColorPage();
  }

As you can see, when I open the Language tab, it opens this page:

class _LanguagePageState extends State<LanguagePage>{
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(padding: EdgeInsets.only(top: 5),),
          Text(allTranslations.text('LanguagePageLanguageTitle'), style: TextStyle(color: Colors.white, fontSize: 25.0,),),
          Container(padding: EdgeInsets.all(10.0),),
          _langButton("LanguagePageFrench", "France.png", "fr", false),
          Container(padding: EdgeInsets.all(20.0),),
          _langButton("LanguagePageEnglish", "United-Kingdom.png", "en", true),
          Expanded(child: Container(),),
          Row(
            children: <Widget>[
              Text(allTranslations.text('LanguagePageNotifInfo'), style: TextStyle(color: Colors.white, fontSize: 13.0),),
              Expanded(child: Container(),),
              new OutlineButton(
                child: new Text(allTranslations.text('LanguagePageDialog3'), style: TextStyle(color: Colors.white, fontSize: 13,),),
                shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(20.0)),
                onPressed: () {
                  _showDialog(allTranslations.text('LanguagePageDialog1'),
                      allTranslations.text('LanguagePageDialog2'),
                      allTranslations.text('LanguagePageDialog3'),
                      allTranslations.text('LanguagePageDialog4'));
                },
              ),
            ],
          ),
        ],
      ),
    );
  }

  InkWell _langButton(String titre, String imageName, String langCode, bool experimental){

    return InkWell(
      onTap: () async {
        await allTranslations.setNewLanguage(langCode);
        allTranslations.setPreferredLanguage(langCode);
        setState((){
          if(langCode == 'fr'){
            LandingPageState.firebaseMessaging.subscribeToTopic(GeneralVariables.topicFr);
            LandingPageState.firebaseMessaging.unsubscribeFromTopic(GeneralVariables.topicEn);
            print("Subscribed to french subject");

            LandingPageState.firebaseMessaging.subscribeToTopic(GeneralVariables.topicFr_1_3_1);
            LandingPageState.firebaseMessaging.unsubscribeFromTopic(GeneralVariables.topicEn_1_3_1);
          }
          else if (langCode == 'en'){
            LandingPageState.firebaseMessaging.subscribeToTopic(GeneralVariables.topicEn);
            LandingPageState.firebaseMessaging.unsubscribeFromTopic(GeneralVariables.topicFr);
            print("Subscribed to english subject");

            LandingPageState.firebaseMessaging.subscribeToTopic(GeneralVariables.topicEn_1_3_1);
            LandingPageState.firebaseMessaging.unsubscribeFromTopic(GeneralVariables.topicFr_1_3_1);
          }
        });
      },
      child: Row(
        children: <Widget>[
          Image(
            image: AssetImage('images/flags/$imageName'),
          ),
          Container(
            padding: EdgeInsets.symmetric(horizontal: 10.0),
          ),
          Text(allTranslations.text(titre),
            style: TextStyle(fontSize: 25.0, color: Colors.white, fontWeight: FontWeight.bold),),
          Expanded(
            child: Container(),
          ),
          _experimentalInfo(experimental)
        ],
      ),
    );
  }
}

Not the full class is there...

But When I change the language, it changes on the selected page (Language page) But it doesn't change on the page where there is the TabBar... I want to know if there exist a setState method that call the setState method of the "outside" class (the tabbar one). As a super would do...

Answer 1

You can use a callback function to communicate between two widgets.

Declare a final like below in the child, I assume it is LanguagePage in this case.

final void Function(String langCode) langChanged;

In the onTap event of InkWell, call this function.

widget.langChanged(langCode) ;

At parent, when you are creating the child, pass the function.

LanguagePage(langChanged:(langCode){
  setState(){}
});