Internationalization trong ứng dụng Flutter

Internationalization (i18n) là một bước quan trọng khi phát triển ứng dụng đa ngôn ngữ, giúp người dùng từ các quốc gia và ngôn ngữ khác nhau có thể sử dụng ứng dụng một cách dễ dàng. Trong bài viết này, chúng ta sẽ tìm hiểu cách internationalize ứng dụng Flutter.

Internationalization là gì?

Internationalization là quá trình chuẩn bị ứng dụng để hỗ trợ nhiều ngôn ngữ và định dạng khác nhau mà không cần phải thay đổi mã nguồn chính. Việc này thường bao gồm dịch văn bản, định dạng ngày giờ, đơn vị tiền tệ, và các định dạng số.

Flutter hỗ trợ internationalization thông qua gói intl và các công cụ tích hợp sẵn để dễ dàng chuyển đổi ngôn ngữ trong ứng dụng của bạn.

Các bước internationalize trong Flutter

Thêm thư viện cần thiết:

Trước hết, chúng ta cần thêm các gói cần thiết vào file pubspec.yaml. Gói flutter_localizations cung cấp các lớp và tài nguyên để hỗ trợ nhiều ngôn ngữ khác nhau.

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: any

Sau đó, chạy lệnh để cài đặt các gói này:

flutter pub get

Cấu hình hỗ trợ đa ngôn ngữ trong ứng:

Để ứng dụng Flutter của bạn hỗ trợ nhiều ngôn ngữ, bạn cần cấu hình trongfile MaterialApp. Hãy đảm bảo thêm các giá trị sau:

import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

MaterialApp(
  localizationsDelegates: [
    AppLocalizations.delegate,
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: [
    Locale('en'), // Tiếng Anh
    Locale('vi'), // Tiếng Việt
  ],
  locale: Locale('vi'), // Ngôn ngữ mặc định
  home: MyHomePage(),
);

Trong đoạn mã trên:

• supportedLocales: Đây là danh sách các ngôn ngữ mà ứng dụng hỗ trợ. Ở đây chúng ta đang hỗ trợ tiếng Anh và tiếng Việt.
• localizationsDelegates: Đây là các delegate cung cấp tài nguyên ngôn ngữ cho ứng dụng.

Tạo tệp ngôn ngữ:

Flutter sử dụng các tệp .arb (Application Resource Bundle) để lưu trữ các chuỗi văn bản cho các ngôn ngữ khác nhau. Bạn cần tạo các file với đuôi .arb trong thư mục lib/l10n/ để chứa văn bản cho các ngôn ngữ được hỗ trợ.

Ví dụ, bạn tạo hai tệp: app_en.arb cho tiếng Anh và app_vi.arb cho tiếng Việt.

app_en.arb

{
  "helloWorld": "Hello World!",
  "greetingMessage": "Welcome to our app!"
}

app_vi.arb

{
  "helloWorld": "Xin chào thế giới!",
  "greetingMessage": "Chào mừng bạn đến với ứng dụng của chúng tôi!"
}

Sử dụng chuỗi văn bản trong ứng dụng:

Sau khi tạo các tệp .arb, bạn có thể sử dụng các chuỗi văn bản đó trong mã nguồn Flutter. Hãy sử dụng gói AppLocalizations để truy cập vào các chuỗi văn bản dịch.

import 'package:flutter_gen/gen_l10n/app_localizations.dart';

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(AppLocalizations.of(context)!.helloWorld),
    ),
    body: Center(
      child: Text(AppLocalizations.of(context)!.greetingMessage),
    ),
  );
}

Trong đoạn mã trên, AppLocalizations.of(context) sẽ trả về các chuỗi văn bản tương ứng với ngôn ngữ hiện tại của ứng dụng.

Thay đổi ngôn ngữ động trong ứng dụng

Nếu bạn muốn cho phép người dùng thay đổi ngôn ngữ trong ứng dụng, bạn cần quản lý trạng thái Locale trong MaterialApp.

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Locale _locale = Locale('en');

  void _changeLanguage(String languageCode) {
    setState(() {
      _locale = Locale(languageCode);
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      locale: _locale,
      localizationsDelegates: [
        AppLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: [
        Locale('en'),
        Locale('vi'),
      ],
      home: MyHomePage(onChangeLanguage: _changeLanguage),
    );
  }
}

Trong MyHomePage, bạn có thể sử dụng nút để thay đổi ngôn ngữ:

class MyHomePage extends StatelessWidget {
  final Function(String) onChangeLanguage;

  MyHomePage({required this.onChangeLanguage});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(AppLocalizations.of(context)!.helloWorld),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(AppLocalizations.of(context)!.greetingMessage),
            ElevatedButton(
              onPressed: () => onChangeLanguage('vi'),
              child: Text('Chuyển sang tiếng Việt'),
            ),
            ElevatedButton(
              onPressed: () => onChangeLanguage('en'),
              child: Text('Switch to English'),
            ),
          ],
        ),
      ),
    );
  }
}

Kết luận

Internationalization giúp mở rộng ứng dụng đến nhiều đối tượng người dùng hơn. Sử dụng gói intl và các tính năng internationalization tích hợp của Flutter, việc dịch và quản lý văn bản trong ứng dụng trở nên dễ dàng hơn. Hy vọng qua bài viết này, bạn đã nắm được các bước cơ bản để triển khai internationalization trong ứng dụng Flutter của mình.