Internationalizing and Localizing Your Flutter App

Customizing Drink Suggestions

Much like the metric units, you can’t change a suggested caffeinated drink just by replacing its name.

Lattes and pingados have different amounts of caffeine and serving sizes, so you need to make a few additional changes. Open lib/drink.dart, and add the following import:

import 'package:buzzkill/generated/l10n.dart';

Add this function to Drink:

static List<Drink> suggestionListOf(BuildContext context) {
  final suggestionList = [
    Drink(
      name: S.of(context).firstSuggestedDrinkName,
      caffeineAmount: 145,
      servingSize: 8,
    ),
    Drink(
      name: S.of(context).secondSuggestedDrinkName,
      caffeineAmount: 77,
      servingSize: 1.5,
    ),
  ];
  final countryCode = Localizations.localeOf(context).countryCode;
  if (countryCode == 'BR') {
    suggestionList.add(
      Drink(
        name: S.of(context).thirdSuggestedDrinkName,
        servingSize: 6.42,
        caffeineAmount: 23,
      ),
    );
  } else {
    suggestionList.add(
      Drink(
        name: S.of(context).thirdSuggestedDrinkName,
        caffeineAmount: 154,
        servingSize: 16,
      ),
    );
  }

  return suggestionList;
}

That makes the last item of the list adaptable to the device’s country.

Open lib/pages/form_page.dart, and in didChangeDependencies(), change the _drinkSuggestions initialization to:

_drinkSuggestions = Drink.suggestionListOf(context);

Here, you delegate the creation of the suggested drinks to Drink. You can now add a drink specific to the culture of the country you’re targeting. Now, you’ll add support for RTL languages.

Preparing for RTL Languages

For the final touch, open lib/ui_components/informative_card.dart and change the padding of the second Padding to:

const EdgeInsetsDirectional.only(
  top: 16,
  end: 16,
  bottom: 16,
)

Can you spot the difference?

When using EdgeInsetsDirectional, you don’t specify left and right, but start and end. This is RTL-friendly. Make a habit of using it whenever you need different values for left and right.

Finally, build and run and delight yourself with a fully-localized app. Again, play with the device’s language settings to ensure everything works as intended.

Where to Go From Here?

You can download the completed project files by clicking on the Download Materials button at the top or bottom of the tutorial.

Take a look at an updated version of the l10n illustration:

You’ve now colored some of the circles and tried out some of the available localization options. This is the furthest you can go with Buzz Kill.

By now, you’re hopefully seen there’s no better return on investment for your apps than localization.

In less than an hour, you opened Buzz Kill up to a multitude of new potential users without adding a single feature. And it only gets better: You don’t have to go through the internationalization process again when you add support for new locales. Just add a new .arb file and you’re good to go — assuming there aren’t any other localization requirements for you to meet.

For future projects, you can also look to the Intl package to help you with:

• Date Parsing/Formatting: Not every country uses the U.S.’s month/day/year format for dates. Intl can handle that for you.
• Genders: Intl lets you display text depending on a given subject gender, just as you can display singular or plural language based on a given number.
• Bidirectional Text: When right-to-left meets left-to-right language, as when a Hebrew page embeds an English word, Intl can help.

Wanna know what happens if the user selects a language other than American English or Brazilian Portuguese? You can learn more about it in the official Flutter docs.

If you enjoyed this article or have any questions, let us know by using the comments section below.