Widgets

TextTr

Introduction

The TextTr widget is a convenience wrapper around Flutter's Text widget that automatically translates its content using Nylo Website's localization system.

Instead of writing:

Text("hello_world".tr())

You can write:

TextTr("hello_world")

This makes your code cleaner and more readable, especially when dealing with many translated strings.

Basic Usage

@override
Widget build(BuildContext context) {
  return Column(
    children: [
      TextTr("welcome_message"),

      TextTr(
        "app_title",
        style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
        textAlign: TextAlign.center,
      ),
    ],
  );
}

The widget will look up the translation key in your language files (e.g., /lang/en.json):

{
  "welcome_message": "Welcome to our app!",
  "app_title": "My Application"
}

String Interpolation

Use the arguments parameter to inject dynamic values into your translations:

TextTr(
  "greeting",
  arguments: {"name": "John"},
)

In your language file:

{
  "greeting": "Hello, {{name}}!"
}

Output: Hello, John!

Multiple Arguments

TextTr(
  "order_summary",
  arguments: {
    "item": "Coffee",
    "quantity": "2",
    "total": "\$8.50",
  },
)
{
  "order_summary": "You ordered {{quantity}}x {{item}} for {{total}}"
}

Output: You ordered 2x Coffee for $8.50

Styled Constructors

TextTr provides named constructors that automatically apply text styles from your theme:

displayLarge

TextTr.displayLarge("page_title")

Uses Theme.of(context).textTheme.displayLarge style.

headlineLarge

TextTr.headlineLarge("section_heading")

Uses Theme.of(context).textTheme.headlineLarge style.

bodyLarge

TextTr.bodyLarge("paragraph_text")

Uses Theme.of(context).textTheme.bodyLarge style.

labelLarge

TextTr.labelLarge("button_label")

Uses Theme.of(context).textTheme.labelLarge style.

Example with Styled Constructors

@override
Widget build(BuildContext context) {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      TextTr.headlineLarge("welcome_title"),
      SizedBox(height: 16),
      TextTr.bodyLarge(
        "welcome_description",
        arguments: {"app_name": "MyApp"},
      ),
      SizedBox(height: 24),
      TextTr.labelLarge("get_started"),
    ],
  );
}

Parameters

TextTr supports all standard Text widget parameters:

Parameter Type Description
data String The translation key to look up
arguments Map<String, String>? Key-value pairs for string interpolation
style TextStyle? Text styling
textAlign TextAlign? How the text should be aligned
maxLines int? Maximum number of lines
overflow TextOverflow? How to handle overflow
softWrap bool? Whether to wrap text at soft breaks
textDirection TextDirection? Direction of the text
locale Locale? Locale for text rendering
semanticsLabel String? Accessibility label

Comparison

Approach Code
Traditional Text("hello".tr())
TextTr TextTr("hello")
With arguments TextTr("hello", arguments: {"name": "John"})
Styled TextTr.headlineLarge("title")