Blog スタッフブログ

Flutter システム開発 ひとくちコードスニペット

[Flutter]intlパッケージで多言語対応

こんにちは、株式会社MIXシステム開発担当のBloomです。

今回は前回英語表記になってしまっていたカレンダーを日本語表示に対応させるべく、多言語対応のためのパッケージintlを紹介します。まずはこちらのパッケージを導入しましょう。

flutter pub add intl

main関数でintlの初期化が必要になります。非同期処理が必要になるためensureInitialized関数のコールも忘れないでください。

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await initializeDateFormatting('ja');
  Intl.defaultLocale = 'ja';
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CalendarJaSample(),
    );
  }
}

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

class _CalendarJaSampleState extends State<CalendarJaSample> {
  DateTime _focusedDay = DateTime.now();
  DateTime? _selectedDay;
  CalendarFormat _format = CalendarFormat.month;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('TableCalendar')),
      body: TableCalendar(
        locale: 'ja',
        firstDay: DateTime.utc(2020, 1, 1),
        lastDay: DateTime.utc(2030, 12, 31),
        focusedDay: _focusedDay,
        selectedDayPredicate: (day) => isSameDay(_selectedDay, day),
        onDaySelected: (selected, focused) {
          setState(() {
            _selectedDay = selected;
            _focusedDay = focused;
          });
        },
        headerStyle: const HeaderStyle(formatButtonVisible: false),
        daysOfWeekStyle: const DaysOfWeekStyle(
          weekendStyle: TextStyle(fontWeight: FontWeight.bold),
        ),
        calendarFormat: _format,
        onFormatChanged: (format) => setState(() => _format = format),
        onPageChanged: (focused) => _focusedDay = focused,
      ),
    );
  }
}

実行結果

これだけで日本語表示に対応することができました。良かったですね。

戻る 一覧へ戻る