How do I pass an Internationalization Object to Child Widgets in Flutter

Question

Just getting started with Flutter/dart, transitioning for PHP, and struggling to figure out how to pass classes into widgets.

I am working on creating my first android and iOS applications using flutter.

I am working with internationalization and everything works fine at my initial build page using the internationalization class I have. However, when passing it on to another widget I get:

NoSuchMethodError: The getter textTitle was called on null.
Receiver: null
tried calling: textTitle

What is the best way of handling this?

Flutter Doctor

  [✓] Flutter (Channel beta, v0.1.5, on Mac OS X 10.13.3 17D47, locale en-US)
  [✓] Android toolchain - develop for Android devices (Android SDK 27.0.1)
  [✓] Android Studio (version 3.0)
  [✓] Connected devices (1 available)

Localization dart

class HnLocalizations{
        HnLocalizations(this.locale);

        final Locale locale;

        static HnLocalizations of(BuildContext context){
            return Localizations.of<HnLocalizations>(context, HnLocalizations);
        }

        static Map<String, Map<String, String>> _localizedValues = {
            'en': {
                'btnLabelLoginS1': 'Login',
                'btnLabelRegisterS1': 'Sign Up'
            },
        ;

        String get s1ButtonLabelLogin =>
            _localizedValues[locale.languageCode]['btnLabelLoginS1'];

class HnLocalizationsDelegate extends LocalizationsDelegate<HnLocalizations> {
        const HnLocalizationsDelegate();

        @override
        bool isSupported(Locale locale) => ['en', 'es'].contains(locale.languageCode);

        @override
        Future<HnLocalizations> load(Locale locale) =>
            new SynchronousFuture<HnLocalizations>(new HnLocalizations(locale)); //HnLocalizations.load(locale);

        @override
        bool shouldReload(HnLocalizationsDelegate old) => false;
    }

Main Dart

void main() {

        runApp(new MaterialApp(
            localizationsDelegates: [
                const HnLocalizationsDelegate(),
                GlobalMaterialLocalizations.delegate,
                GlobalWidgetsLocalizations.delegate,
            ],
            supportedLocales: [
                const Locale('en', 'US'), /// Americans
                const Locale('en', 'GB') /// Brits
            ],
            title: 'HN',
            home: new EntryPage(),
        ));

    }

    class EntryPage extends StatelessWidget {

       final HnColors _hnColors = new HnColors();

        @override
        Widget build(BuildContext context) {

            return new Scaffold(
                appBar: new AppBar(
                    // !!!**** THIS WORKS AS EXPECTED ****!!!!
                    title: new Text(HnLocalizations.of(context).s1ButtonLabelLogin),
                    backgroundColor: _hnColors.transparent(),
                    elevation: 0.0,
                ),
                backgroundColor: _hnColors.accent(),
                body: new Container(
                    decoration: new BoxDecoration(
                        image: new DecorationImage(
                            image: new AssetImage("assets/Background_World.png"),
                            fit: BoxFit.fitWidth,
                        ),
                    ),
                    child: new PanelArea(),
                )
            );
        }
    }


    class PanelArea extends StatelessWidget {

        @override
        Widget build(BuildContext context) {

            HnColors _hnColors = new HnColors();

            return new Container(
                child: new Center(
                    child: new Container(
                        decoration: new BoxDecoration(
                            borderRadius: new BorderRadius.circular(15.0),
                            color: _hnColors.transparent()
                        ),
                        child: new Column(
                            children: [
                                new Image.asset('assets/Icon_Intro_login'),
                                new Text(
                                    // !!!**** ERROR IS HERE ****!!!!
                                    HnLocalizations.of(context).s1M1HeaderTitle,
                                    style: new TextStyle(
                                        color: _haillioColors.white()
                                    ),
                                ),

What is the best way of handling this?

Update: Mar 11 2018
I've discovered that if I move all of the code into the main.dart file. All localization works fine. However, when I move my widgets into a separate dart file, the errors come back, even though all of the code is the same.

Update: Mar 12 2018 nicolás-carrasco pointed in the right direction by a reference in this post (Thank you). The problem had to do with imports which is addressed in this post here which ended up being the solution that worked for me. The example is added below in answers.

Possible duplicate of [Localize a widget in Flutter](https://stackoverflow.com/questions/49194586/localize-a-widget-in-flutter) — Nicolás Carrasco-Stevenson, Mar 12 '18 at 09:45

score 1 · Accepted Answer · answered Mar 12 '18 at 18:18

Nicolás Carrasco pointed towards a solution which was related to what was causing the problem for me by way of link to this post.

In the localization.dart file imports I had:

import 'package:hn/hnLocalization.dart';

While in the main.dart file imports I had:

import 'hnLocalization.dart';

These are not the same thing as described here

Making sure that all files are imported using relative paths vs packages resolved the problem. The distinction is that my files, not the dependencies use relative path. That part stumped at first.

Now my localization.dart file has the following.

import 'hnLocalization.dart'; // <--- Using relative Path

class PanelArea extends StatelessWidget {

        @override
        Widget build(BuildContext context) { ...

        child: new Column(
            children: [
                new Image.asset('assets/Icon_Intro_login'),

                // This Now Works --->
                new Text(HnLocalizations.of(context).s1M1HeaderTitle,
            ] 
       ...

and all is right now.

Relative paht solution does not work for me any other idea ? or complete sample code ? — fvisticot, Apr 04 '18 at 13:07
@fvisticot You can't mix relative path import with package import. They need to be consistent everywhere. import 'path/to/file' is not the same as import 'package:path/to/file' Stick with 1 method of import in your project. That is what fixed it for me. — SeaFuzz, Apr 04 '18 at 17:36
Tx, using only relative path everywhere in the project fixe the issue. — fvisticot, Apr 04 '18 at 17:55

How do I pass an Internationalization Object to Child Widgets in Flutter

1 Answers1

Linked