Localization with flutter

How to Implement Localization in Your Flutter App

Are you ready to take your Flutter app global?

Implementing localization is the key to reaching a wider audience and providing a seamless user experience for international users.

In this blog post, we’ll walk you through the steps of implementing localization in your Flutter app so you can expand your reach and connect with users from around the world.

From translating text to handling date formats, we’ve got everything you need to know to make your app accessible and appealing to everyone.

So let’s get started on making your app a hit across borders!

What is Localization?

Localization is the process of making your app available in multiple languages. To do this, you’ll need to create separate versions of your app for each language.

There are a few different ways to localize your Flutter app. The most common method is to use the Internationalization plugin, which provides a number of helper classes and methods for localizing your app.

Once you’ve decided how you’re going to localize your app, you can start adding support for additional languages by following the instructions in the Internationalization plugin documentation or the Localizations class documentation.

Benefits of Implementing Localization in a Flutter App

One of the great things about Flutter is that it makes it easy to localize your app. Localization allows you to reach a wider audience by translating your app into different languages. Not only does this make your app more accessible to a larger group of people, but it can also help you to better understand your users and their needs.

Setting Up the Environment and Configuring Your Flutter Project

 dependencies:
 flutter:
 sdk: flutter
 cupertino_icons: ^0.1.2
 flutter_localizations:
   sdk: flutter

Create a lang folder.
Add your language support file.

hi.json
    {
    "hello":"नमस्ते"
    }
en.json
    {
    "hello":"hello"
    }

Create a string file for the project


class AppString {
  AppString._();
  AppString appString = AppString._();
  static String hello = "hello";
  static String entername = "entername";
  static String enterpassword = "enterpassword";
  static String forgotpassword = "forgotpassword";
  static String hometitle = "hometitle"
}

Create the app_localization folder and then create the localization_app.dart file.

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class AppLocalization {
  Locale local = const Locale('en', 'US');

  AppLocalization(this.local);

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

  late Map<String, String> _localizationValue;

  Future load() async {
    String jsonStringValue =
        await rootBundle.loadString("lib/lang/${local.languageCode}.json");
    Map<String, dynamic> mapResponse = jsonDecode(jsonStringValue);
    _localizationValue =
        mapResponse.map((key, value) => MapEntry(key, value.toString()));
  }

  String? getConvertedValue(String key) {
    return _localizationValue[key];
  }

  static const LocalizationsDelegate<AppLocalization> delegate =
      AppLocalizationsDelegate();
}

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

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

  @override
  Future<AppLocalization> load(Locale locale) async {
    AppLocalization appLocalization = AppLocalization(locale);
    await appLocalization.load();
    return appLocalization;
  }

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

Change code in _MyAppState()

Locale _locale = const Locale('en', 'US');
void setLocale(Locale locale) {
    setState(() {
      _locale = locale;
    });
  }

Change code as per MaterialApp property

return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      locale: _locale,
      localizationsDelegates: const [
        AppLocalization.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: const [
        Locale('en', "US"), // English
        Locale('ar', "SA"), // Saudi
        Locale('hi', "IN"), // Hindi
      ],
      localeResolutionCallback: (deviceLocale, supportedLocales) {
        for (var locale in supportedLocales) {
          if (locale.languageCode == deviceLocale?.languageCode &&
              locale.countryCode == deviceLocale?.countryCode) {
            return deviceLocale;
          }
        }
        return supportedLocales.first;
      },
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );

Now Past the Scaffold code

return Scaffold(
      drawer: Drawer(
        child: ListView(
          children: [
            Container(color: Colors.blue, height: 150),
            ListTile(
              onTap: () {
                MyApp.setLocal(context, const Locale("en", "US"));
                Navigator.pop(context);
              },
              title: Text(AppString.english),
            ),
            ListTile(
              onTap: () {
                MyApp.setLocal(context, const Locale("hi", "IN"));
                Navigator.pop(context);
              },
              title: Text(AppString.hindi),
            ),
            ListTile(
              onTap: () {
                MyApp.setLocal(context, const Locale("ar", "SA"));
                Navigator.pop(context);
              },
              title: Text(AppString.turkish),
            ),
          ],
        ),
      ),
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
                decoration: InputDecoration(
                    hintText: getTranslated(context, AppString.entername))),
            TextField(
                decoration: InputDecoration(
                    hintText: getTranslated(context, AppString.enterpassword))),
            const SizedBox(height: 20),
            Text(getTranslated(context, AppString.forgotpassword)),
          ],
        ),
      ),
    );

Conclusion:

Localization is an important consideration when developing your Flutter app. Implementing localization can help reach a wider audience, increase engagement, and make sure users have a great experience with your application regardless of their language or location. With the right tools and techniques, you can quickly add support for multiple languages to your app. Whether you are building a professional translation solution or just need basic text replacement in a few places, localization can be an invaluable addition to any Flutter application.

The Below link more helpfully for localization

https://docs.flutter.dev/development/accessibility-and-localization/internationalization

Localization with flutter