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 ๐
