{"id":163,"date":"2025-04-03T08:36:40","date_gmt":"2025-04-03T08:36:40","guid":{"rendered":"https:\/\/documentation.iqonic.design\/streamit-laravel\/?p=163"},"modified":"2025-08-06T09:03:38","modified_gmt":"2025-08-06T09:03:38","slug":"how-to-add-a-new-app-language-into-flutter-app","status":"publish","type":"post","link":"https:\/\/documentation.iqonic.design\/streamit-laravel\/how-to-add-a-new-app-language-into-flutter-app\/","title":{"rendered":"How to add a new app language into flutter app?"},"content":{"rendered":"<div class=\"nolwrap\">\n<p><strong>\ud83d\udd52 Estimated Reading:<\/strong>\u00a01 Minutes<\/p>\n\n\n\n<p>This guide helps you add a new language into your Flutter app by creating a new localization Dart file and updating related components.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 1 \u2013 Open Your Project<\/strong><\/h3>\n\n\n\n<p>Open your Flutter project using your preferred development IDE (e.g., Android Studio, VS Code).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 2 \u2013 Generate Language Dart File<\/strong><\/h3>\n\n\n\n<p>1. Navigate to:&nbsp;<strong>lib \u2192 locale<\/strong>&nbsp;folder.<\/p>\n\n\n\n<p>2. Create a new Dart file for the language you want to add.<br>For example, to add German, create a file named:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">language_de.dart<\/pre>\n\n\n\n<p>3. Inside the file, define a class with the language name and add translated strings.<br>Example:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">class LanguageDe {<br>  \/\/ Add key-value pairs for all translated strings<br>}<\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\ud83d\udca1&nbsp;<strong>TIP:<\/strong><br>Follow the naming pattern:<br><strong>language_&lt;languageCode&gt;.dart<\/strong><br>Example:<\/p>\n<\/blockquote>\n\n\n\n<ul class=\"wp-block-list\">\n<li>English: language_en.dart<\/li>\n\n\n\n<li>Spanish: language_es.dart<\/li>\n\n\n\n<li>French: language_fr.dart<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 3 \u2013 Update App Localizations<\/strong><\/h3>\n\n\n\n<p>1. Open the&nbsp;<strong>app_localizations.dart<\/strong>&nbsp;file.<\/p>\n\n\n\n<p>2. Inside a&nbsp;<strong>switch<\/strong>&nbsp;statement, add the following code to handle the new language:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">case 'de':<br>  return LanguageDe();<\/pre>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/documentation.iqonic.design\/kivicare-pharma\/wp-content\/uploads\/sites\/16\/2025\/07\/image-75.png\"><img decoding=\"async\" src=\"https:\/\/documentation.iqonic.design\/kivicare-pharma\/wp-content\/uploads\/sites\/16\/2025\/07\/image-75.png\" alt=\"\" class=\"wp-image-529\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 4 \u2013 Add Flag Image<\/strong><\/h3>\n\n\n\n<p>1. Go to the&nbsp;<strong>assets \u2192 flags<\/strong>&nbsp;folder.<\/p>\n\n\n\n<p>2. Add the respective flag image.<br>Example for German:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">ic_de.png<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 5 \u2013 Update Common Base<\/strong><\/h3>\n\n\n\n<p>1. Open the&nbsp;<strong>utils \u2192 common_base.dart<\/strong>&nbsp;file.<\/p>\n\n\n\n<p>2. Locate the&nbsp;<strong>languageList()<\/strong>&nbsp;method.<\/p>\n\n\n\n<p>3. Add a new&nbsp;<strong>LanguageDataModel<\/strong>&nbsp;entry like this:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">LanguageDataModel(<br>   id: 2,<br>   name: 'German',<br>   languageCode: 'de',<br>   fullLanguageCode: 'de-DE',<br>   flag: 'assets\/flags\/ic_de.png',<br> ),<\/pre>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/documentation.iqonic.design\/kivicare-pharma\/wp-content\/uploads\/sites\/16\/2025\/07\/image-76.png\"><img decoding=\"async\" src=\"https:\/\/documentation.iqonic.design\/kivicare-pharma\/wp-content\/uploads\/sites\/16\/2025\/07\/image-76.png\" alt=\"\" class=\"wp-image-530\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Additional Info<\/strong><\/h3>\n\n\n\n<p>Make sure you use the&nbsp;<strong>correct ISO 639-1 language code<\/strong>&nbsp;in both&nbsp;<strong>languageCode<\/strong>&nbsp;and&nbsp;<strong>fullLanguageCode<\/strong>.<\/p>\n\n\n\n<p>If you are unsure about the language code, use the resource below to find it:<\/p>\n\n\n\n<p>\ud83d\udd17\u00a0<a href=\"https:\/\/www.science.co.il\/language\/Locale-codes.php#definitions\" target=\"_blank\" rel=\"noreferrer noopener\">Click here get language codes<\/a><\/p>\n\n\n\n<p>\u2705 That\u2019s it! You\u2019ve successfully added a new language to your Flutter application.<\/p>\n\n\n\n<p><\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>\ud83d\udd52 Estimated Reading:\u00a01 Minutes This guide helps you add a new language into your Flutter app by creating a new localization Dart file and updating related components. Step 1 \u2013 Open Your Project Open your Flutter project using your preferred development IDE (e.g., Android Studio, VS Code). Step 2 \u2013 Generate Language Dart File 1. [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":0,"parent":142,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-163","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"featured_image_src":null,"author_info":{"display_name":"laraveladminiq","author_link":"https:\/\/documentation.iqonic.design\/streamit-laravel\/author\/laraveladminiq\/"},"children":[],"_links":{"self":[{"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/posts\/163","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/comments?post=163"}],"version-history":[{"count":9,"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/posts\/163\/revisions"}],"predecessor-version":[{"id":1199,"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/posts\/163\/revisions\/1199"}],"up":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/posts\/142"}],"wp:attachment":[{"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/media?parent=163"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/categories?post=163"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/streamit-laravel\/wp-json\/wp\/v2\/tags?post=163"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}