title: Different methods of internationalizing/localizing Flutter apps
body: <p>According to <a href="https://flutter.dev/docs/development/accessibility-and-localization/internationalization" rel="nofollow noreferrer">Flutter docs</a>, we can add localized messages by 2 methods:</p>
  <h3>Method 1</h3>
  <ol>
  <li><p>Add the following into the <code>pubspec.yaml</code> file.</p>
  <pre class="lang-yaml prettyprint-override"><code>dependencies:
    flutter:
      sdk: flutter
    flutter_localizations:
      sdk: flutter
    intl: ^0.17.0
  flutter:
   generate: true
  </code></pre>
  </li>
  <li><p>Create a <code>&lt;project-root&gt;/l10n.yaml</code> file containing:</p>
  <pre class="lang-yaml prettyprint-override"><code>arb-dir: lib/l10n
  template-arb-file: app_en.arb
  output-localization-file: demo_localizations.dart
  </code></pre>
  </li>
  <li><p>In <code>&lt;project-root/l10n.yaml&gt;</code>, create <code>app_locale.arb</code> for your translation files. For example:</p>
  <ul>
  <li><code>app_en.arb</code></li>
  </ul>
  <pre><code>{
    &quot;@@locale&quot;: &quot;en&quot;,
    &quot;helloWorld&quot;: &quot;Hello World!&quot;
  }
  </code></pre>
  <ul>
  <li><code>app_es.arb</code></li>
  </ul>
  <pre><code>{
    &quot;@@locale&quot;: &quot;es&quot;,
    &quot;helloWorld&quot;: &quot;Hola Mundo!&quot;
  }
  </code></pre>
  </li>
  <li><p><code>demo_localizations.dart</code> will be generated and can be imported to <code>main.dart</code> like this:</p>
  <pre class="lang-dart prettyprint-override"><code>import 'package:flutter/material.dart';
  import 'package:flutter_gen/gen_l10n/demo_localizations.dart';
  
  class MyApp extends StatelessWidget {
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        localizationsDelegates: DemoLocalizations.localizationsDelegates,
        supportedLocales: DemoLocalizations.supportedLocales,
        title: 'My app',
        home: ... ,
      );
    }
  }
  </code></pre>
  </li>
  </ol>
  <h3>Method 2: Defining a class for the app’s localized resources</h3>
  <ol>
  <li><p>Add the following into the <code>pubspec.yaml</code> file.</p>
  <pre class="lang-yaml prettyprint-override"><code>dependencies:
    flutter:
      sdk: flutter
    flutter_localizations:
      sdk: flutter
    intl: ^0.17.0
    intl_translation:
  flutter:
   generate: true
  </code></pre>
  </li>
  <li><p>Create a <code>DemoLocalizations</code> class that uses <code>initializeMessages()</code> and <code>Intl.message()</code>.</p>
  <pre class="lang-dart prettyprint-override"><code>class DemoLocalizations {
    DemoLocalizations(this.localeName);
  
    static Future&lt;DemoLocalizations&gt; load(Locale locale) {
      final String name = locale.countryCode == null || locale.countryCode!.isEmpty
          ? locale.languageCode
          : locale.toString();
      final String localeName = Intl.canonicalizedLocale(name);
  
      return initializeMessages(localeName).then((_) {
        return DemoLocalizations(localeName);
      });
    }
  
    static DemoLocalizations of(BuildContext context) {
      return Localizations.of&lt;DemoLocalizations&gt;(context, DemoLocalizations)!;
    }
  
    final String localeName;
  
    String get title {
      return Intl.message(
        'Hello World',
        name: 'title',
        desc: 'Title for the Demo application',
        locale: localeName,
      );
    }
  }
  </code></pre>
  </li>
  <li><p>Create a <code>DemoLocalizationsDelegate</code> class.</p>
  <pre class="lang-dart prettyprint-override"><code>class DemoLocalizationsDelegate extends LocalizationsDelegate&lt;DemoLocalizations&gt; {
    const DemoLocalizationsDelegate();
  
    @override
    bool isSupported(Locale locale) =&gt; ['en', 'es'].contains(locale.languageCode);
  
    @override
    Future&lt;DemoLocalizations&gt; load(Locale locale) =&gt; DemoLocalizations.load(locale);
  
    @override
    bool shouldReload(DemoLocalizationsDelegate old) =&gt; false;
  }
  </code></pre>
  </li>
  <li><p>Run</p>
  <pre><code>flutter pub run intl_translation:extract_to_arb --output-dir=lib/l10n lib/demo_localizations.dart
  </code></pre>
  <p>to generate <code>intl_messages.arb</code> file. Add <code>intl_en.arb</code> and <code>intl_es.arb</code> as your translation files.</p>
  </li>
  <li><p>With the app’s root directory as the current directory, run</p>
  <pre><code>flutter pub run intl_translation:generate_from_arb --output-dir=lib/l10n --no-use-deferred-loading lib/demo_localizations.dart lib/l10n/intl_*.arb
  </code></pre>
  <p>to generate <code>intl_messages_&lt;locale&gt;.dart</code> for each <code>intl_&lt;locale&gt;.arb</code> file and <code>intl_messages_all.dart</code>, which imports all of the messages files.</p>
  </li>
  <li><p>Import the required classes into <code>main.dart</code>.</p>
  <pre class="lang-dart prettyprint-override"><code>import 'package:flutter/material.dart';
  import 'demo_localizations.dart';
  import 'package:intl/intl.dart';
  import 'l10n/messages_all.dart';
  
  class MyApp extends StatelessWidget {
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        localizationsDelegates: DemoLocalizations.localizationsDelegates,
        supportedLocales: DemoLocalizations.supportedLocales,
        title: 'My app',
        home: ... ,
      );
    }
  }
  </code></pre>
  </li>
  </ol>
  <p>Are there any differences between these 2 methods? Can I know why we use Method 2 since there are more steps involved?</p>