【Flutter】table_calendarを日本語で表示する

はじめに

Flutterのパッケージでtable_calendarというものを最近使ってアプリ開発をしているのですが、見た目のカスタマイズが複雑でやりにくい上に日本語の記事が少ないようなので、自分が実装するついでにやり方をまとめてみます。

告知

この記事に書いてあるtable_calendarを使用している、
タスクカレンダーというアプリをリリースしました！
（まだ改善の余地がたくさんありますが、、）

コンセプトは、めちゃめちゃ手軽なカレンダー兼タスク管理アプリです。
普段は、めんどくさくてカレンダーアプリを使わないが、たまにある美容室の予定は忘れられない時など、ちょっとしたことを最低限の機能でストレスなく行えます。

table_calendarを使ってこんなアプリができるんだという参考にもなれば幸いです。

ぜひ一度、アプリを手に取ってみてください！！！

ダウンロードは下から可能です。

　　　　

実装前の画面と実装後の画面

実装前の画面です。
月と曜日の表示が英語になっているので、今回はそれを日本語で表示したいと思います。

実装後です。
月のところの表記と、曜日のところの表記が日本語になっていることがわかると思います。
それではやっていきましょう！！

ステップ１

まずはTableCalendar()の中でlocaleというものを指定してあげましょう。

calendar.dart

TableCalendar(
    shouldFillViewport: true, //カレンダーの大きさを変えれるようにする奴、今回は気にしない
    locale: 'ja_JP' //　👈こちらの行を追加
),

これを指定してあげることで、ローカル、つまりどの言語を使用するか指定することができます。
しかし、Flutterが標準で用意してある、TableCalendar()には日本語対応されてないようなので、それを解決するために次のステップにいきましょう。

ステップ２

まずはpubspec.yamlファイルにintlというものを追加します。
これは、
メッセージの翻訳、複数形と性別、日付/番号のフォーマットと解析、双方向テキストなど、国際化とローカリゼーションの機能を提供します。 dart packages　より引用。
要はここでは言語対応させるために必要なパッケージです。

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter

  table_calendar: ^3.0.4
  intl: ^0.17.0 //この行を追加。インデントに注意してください。

intlのバージョンについてはこちらを確認して最新のものをお使いください。
そして追加したら、pubspec.yamlファイルの上にあるPub getボタンを押して読み込んであげてください。

ステップ３

main.dartファイルに記述を追加していきましょう。

main.dart

import 'package:intl/date_symbol_data_local.dart'; //intlインポートする

void main() {
  //runApp(const MyApp());  
  initializeDateFormatting('ja').then((_) => runApp(MyApp())); //上の記述をこちらに変更します
}

自分はinitializeDateFormatting('ja')じゃなくて、initializeDateFormatting()という記述でも実装することができました。

これで完了です！！

最後に

intlパッケージを使うことで簡単にtable_calendarの表示を日本語に対応させることができました。
もし役にたったら、いいねしてくれたら嬉しいです！