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.2.1

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. Add the translations file paths to the pubspec.yaml or translations_code_gen.yaml file

translations_code_gen:
  keys:
    input: 'assets/translations/en.json'
    output: 'lib/translations/keys.dart'
  values:
    input: 'assets/translations/'
    output: 'lib/translations/values/'

Run this command to generate the translations keys and values to the output:

flutter pub run translations_code_gen

The -g or --generate flag is optional, if you don't use it, the tool will normally generate dart keys and values code for you.

This will generate the following keys to the lib/translations/keys.dart file:

// 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";
}

and the following values to the en.dart and ar.dart file to lib/translations/values/

example: lib/translations/values/en.dart

// 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,
};

example: lib/translations/values/ar.dart

// 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: "مرحبا",
  GENERAL.WELCOME: "أهلا بك",
};

const Map<String, String> _home  = {
  HOME.TITLE: "الرئيسية",
};

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 './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()),
      ),
    );
  }
}

5. Same as above but with the --generate flag

flutter pub run translations_code_gen --generate=json-values

There are 4 types of code generation mode:

• dart (default): generate dart keys and values code
• dart-keys: generate dart keys only.
• dart-values: generate dart values only.
• json-values: generate json values only.

Output with the --generate=json-values flag

example: lib/translations/values/en.json

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

example: lib/translations/values/ar.json

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