What Is String XML File In Flutter

What Is String XML File In Flutter??

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 GuideFlutter ProjectsCode 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.

Abhishek Dhanani

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.

Leave a comment

Your email address will not be published. Required fields are marked *


Discuss Your Project

Connect with Flutter Agency's proficient skilled team for your app development projects across different technologies. We'd love to hear from you! Fill out the form below to discuss your project.

Build Your Agile Team

Hire Skilled Developer From Us

"*" indicates required fields

✓ Valid number ✕ Invalid number

ready to get started?

Fill out the form below and we will be in touch soon!

"*" indicates required fields

✓ Valid number ✕ Invalid number