Flutterラボの

プレミアム会員になる

【Flutter】カレンダーの作り方(2021年12月更新)

2020.08.12

(2021年12月5日更新)この記事は2020年8月から公開していますが、2021年12月の最新版Flutterに合わせて、NullSafetyやLinterに対応したコードを更新しました。
すでにお買い上げの方は改めて購入することなく確認できますのでぜひご覧ください。

はじめに

カレンダーに関するパッケージはたくさん存在しますが、それを使ってしまうとカスタマイズがしにくいのでコピペだけで使用できるカレンダーのコードを作成しました。

完成形

手順

1. pubspec.yaml を編集して、パッケージを取得
2. main.dart をコピペ

コード

pubspec.yaml を編集して、『intl』パッケージを取得します。

dependencies:
 flutter:
   sdk: flutter

 cupertino_icons: ^0.1.3
 intl: ^0.17.0 #この行を追加

今回、『intl』はDateTimeの変数を日本語の日付(****年**月**日)の形に変換するために使用します。
編集したら、『Pub get』でパッケージを取得しましょう。

あとは以下のコードを『main.dart』にコピペするだけでカレンダーが完成します。

コピペ用コードの51行目にある、Calendarクラスの呼び出しで、何曜日はじまりにするか、選択している日の色を簡単にカスタマイズできるようになっています。

body: const Calendar(
  weekDay: 7, // 何曜日からはじまるか(月曜日は1,日曜日は7)
  // color: Colors.grey, // デフォルトはテーマカラー
  isDisplayFooter: true,
)

コピペ用コード(main.dart)

Flutterラボ
hatchoutschool
FlutterとNuxtに関する知識を発信しています! 動画で学べる学習サイト『Flutterラボ』と『Nuxtラボ』を運営 Flutterラボ:https://flutterlabo.tech/ Nuxtラボ:https://flutterlabo.tech/nuxt