Flutterで多言語化、動的に言語切り替え、言語保存、ハンバーガーメニュー

カテゴリー：Flutter

記事作成日：2022.07.02

Android Studio Chipmunk | 2021.2.1 Patch 1<br>
Flutter 3.0.3<br>
Windows 11 Pro 21H2

Flutterで多言語化、動的に言語切り替え、言語保存、ハンバーガーメニューを実装した最小構成

## packages

デバイスにデータを保存<br>
<a href="https://pub.dev/packages/shared_preferences" target="_blank">https://pub.dev/packages/shared_preferences</a>

flutter_localizations (公式)<br>
<a href="https://docs.flutter.dev/development/accessibility-and-localization/internationalization" target="_blank">https://docs.flutter.dev/development/accessibility-and-localization/internationalization</a>

## pubspec.yaml

```
dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.0.15	#デバイスに保存するライブラリ
  flutter_localizations:    #多言語ライブラリ
    sdk: flutter
  intl: ^0.17.0   #多言語やフォーマッタなどの関連ライブラリ
```

```
flutter:
  generate: true    #pub get時に多言語対応のファイルが自動生成
```

## main.dart

```
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:shared_preferences/shared_preferences.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MainApp());
}

class MainApp extends StatefulWidget {
  const MainApp({super.key});
  @override
  State<MainApp> createState() => _MainAppState();
}

class Pref {
  static const String keyLanguage = "keyLanguage";
}

class LanguageChoice {
  final Map<String,String> langMap = {
    'en': 'English',
    'bg': 'български език',
    'cs': 'Čeština',
    'da': 'dansk',
    'de': 'Deutsch',
    'el': 'Ελληνικά',
    'es': 'Español',
    'et': 'eesti keel',
    'fi': 'Suomen kieli',
    'fr': 'Français',
    'hu': 'magyar nyelv',
    'it': 'Italiano',
    'ja': '日本語',
    'lt': 'lietuvių kalba',
    'lv': 'Latviešu',
    'nl': 'Nederlands',
    'pl': 'Polski',
    'pt': 'Português',
    'ro': 'limba română',
    'ru': 'русский',
    'sk': 'Slovenčina',
    'sv': 'svenska',
    'th': 'ภาษาไทย',
    'zh': '中文',
  };
  List<String> languageList() {
    List<String> languages = [];
    langMap.forEach((key, value) {
      languages.add(key);
    });
    return languages;
  }
  String getLanguageName(String str) {
    if (langMap.containsKey(str)) {
      return langMap[str]!;
    }
    return '';
  }
  List<Locale> localeList() {
    List<Locale> locales = [];
    langMap.forEach((key, value) {
      locales.add(Locale(key));
    });
    return locales;
  }
}

class _MainAppState extends State<MainApp> {
  Locale locale = AppLocalizations.supportedLocales.first;
  @override
  Widget build(BuildContext context) {
    final LanguageChoice languageChoice = LanguageChoice();
    final List<Locale> localeList = languageChoice.localeList();
    return MaterialApp(
      localizationsDelegates: const [
        AppLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: localeList,
      locale: locale,
      home: const MainPage(),
    );
  }
}

class MainPage extends StatefulWidget {
  const MainPage({Key? key}) : super(key: key);
  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  final GlobalKey<ScaffoldState> _key = GlobalKey<ScaffoldState>();
  @override
  void initState() {
    super.initState();
    _loadLanguage();
  }
  void _loadLanguage() async {
    final SharedPreferences prefs = await SharedPreferences.getInstance();
    final String lang = prefs.getString(Pref.keyLanguage) ?? 'en';
    if (!mounted) {
      return;
    }
    context.findAncestorStateOfType<_MainAppState>()!
      ..locale = Locale(lang)
      ..setState(() {});
  }
  void _saveLanguage(String lang) async {
    final SharedPreferences prefs = await SharedPreferences.getInstance();
    prefs.setString(Pref.keyLanguage, lang);
  }
  Widget _dialogLanguage() {
    final LanguageChoice languageChoice = LanguageChoice();
    final List<String> langList = languageChoice.languageList();
    return SimpleDialog(
      title: Text(AppLocalizations.of(context)!.language),
      children: List.generate(langList.length,(index) {
        return SimpleDialogOption(
          child: Row(
            children:[
              SizedBox(
                width: 25,
                child: Text(langList[index])
              ),
              Text('- ${languageChoice.getLanguageName(langList[index])}')
            ]
          ),
          onPressed: () {
            _saveLanguage(langList[index]);
            context.findAncestorStateOfType<_MainAppState>()!
              ..locale = Locale(langList[index])
              ..setState((){});
            Navigator.pop(context);
          }
        );
      }),
    );
  }
  Widget _hamburgerMenu() {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: [
          const SizedBox(
            child: DrawerHeader(
              decoration: BoxDecoration(color: Colors.blue), child: null,
            )
          ),
          ListTile(
            leading: const CircleAvatar(
              child: Icon(
                Icons.language,
              ),
            ),
            title: Text(AppLocalizations.of(context)!.language),
            trailing: const Icon(
              Icons.arrow_circle_right_outlined,
            ),
            onTap: () {
              showDialog(
                context: context,
                barrierDismissible: true,
                builder: (_) {
                  return _dialogLanguage();
                }
              );
            },
          ),
        ],
      ),
    );
  }
  Widget _settingButton() {
    return IconButton(
      icon: const Icon(Icons.menu,color: Colors.white),
      tooltip: AppLocalizations.of(context)!.setting,
      onPressed: () {
        _key.currentState?.openDrawer();
      },
    );
  }
  Widget _menuBar() {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 8.0),
      decoration: const BoxDecoration(color: Colors.blue),
      child: Row(children: <Widget> [
        const Expanded(
          child: SizedBox(width: 8),
        ),
        _settingButton(),
      ]),
    );
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _key,
      appBar: null,
      drawer: _hamburgerMenu(),
      body: SafeArea(
        child: Center(
          child: Column(
            children: [
              _menuBar(),
            ]
          ),
        ),
      ),
    );
  }
}

```

## l10n.yaml

```
arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart

```

## 各言語ファイル

以下のフォルダを作成
```
lib/l10n
```

各言語ファイルを設置
lib/l10n/app_en.arb
```
{
  "@@locale":"en",
  "language": "Language",
  "usage": "Usage"
}
```

lib/l10n/app_ja.arb
```
{
  "@@locale":"ja",
  "language": "言語",
  "usage": "使い方"
}
```

など

## generated_plugin_registrant.dart

lib/generated_plugin_registrant.dart

このファイルは自動生成される。