Đa ngôn ngữ sử dụng provider trong flutter
Để triển khai tính năng hỗ trợ nhiều ngôn ngữ trong Flutter bằng cách sử dụng provider package, bạn có thể làm theo các bước sau. Đây là một ví dụ cơ bản:
Bước 1: Thêm các phụ thuộc
Thêm provider và intl vào pubspec.yaml:
dependencies:
flutter:
sdk: flutter
provider: ^6.0.0
intl: ^0.17.0Sau đó, chạy flutter pub get.
Bước 2: Tạo file ARB cho các ngôn ngữ
Tạo các file .arb trong thư mục lib/l10n cho từng ngôn ngữ bạn muốn hỗ trợ (ví dụ: intl_en.arb, intl_vi.arb):
intl_en.arb:
{
"helloWorld": "Hello, World!",
"appTitle": "My App"
}intl_vi.arb:
{
"helloWorld": "Xin chào thế giới!",
"appTitle": "Ứng dụng của tôi"
}Bước 3: Cấu hình pubspec.yaml cho intl
Thêm cấu hình intl trong pubspec.yaml:
flutter:
generate: true
assets:
- lib/l10n/Bước 4: Chạy lệnh để tạo file localization
Chạy lệnh sau để tạo các file .dart từ .arb:
flutter pub run intl:generate_localized.dartĐiều này sẽ tạo ra các file trong lib/generated/l10n.
Bước 5: Tạo LocaleProvider để quản lý ngôn ngữ
Tạo một provider để quản lý ngôn ngữ hiện tại:
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
class LocaleProvider with ChangeNotifier {
Locale? _locale;
Locale? get locale => _locale;
void setLocale(Locale locale) {
if (!L10n.delegate.isSupported(locale)) {
return;
}
_locale = locale;
Intl.defaultLocale = locale.languageCode;
notifyListeners();
}
}Bước 6: Sử dụng LocaleProvider trong ứng dụng
Bọc cây widget của bạn trong ChangeNotifierProvider:
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'generated/l10n.dart';
import 'locale_provider.dart';
void main() {
runApp(
ChangeNotifierProvider(
create: (context) => LocaleProvider(),
child: MyApp(),
),
);
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final provider = Provider.of<LocaleProvider>(context);
return MaterialApp(
locale: provider.locale,
supportedLocales: L10n.delegate.supportedLocales,
localizationsDelegates: [
L10n.delegate,
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
home: HomePage(),
);
}
}Bước 7: Sử dụng ngôn ngữ trong các widget
Ở đây, chúng ta sẽ tạo một trang chủ đơn giản với nút để thay đổi ngôn ngữ:
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'generated/l10n.dart';
import 'locale_provider.dart';
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
final provider = Provider.of<LocaleProvider>(context);
final l10n = L10n.of(context);
return Scaffold(
appBar: AppBar(
title: Text(l10n.appTitle),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(l10n.helloWorld),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ElevatedButton(
onPressed: () {
provider.setLocale(Locale('en'));
},
child: Text('English'),
),
ElevatedButton(
onPressed: () {
provider.setLocale(Locale('vi'));
},
child: Text('Tiếng Việt'),
),
],
),
],
),
),
);
}
}Lưu ý:
- Đảm bảo rằng bạn đã cấu hình đúng đường dẫn và tên file trong pubspec.yaml và trong các lệnh gọi.
- Mỗi khi bạn thêm hoặc thay đổi các chuỗi trong .arb file, bạn cần chạy lại lệnh flutter pub run intl:generate_localized.dart để cập nhật các file dart localization.
Với cách tiếp cận này, bạn có thể dễ dàng thêm hỗ trợ cho nhiều ngôn ngữ hơn bằng cách mở rộng các file .arb và cập nhật supportedLocales.