What Is String XML File In Flutter??

• General

Earlier we have been through various articles based on flutter how to disable the button in flutter. So in this article, we will go through What Is String XML File In Flutter.

What is String XML File In Flutter??

Flutter currently doesn’t have a dedicated resources-like system for strings. At the moment, the best practice is to hold your copy text in a class as static fields and accessing them from there. For example:

class Strings {
  static const String welcomeMessage = "Welcome To Flutter";
}

Then in your code, you can access your strings as such:

Text(Strings.welcomeMessage)

There’s now this package that allows you to create JSON files with your Strings. It will allow you to create Strings for plurals, genders and languages, etc

You can create a separate JSON file for each language like so:

String_en.json

{
"thanks": "Thanks."
}

String_nl.json

{    
"thanks": "Dankjewel."
}

And then use this to access it

S.of(context).thanks;

It will know which language to choose based on your phone’s default language.

For those of you who don’t want to use any 3rd party plugin, here is how you can do it.

• Create a folder string in assets. Put your language file in it.

  assets
    strings
    - en.json // for english 
    - ru.json  // for russian
  

• Now in en.json, write your string, for example.

  {
    "text1": "Hello",
    "text2": "World"
  }

  Similarly, in ru.json,

  {
    "text1": "Привет",
    "text2": "Мир"
  }

Add this to

flutter:

  uses-material-design: true

  assets:
    - assets/strings/en.json
    - assets/strings/ru.json

• Now you are all set to use these strings in your app. Here is the sample code, the AppBar shows the translated text.

  void main() {
    runApp(
      MaterialApp(
        locale: Locale("ru"), // switch between en and ru to see effect
        localizationsDelegates: [const DemoLocalizationsDelegate()],
        supportedLocales: [const Locale('en', ''), const Locale('ru', '')],
        home: HomePage(),
      ),
    );
  }
  
  class HomePage extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(title: Text(DemoLocalizations.of(context).getText("text2") ?? "Error")),
      );
    }
  }
  
  // this class is used for localizations
  class DemoLocalizations {
    static DemoLocalizations of(BuildContext context) {
      return Localizations.of<DemoLocalizations>(context, DemoLocalizations);
    }
  
    String getText(String key) => language[key];
  }
  
  Map<String, dynamic> language;
  
  class DemoLocalizationsDelegate extends LocalizationsDelegate<DemoLocalizations> {
    const DemoLocalizationsDelegate();
  
    @override
    bool isSupported(Locale locale) => ['en', 'ru'].contains(locale.languageCode);
  
    @override
    Future<DemoLocalizations> load(Locale locale) async {
      String string = await rootBundle.loadString("assets/strings/${locale.languageCode}.json");
      language = json.decode(string);
      return SynchronousFuture<DemoLocalizations>(DemoLocalizations());
    }
  
    @override
    bool shouldReload(DemoLocalizationsDelegate old) => false;
  }

  We can use this method instead of using a third-party lib. Basically, I create a class that holds those values string, colors, dimension, etc.

• Resources.dart

  import 'dart:ui';
  
  class ResString{
    var data = {
      'url' : 'https://facebook.com/',
      'welcome' : 'Welcome Home',
    };
  
    String get(String key){
      return data[key];
    }
  }
  
  class ResColor{
    var data = {
      'colorPrimary' : 0xff652A04,
      'colorPrimaryDark' : 0xffFFFFFF,
      'colorPrimaryLight' : 0xffF6EDDD,
    };
  
    Color get(String key){
      return Color(data[key]);
    }
  }

  To use it, simply call the get method

  import 'package:my_app/resources.dart';
  ...
      return Container(
        color: ResColor().get('colorPrimary')
      );
  ...

Conclusion:

So in this article, We have been through How to Create Multiline Text In Flutter?

Keep Learning !!! Keep Fluttering !!!

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.