title: Flutter - How to change child widgets language
body: <p>I would like to change all app language without reload app. I used <a href="https://pub.dev/packages/flutter_i18n" rel="nofollow noreferrer">flutter_i18n</a></p>
  
  <p>I have a switch language button on <code>appBar</code> and <code>AppHomeScreen</code> in body, here is <code>build</code> function in <code>MyHomePage</code> class:</p>
  
  <pre><code>  addClickFn(model) {
      FocusScope.of(context).requestFocus(FocusNode());
      Navigator.push&lt;dynamic&gt;(
        context,
        MaterialPageRoute&lt;dynamic&gt;(
            builder: (BuildContext context) =&gt; MyPopupScreen(callback: (c, id) =&gt; { }),
            fullscreenDialog: true),
      );
    }
  
    @override
    Widget build(BuildContext context) {
      return ScopedModelDescendant&lt;ResponseDataModel&gt;(
          builder: (context, _, model) =&gt; Scaffold(
                backgroundColor: AppTheme.white,
                body: FutureBuilder&lt;bool&gt;(
                  future: getData(),
                  builder: (BuildContext context, AsyncSnapshot&lt;bool&gt; snapshot) {
                    if (!snapshot.hasData) {
                      return const SizedBox();
                    } else {
                      return Padding(
                        padding: EdgeInsets.only(
                            top: MediaQuery.of(context).padding.top),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: &lt;Widget&gt;[
                            appBar(),
                            Expanded(
                              child: FutureBuilder&lt;bool&gt;(
                                future: getData(),
                                builder: (BuildContext context,
                                    AsyncSnapshot&lt;bool&gt; snapshot) {
                                  if (!snapshot.hasData) {
                                    return const SizedBox();
                                  } else {
                                    return AppHomeScreen(
                                        addClickFn: () =&gt; addClickFn(model));
                                  }
                                },
                              ),
                            ),
                          ],
                        ),
                      );
                    }
                  },
                ),
              ));
    }
  </code></pre>
  
  <p><code>appBar</code> with onTap switch button function:</p>
  
  <pre><code>  Widget appBar() {
      return SizedBox(
        height: AppBar().preferredSize.height,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: &lt;Widget&gt;[
            Padding(
              padding: const EdgeInsets.only(top: 8, left: 8),
              child: Container(
                width: AppBar().preferredSize.height - 8,
                height: AppBar().preferredSize.height - 8,
              ),
            ),
            Expanded(
              child: Center(
                child: Padding(
                  padding: const EdgeInsets.only(top: 4),
                  child: Text(
                    FlutterI18n.translate(context, "title"),
                    style: TextStyle(
                      fontSize: 22,
                      color: AppTheme.darkText,
                      fontWeight: FontWeight.w700,
                    ),
                  ),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 8, right: 8),
              child: Container(
                width: AppBar().preferredSize.height - 8,
                height: AppBar().preferredSize.height - 8,
                color: Colors.white,
                child: Material(
                  color: Colors.transparent,
                  child: InkWell(
                    borderRadius:
                        BorderRadius.circular(AppBar().preferredSize.height),
                    child: Image.asset(
                        'icons/flags/png/' + currentLang.languageCode + '.png',
                        package: 'country_icons'),
                    onTap: () async {
                      setState(() {
                        currentLang = currentLang.languageCode == 'vn'
                            ? new Locale('gb')
                            : new Locale('vn');
                      });
                      await FlutterI18n.refresh(context, currentLang);
                    },
                  ),
                ),
              ),
            ),
          ],
        ),
      );
    }
  </code></pre>
  
  <p>In <code>AppHomePage</code> I included <code>BottomBarView</code> with <code>DashboardScreen</code> as tab body</p>
  
  <pre><code>  @override
    Widget build(BuildContext context) {
      return Container(
        color: AppTheme.background,
        child: Scaffold(
          backgroundColor: Colors.transparent,
          body: FutureBuilder&lt;bool&gt;(
            future: getData(),
            builder: (BuildContext context, AsyncSnapshot&lt;bool&gt; snapshot) {
              if (!snapshot.hasData) {
                return const SizedBox();
              } else {
                return Stack(
                  children: &lt;Widget&gt;[
                    tabBody,
                    bottomBar(),
                  ],
                );
              }
            },
          ),
        ),
      );
    }
  
    Future&lt;bool&gt; getData() async {
      await Future&lt;dynamic&gt;.delayed(const Duration(milliseconds: 200));
      return true;
    }
  
    Widget bottomBar() {
      return Column(
        children: &lt;Widget&gt;[
          const Expanded(
            child: SizedBox(),
          ),
          BottomBarView(
            tabIconsList: tabIconsList,
            addClick: () {
              if (widget.addClickFn != null) widget.addClickFn();
            },
            changeIndex: (int index) {
              if (index == 0) {
                animationController.reverse().then&lt;dynamic&gt;((data) {
                  if (!mounted) {
                    return;
                  }
                  setState(() {
                    tabBody =
                        DashboardScreen(animationController: animationController);
                  });
                });
              }
            },
          ),
        ],
      );
    }
  </code></pre>
  
  <p>And in <code>DashboardScreen</code> I show a label:</p>
  
  <pre><code>  @override
    Widget build(BuildContext context) {
      return Container(
        color: AppTheme.background,
        child: Scaffold(
          backgroundColor: Colors.transparent,
          body: Stack(
            children: &lt;Widget&gt;[
              getMainListViewUI(),
              // getAppBarUI(),
              SizedBox(
                height: MediaQuery.of(context).padding.bottom,
              )
            ],
          ),
        ),
      );
    }
  
    Widget getMainListViewUI() {
      return ListView(
        scrollDirection: Axis.vertical,
        semanticChildCount: 10,
        children: &lt;Widget&gt;[
          Container(
              padding:
                  EdgeInsets.only(top: 0.0, left: 24, right: 24, bottom: 24.0),
              child: Text(FlutterI18n.translate(context, "label.welcome"),
                  textAlign: TextAlign.left,
                  style: TextStyle(
                    fontFamily: AppTheme.fontName,
                    fontWeight: FontWeight.w700,
                    fontSize: 30 + 6 - 6 * topBarOpacity,
                    letterSpacing: 1.2,
                    color: AppTheme.darkerText,
                  ))),
        ],
      );
    }
  </code></pre>
  
  <p>When I click switch language button, all text in <strong>current context</strong> (title) translates very well, but in <code>DashboardScreen</code> (label.welcome) are not.</p>
  
  <p>And when I click <strong>add</strong> button on bottomBar to redirect to <code>MyPopupScreen</code> then close this popup, text in <code>DashboardScreen</code> has been translated.</p>
  
  <p>How can I change all text in <code>DashboardScreen</code> when click switch language button on <code>MyHomePage</code>?</p>
  
  <p><em>Sorry for my bad english!!!</em></p>