みなさんこんにちは。花粉の季節が終わって風がとても気持ちが良いです。
今日はFlutterでカレンダーを表示させるためのプラグインをご紹介します。なお、今回ご紹介するプラグインは、先日リニューアルしたアプリ「ポジティブ日記」でも使用しています。
iOS版
Android版
flutter_calendar_carousel
見た目がかわいらしいですね。このようなカレンダーを、こんなコードで簡単に作ることができます。
import 'package:flutter_calendar_carousel/flutter_calendar_carousel.dart'
show CalendarCarousel;
Widget widget() {
return Container(
margin: EdgeInsets.symmetric(horizontal: 16.0),
child: CalendarCarousel<Event>(
onDayPressed: (DateTime date, List<Event> events) {
this.setState(() => _currentDate = date);
},
weekendTextStyle: TextStyle(color: Colors.red,
)
,
thisMonthDayBorderColor: Colors.grey
,),
customDayBuilder: (bool isSelectable, int index, bool isSelectedDay,
bool isToday, bool isPrevMonthDay, TextStyle textStyle,
bool isNextMonthDay, bool isThisMonthDay, DateTime day,) {
if (day.day == 15) {
return Center(child: Icon(Icons.local_airport),);
} else {
return null;
}
},
weekFormat: false,
markedDatesMap: _markedDateMap,
height: 420.0,
selectedDateTime: _currentDate,
daysHaveCircularBorder: false,)
,
);
}
初期の「ポジティブ日記」では、このプラグインを使ってアプリを作っていました。
ですが、ある理由によってflutter_calendar_carouselの使用をやめました。現在は次のプラグインを使用しています。
table_calendar
table_calendarに切り替えた理由ですが、table_calendarは
カレンダーの高さを自動調整してくれる
という点です。前述のflutter_calendar_carouselですと、高さが自動調整されないため、
6週間の表示が必要な月に合わせて固定的に高さを決定しておかないと、５週目の表示がかけてしまう
しかし5週しかない月の場合、カレンダーの下に不自然な空間ができてしまう
という欠点がありました。2021年5月はこのように6週間分の行が必要なのですが、かといってそれに合わせて高さを決めると、2021年6月などは変な空間が目につきますよね。
table_calendarの場合は、そのような心配をすることなく、高さは週の数に応じて自動的に調整してくれます。新しくなった「ポジティブ日記」で2021年5月、6月を見てください。
このように変な空間なく自動的に高さ調整が入ります。
flutter_calendar_carouselを使用されてる方はtable_calendarへの移行をオススメします。
もう一回アプリの宣伝を。
iOS版
Android版
Flutterを学ぶなら世界最大級のオンライン学習サイトUdemyがおすすめ
Flutterを学ぶなら、世界最大級のオンライン学習サイトUdemy
がおすすめです。
通常ですと、各コース2万円程度するのですが、年がら年中割引セールスを行なっており、割引後価格はなんとおおむね1500円程度で受講することができます。
今すぐ受講しなくても、安い時に大量に買っておいて、あとでじっくり勉強するのがかしこいやり方だと思います。