How to Implement Multi-Language Support in Flutter app (Localization)

Hey dear readers, welcome back in our blog 1GB Developer. Now we are going to implement the feature which is responsible for supporting multi-language in your device. For example if you dont like english then change the app language into hindi.

So let start our coding for multi-language  support in flutter application :

Step 1. 

create two file named a) app_en.arb and b)app_hi.arb in lib/l10n :

a) app_hi.arb which contain data like this:

{

  "signup_welcome_desc": "शुरू करने के लिए फॉर्म भरें",

  "welcome_back": "वापसी पर स्वागत है!",

  "login_welcome_desc": "अपने खाता को प्रबंधित करने के लिए लॉगिन करें",

  "mobile_no": "मोबाइल नंबर",

  "email_address": "ईमेल पता",

  "mobile_no_email":"मोबाइल नंबर/ईमेल",

  "forgot_password":"पासवर्ड भूल गए?",

  "password": "पासवर्ड",

  "confirm_password": "पासवर्ड की पुष्टि करें",

  "name":"नाम",

  "referral":"रेफ़रल दर्ज करें (वैकल्पिक)",

  "get_started": "शुरू हो जाओ",

  "have_an_account": "{prefix} एक खाता है",

  "login": "लॉगिन",

  "sign_up": "साइन अप",

  "trending_products": "चर्चित उत्पाद",

  "popular_products": "लोकप्रिय उत्पाद",

  "new_products": "नए उत्पाद",

  "known_products": "प्रसिद्ध उत्पाद",

  "signup_for_newsletter": "समाचार पत्रिका के लिए साइन अप करें",

  "contact_info": "संपर्क जानकारी",

  "rupee":"₹. {value}",

  "edit_profile": "प्रोफ़ाइल संपादित करें",

  "wallet": "बटुआ",

  "manage_address": "पते का प्रबंधन",

  "language": "भाषा",

  "setting": "सेटिंग्स",

  "privacy": "गोपनीयता",

  "sign_out": "साइन आउट",

  "your_orders": "आपके आदेश",

  "buy_again": "फिर से खरीदें",

  "your_account": "आपका खाता",

  "your_lists": "आपकी सूचियाँ",

  "term_and_condition": "नियम और शर्तें",

  "search": "खोजें",

  "add_to_cart": "कार्ट में डालें",

  "add_to_wishlist": "इच्छा सूची में जोड़ें",

  "added_to_wishlist": "इच्छा सूची में जोड़ा गया",

  "percent_discount": "{value}% छूट",

  "compare": "तुलना करें",

  "color": "रंग",

  "delivery": "डिलीवरी",

  "product_description": "उत्पाद विवरण",

  "available_offers": "उपलब्ध ऑफ़र",

  "quantity": "मात्रा",

  "go_to_cart": "कार्ट पर जाएं",

  "checkout": "चेकआउट",

  "save_for_later": "बाद में सहेजें",

  "delete": "हटाएं",

  "proceed_with_defaul_address": "डिफ़ॉल्ट पते के साथ आगे बढ़ें",

  "proceed": "आगे बढ़ें",

  "pay_online": "ऑनलाइन भुगतान करें",

  "cash_on_delivery": "कैश ऑन डिलीवरी"

}

b) app_hi.arb which contain data like this:

{

  "signup_welcome_desc":"Fill out the form to get started",

  "welcome_back":"Sign in",

  "login_welcome_desc":"Login to manage your account",

  "mobile_no_email":"Mobile No./Email",

  "mobile_no":"Mobile No.",

  "forgot_password":"Forgot Password?",

  "email_address":"Email address",

  "password":"Password",

  "confirm_password":"Confirm Password",

  "name":"Name",

  "referral":"Enter Referral (optional)",

  "get_started":"Get Started",

  "have_an_account":"{prefix} have an account.",

  "login":"Login",

  "sign_up":"Sign Up",

  "trending_products": "Trending Products",

  "popular_products":"Popular Products",

  "new_products":"New Products",

  "known_products":"Known Products",

  "signup_for_newsletter":"Sign up for Newsletter",

  "contact_info":"Contact Info",

  "rupee":"Rs. {value}",

  "edit_profile":"Edit Profile",

  "wallet":"Wallet",

  "manage_address":"Manage Address",

  "language":"Language",

  "setting":"Setting",

  "privacy":"Privacy",

  "sign_out":"Sign Out",

  "your_orders":"Your Orders",

  "buy_again":"Buy Again",

  "your_account":"Your Account",

  "your_lists":"Your Lists",

  "term_and_condition":"Term and conditions",

  "search":"Search",

  "add_to_cart":"Add to cart",

  "add_to_wishlist":"Add to wishlist",

  "added_to_wishlist":"Added to wishlist",

  "percent_discount":"{value}% off",

  "compare":"Compare",

  "color":"Color",

  "delivery":"Delivery",

  "product_description":"Product Description",

  "available_offers":"Available Offers",

  "quantity":"Quantity",

  "go_to_cart":"Go to Kart",

  "checkout":"Checkout",

  "save_for_later":"Save for Later",

  "delete":"Delete",

  "proceed_with_defaul_address":"Proceed with default address",

  "proceed":"Proceed",

  "pay_online":"Pay Online",

  "cash_on_delivery":"Cash On Delivery"

}

step 2.  

In root directory where pubs.yaml file is present create new file with name l10n.yaml and put this code inside:

arb-dir: lib/l10n

template-arb-file: app_en.arb

output-localization-file: app_localizations.dart

Step 3. 

Go to main.dart file and put this code :

import 'package:flutter_gen/gen_l10n/app_localizations.dart';

import 'package:flutter_localizations/flutter_localizations.dart';

@override

  Widget build(BuildContext context) {

    return GetMaterialApp(

      title: 'Localizations Sample App',

      debugShowCheckedModeBanner: false,

      locale: Locale('hi'),

      localizationsDelegates: const [

        AppLocalizations.delegate,

        GlobalMaterialLocalizations.delegate,

        GlobalWidgetsLocalizations.delegate,

        GlobalCupertinoLocalizations.delegate,

      ],

      supportedLocales: const [

        Locale('en'),

        Locale('hi'),

      ],

Now this path will generated later when you build the code:

import 'package:flutter_gen/gen_l10n/app_localizations.dart';

Also dont forget to add this line in your pubs.yaml file:

# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter packages.

flutter:

  generate: true

  # The following line ensures that the Material Icons font is

  # included with your application, so that you can use the icons in

  # the material Icons class.

  uses-material-design: true

  # To add assets to your application, add an assets section, like this:

  assets:

    - assets/

  #   - images/a_dot_ham.jpeg

  # An image asset can refer to one or more resolution-specific "variants", see

  # https://flutter.dev/assets-and-images/#resolution-aware

  # For details regarding adding assets from package dependencies, see

  # https://flutter.dev/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,

  # in this "flutter" section. Each entry in this list should have a

  # "family" key with the font family name, and a "fonts" key with a

  # list giving the asset and other descriptors for the font. For

This generate:true will generate the file for localization.

also install this package: intl:^0.18.1

Thank you. Happy flutter  😃