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)
2020.06.01
【Dart】Stringからint, double, DateTimeに変換する
2020.09.14
【Dart】【Flutter】List型(リスト)の使い方とよく使うメソッドまとめ
2020.09.18
【Dart】【Flutter】DateTime型についてのまとめ
2020.10.01
【Dart】Map型の使い方とよく使うメソッドまとめ
2020.09.13