Unlocking the Power of Internationalization in your Flutter App

Unlocking the Power of Internationalization in your Flutter App

ยท

3 min read

Introduction ๐Ÿ™‹๐Ÿปโ€โ™‚๏ธ

Making a multi-language app in Flutter is a great way to cater to a global audience and provide a seamless experience for users who speak different languages. With Flutter's easy-to-use localization features, it's possible to create an app that can adapt to other languages with minimal effort. In this blog post, we will explore the flutter_locales package in Flutter.

We will also discuss best practices for testing and debugging your multi-language app and tips for making sure your app is accessible to users with different language needs. Whether you're a beginner or an experienced developer, this guide will help you create a multi-language app that is both functional and user-friendly.

So without wasting any time, let's get started.

Project Setup ๐Ÿ’ป

First of all, import the flutter_locales package into your project.

dependencies:
  flutter_locales: ^2.0.2

Next, create JSON files for the languages that you want in your app. The JSON files will be key-value pair files where the key will be the text to be displayed and the value will be its translation.

Example app assets/locales

In the above image, there are two json files, one for English and the other for Arabic.

Create these JSON files in the locales folder. Make sure, the locales folder is in your assets folder. Also, don't forget to include assets/locales/ folder in your YAML file.

flutter:
  uses-material-design: true
  assets:
    - assets/locales/

Coding the Logic โš’๏ธ

First of all, make these changes in your void main function.

void main() async {
  WidgetsFlutterBinding.ensureInitialized(); 
  await Locales.init(['en', 'fa']); // get last saved language
  // remove await if you want to get app default language
  runApp(MyApp());
}

WidgetsFlutterBinding.ensureInitialized() is a method that is used to initialize the Flutter framework. This method is typically called at the beginning of the main() function in a Flutter app. The purpose of this method is to ensure that the Flutter framework has been properly initialized and set up before any other code is executed.

Next, we will wrap our MaterialApp with the LocaleBuilder widget. This widget comes in-built with the flutter_locales package.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LocaleBuilder(
      builder: (locale) => MaterialApp(
        title: 'Flutter Locales',
        localizationsDelegates: Locales.delegates,  
        supportedLocales: Locales.supportedLocales, // the languages that we support
        locale: locale,  // tells about current language
        home: HomeScreen(),
      ),
    );
  }
}

Now, if we want our Text to change the language at the press of a button, we only need one line of code.

Locales.change(context, 'fa');

We can't use the normal text widget to display our text though, we have to use the LocaleText() widget which comes along with the flutter_locales package.

LocaleText(`welcome`,style:TextStyle(color:Colors.black));

You can also know about the current app language by calling this function

Locales.currentLocale(context);

Conclusion ๐Ÿ‘‹๐Ÿป

So with this, we come to an end. flutter_locales makes life much easier if you want to add multi-language support to your app. There are a few more packages that do the job. You can check them out on pub.dev. I hope you learned something new today.

You can appreciate and support my blogs via.

https://cdn.hashnode.com/res/hashnode/image/upload/v1646372265341/O0KkM6E-0.png

Also, let's connect on Twitter. Follow CSwithIyush for more amazing tutorials, tips/tricks on Flutter & DSA.

Did you find this article valuable?

Support Ayush Pawar by becoming a sponsor. Any amount is appreciated!

ย