worker/lib/core/utils/README_L10N.md

Localization Extensions - Quick Start Guide

Using Localization in the Worker App

This file demonstrates how to use the localization utilities in the Worker Flutter app.

Basic Usage

1. Import the Extension

import 'package:worker/core/utils/l10n_extensions.dart';

2. Access Translations

// In any widget with BuildContext
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(context.l10n.home),       // "Trang chủ" or "Home"
        Text(context.l10n.products),    // "Sản phẩm" or "Products"
        Text(context.l10n.loyalty),     // "Hội viên" or "Loyalty"
      ],
    );
  }
}

Helper Functions

Date and Time

// Format date
final dateStr = L10nHelper.formatDate(context, DateTime.now());
// Vietnamese: "17/10/2025"
// English: "10/17/2025"

// Format date-time
final dateTimeStr = L10nHelper.formatDateTime(context, DateTime.now());
// Vietnamese: "17/10/2025 lúc 14:30"
// English: "10/17/2025 at 14:30"

// Relative time
final relativeTime = L10nHelper.formatRelativeTime(
  context,
  DateTime.now().subtract(Duration(minutes: 5)),
);
// Vietnamese: "5 phút trước"
// English: "5 minutes ago"

Currency

// Format Vietnamese Dong
final price = L10nHelper.formatCurrency(context, 1500000);
// Vietnamese: "1.500.000 ₫"
// English: "1,500,000 ₫"

Status Helpers

// Get localized order status
final status = L10nHelper.getOrderStatus(context, 'pending');
// Vietnamese: "Chờ xử lý"
// English: "Pending"

// Get localized project status
final projectStatus = L10nHelper.getProjectStatus(context, 'in_progress');
// Vietnamese: "Đang thực hiện"
// English: "In Progress"

// Get localized member tier
final tier = L10nHelper.getMemberTier(context, 'diamond');
// Vietnamese: "Kim cương"
// English: "Diamond"

// Get localized user type
final userType = L10nHelper.getUserType(context, 'contractor');
// Vietnamese: "Thầu thợ"
// English: "Contractor"

Counts with Pluralization

// Format points with sign
final points = L10nHelper.formatPoints(context, 100);
// Vietnamese: "+100 điểm"
// English: "+100 points"

// Format item count
final items = L10nHelper.formatItemCount(context, 5);
// Vietnamese: "5 sản phẩm"
// English: "5 items"

// Format order count
final orders = L10nHelper.formatOrderCount(context, 3);
// Vietnamese: "3 đơn hàng"
// English: "3 orders"

// Format project count
final projects = L10nHelper.formatProjectCount(context, 2);
// Vietnamese: "2 công trình"
// English: "2 projects"

// Format days remaining
final days = L10nHelper.formatDaysRemaining(context, 7);
// Vietnamese: "Còn 7 ngày"
// English: "7 days left"

Context Extensions

Language Checks

// Get current language code
final languageCode = context.languageCode;  // "vi" or "en"

// Check if Vietnamese
if (context.isVietnamese) {
  // Do something specific for Vietnamese
}

// Check if English
if (context.isEnglish) {
  // Do something specific for English
}

Parameterized Translations

// Simple parameter
final welcome = context.l10n.welcomeTo('Worker App');
// Vietnamese: "Chào mừng đến với Worker App"
// English: "Welcome to Worker App"

// Multiple parameters
final message = context.l10n.pointsToNextTier(500, 'Platinum');
// Vietnamese: "Còn 500 điểm để lên hạng Platinum"
// English: "500 points to reach Platinum"

// Order number
final orderNum = context.l10n.orderNumberIs('ORD-2024-001');
// Vietnamese: "Số đơn hàng: ORD-2024-001"
// English: "Order Number: ORD-2024-001"

// Redeem confirmation
final confirm = context.l10n.redeemConfirmMessage(500, 'Gift Voucher');
// Vietnamese: "Bạn có chắc chắn muốn đổi 500 điểm để nhận Gift Voucher?"
// English: "Are you sure you want to redeem 500 points for Gift Voucher?"

Complete Example

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:worker/core/utils/l10n_extensions.dart';

class OrderDetailPage extends ConsumerWidget {
  final Order order;

  const OrderDetailPage({required this.order});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(
        title: Text(context.l10n.orderDetails),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Order number
            Text(
              context.l10n.orderNumberIs(order.orderNumber),
              style: Theme.of(context).textTheme.titleLarge,
            ),
            const SizedBox(height: 8),

            // Order date
            Text(
              '${context.l10n.orderDate}: ${L10nHelper.formatDate(context, order.createdAt)}',
            ),
            const SizedBox(height: 8),

            // Order status
            Row(
              children: [
                Text(context.l10n.orderStatus + ': '),
                Chip(
                  label: Text(
                    L10nHelper.getOrderStatus(context, order.status),
                  ),
                ),
              ],
            ),
            const SizedBox(height: 16),

            // Items count
            Text(
              L10nHelper.formatItemCount(context, order.items.length),
              style: Theme.of(context).textTheme.titleMedium,
            ),
            const SizedBox(height: 16),

            // Total amount
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  context.l10n.total,
                  style: Theme.of(context).textTheme.titleMedium,
                ),
                Text(
                  L10nHelper.formatCurrency(context, order.total),
                  style: Theme.of(context).textTheme.titleLarge?.copyWith(
                    color: Theme.of(context).colorScheme.primary,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
            const SizedBox(height: 24),

            // Relative time
            Text(
              '${context.l10n.orderPlacedAt} ${L10nHelper.formatRelativeTime(context, order.createdAt)}',
              style: Theme.of(context).textTheme.bodySmall,
            ),
          ],
        ),
      ),
    );
  }
}

Best Practices

1. Always use context.l10n instead of AppLocalizations.of(context)!

   • Shorter and cleaner
   • Consistent throughout the codebase

2. Use helper functions for formatting

   • L10nHelper.formatCurrency() instead of manual formatting
   • L10nHelper.formatDate() for locale-aware dates
   • L10nHelper.getOrderStatus() for localized status strings

3. Check language when needed

   • Use context.isVietnamese and context.isEnglish
   • Useful for conditional rendering or logic

4. Never hard-code strings

   • Always use translation keys
   • Supports both Vietnamese and English automatically

5. Test both languages

   • Switch device language to test
   • Verify text fits in UI for both languages

See Also

• Full documentation: /Users/ssg/project/worker/LOCALIZATION.md
• Vietnamese translations: /Users/ssg/project/worker/lib/l10n/app_vi.arb
• English translations: /Users/ssg/project/worker/lib/l10n/app_en.arb
• Helper source code: /Users/ssg/project/worker/lib/core/utils/l10n_extensions.dart