Localization in flutter

Localization is an essential aspect of developing mobile applications that target users from different parts of the world. Flutter has built-in support for localization, making it easy to create mobile apps that can display content in multiple languages. In this blog post, we’ll explore how to set the app’s locale in Flutter.

What is Locale in Flutter?

Locale is a combination of language and region-specific settings that are used to format data like date, time, currency, and numbers in a way that is appropriate for the target audience. The locale class in Flutter represents a specific geographical, political, or cultural region.

Steps to Set the App’s Locale in Flutter

Flutter has a built-in class called Locale that allows us to set the app’s locale. To set the app’s locale in Flutter, we need to follow the below steps:

Step 1: Add Flutter Localizations Package

The first step in setting the app’s locale in Flutter is to add the Flutter Localizations package. The Flutter Localizations package provides a set of pre-built translations and localization widgets that we can use to translate our app’s content.

To add the Flutter Localizations package, add the following line of code to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

Step 2: Define Supported Locales

The next step is to define the supported locales for your app. To do this, create a list of locales that your app will support, and specify them in the MaterialApp widget. For example:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en', 'US'),
        const Locale('fr', 'FR'),
        const Locale('es', 'ES'),
      ],
      home: MyHomePage(),
    );
  }
}

In the above code, we’ve defined three supported locales: English (United States), French (France), and Spanish (Spain).

Step 3: Set Default Locale

The next step is to set the default locale for your app. To do this, specify the defaultLocale parameter in the MaterialApp widget. For example:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en', 'US'),
        const Locale('fr', 'FR'),
        const Locale('es', 'ES'),
      ],
      defaultLocale: const Locale('en', 'US'),
      home: MyHomePage(),
    );
  }
}

In the above code, we’ve set the default locale to English (United States).

Step 4: Set App Locale

The final step is to set the app’s locale. To do this, we’ll use the MaterialApp widget's locale property. We can set the locale in response to user input, by reading the user's device settings, or by using a user preference.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en', 'US'),
        const Locale('fr', 'FR'),
        const Locale('es', 'ES'),
      ],
      defaultLocale:const Locale('en', 'US'),
      home: MyHomePage(),
      locale: _locale,
    );
  }

  Locale _locale = const Locale('en', 'US');
}

In the above code, we’ve defined a _locale variable that we'll use to set the app's locale. The initial value of _locale is set to English (United States). We can change the value of _locale to set the app's locale. For example, to set the app's locale to French (France), we can set the _locale variable as follows:

_locale = const Locale('fr', 'FR');

Step 5: Display Localized Text

After setting the app’s locale, we can display localized text in our app using the Localizations widget. For example, to display the localized text for the app's title, we can use the Localizations.of method:

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(Localizations.of<MaterialLocalizations>(
          context,
          MaterialLocalizations,
        ).appName),
      ),
      body: Center(
        child: Text(
          Localizations.of<MyAppLocalizations>(
            context,
            MyAppLocalizations,
          ).helloWorld,
        ),
      ),
    );
  }
}

In the above code, we’re using the Localizations widget to display the app's title and a simple hello world message. The Localizations.of method takes two arguments: the context and the type of the localization delegate.

Conclusion

In this blog post, we’ve explored how to set the app’s locale in Flutter. We’ve seen how to define supported locales, set the default locale, and change the app’s locale in response to user input. We’ve also seen how to display localized text using the Localizations widget. With these techniques, you can create mobile apps that can display content in multiple languages, making your app accessible to users from different parts of the world.