Translations code generator #

This is a simple tool to generate the translations code for the Dart/Flutter projects.

Quickstart • Pub.dev

Install #

1. Add the dependency #

dependencies:
  translations_code_gen: ^1.0.0

2. Run this commend #

$ flutter pub get

Usage #

1. Create a translations files in assets folder #

Create a folder called assets in the root of your project and create a file called en.json and ar.json and add the following content:

example: assets/translations/en.json

{
  "GENERAL": {
    "HELLO": "Hello",
    "WELCOME": "Welcome"
  },
  "HOME": {
    "TITLE": "Home"
  }
}

example: assets/translations/ar.json

{
  "GENERAL": {
    "HELLO": "مرحبا",
    "WELCOME": "أهلا بك"
  },
  "HOME": {
    "TITLE": "الرئيسية"
  }
}

2. Generate the translations keys #

Run this command to generate the translations keys:

$ flutter pub run translations_code_gen keys assets/translations/en.json lib/translations/keys.dart

The 1st argument is the command name, the 2nd argument is the path to the translations file, the 3rd argument is the path to the output file.

This will generate the following code:

// GENERATED CODE - DO NOT MODIFY BY HAND
// ignore_for_file: constant_identifier_names, camel_case_types

class GENERAL {
  static const String HELLO = "GENERAL.HELLO";
  static const String WELCOME = "GENERAL.WELCOME";
}

class HOME {
  static const String TITLE = "HOME.TITLE";
}

3. Generate the translations values #

Run this command to generate the translations values:

$ flutter pub run translations_code_gen values assets/translations/en.json lib/translations/values/en.dart

The 1st argument is the command name, the 2nd argument is the path to the translations folder, the 3rd argument is the path to the output file.

This will generate the following code:

// GENERATED CODE - DO NOT MODIFY BY HAND
// ignore_for_file: constant_identifier_names

import '../keys.dart'; // sometimes you need to change this path to match your project structure

const Map<String, String> _general  = {
  GENERAL.HELLO: "Hello",
  GENERAL.WELCOME: "Welcome",
};

const Map<String, String> _home  = {
  HOME.TITLE: "Home",
};

final Map<String, String> enValues = {
  ..._general,
  ..._home,
};

You might have to change the keys import path to match your project structure.

4. Use the generated code #

import 'package:flutter/material.dart';
import 'package:my_app/translations/keys.dart';

// any translation package

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(HOME.TITLE.tr()),
      ),
      body: Center(
        child: Text(GENERAL.HELLO.tr()),
      ),
    );
  }
}