Localized Strings in Flutter

Question

I am building a demo app to test using localization strings. I get the following error:

I/flutter (21588): The following NoSuchMethodError was thrown building MainApp(dirty): I/flutter (21588): The getter 'title' was called on null. I/flutter (21588): Receiver: null I/flutter (21588): Tried calling: title

I am not sure why I am getting this error. I have followed the indications on flutter documentation.

I have following Localization Class:

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'dart:async';
import 'package:bet_master/l10n/messages_all.dart';

class AppLocalizations {
  static Future<AppLocalizations> load(Locale locale) {
    final String name =
        locale.countryCode.isEmpty ? locale.languageCode : locale.toString();
    final localeName = Intl.canonicalizedLocale(name);

    return initializeMessages(localeName).then((bool _) {
      Intl.defaultLocale = localeName;
      return AppLocalizations();
    });
  }
  static AppLocalizations of(BuildContext context) {
    return Localizations.of<AppLocalizations>(context, AppLocalizations);
  }

  String get title {
    return Intl.message(
      'Bet Master',
      name: 'title',
      desc: 'App Title'
    );
  }

  String get search {
    return Intl.message(
      'Search',
      name: 'search',
      desc : ''
    );
  }

}

class AppLocalizationsDelegate extends LocalizationsDelegate<AppLocalizations> {
  const AppLocalizationsDelegate();

  @override
  bool isSupported(Locale locale) {
    return ['en', 'es', 'fr'].contains(locale.languageCode);
  }

  @override
  Future<AppLocalizations> load(Locale locale) {
    return AppLocalizations.load(locale);
  }

  @override
  bool shouldReload(AppLocalizationsDelegate old) {
    return false;
  }
}

For the Home Widget I am only setting the title

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:bet_master/localization/localizations.dart';

void main() {
  runApp(MainApp());
}

class MainApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        localizationsDelegates: [
          const AppLocalizationsDelegate(),
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate
        ],
        supportedLocales: [
          const Locale('en', ''),
          const Locale('es', ''),
          const Locale('fr', ''),
        ],
        home: Scaffold(
          appBar: AppBar(
            title: Text(AppLocalizations.of(context).title),
          ),
        ),
      );
  }
}

Answer 1

I had the same error, but my problem was that I was using two nested MaterialApp() widgets.

It was causing that this line retuns null:

return Localizations.of<AppLocalizations>(context, AppLocalizations);

I replaced the nested MarerialApp(The child) widget with a Scaffold and It worked.

Hope It helps someone!

Answer 2

At the end the issue seems related to Localization not being available, I moved the "home" code to another widget and solved the issue.

Widget build(BuildContext context) {
    return new MaterialApp(
        localizationsDelegates: [
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
          _appLocalizationsDelegate,
        ],
        supportedLocales: [
           Locale('en'),
           Locale('es'),
        ],
        locale: _appLocalizationsDelegate.overridenLocale,
        onGenerateTitle: (BuildContext context) => AppLocalizations.of(context).title,
        home: Home()
      );
  }
}

class Home extends StatelessWidget {
  @override
    Widget build(BuildContext context) {
      return new Scaffold(
          appBar: AppBar(
            title: Text(AppLocalizations.of(context).title),
          ),
          body: Column(children: <Widget>[
            Text('hola'),
          ],) 
        );
    }
}

I need to research still why is this needed, but at least it works now.