Flutter

[Flutter]Flutterでカレンダーを作るプラグイン

みなさんこんにちは。花粉の季節が終わって風がとても気持ちが良いです。

今日はFlutterでカレンダーを表示させるためのプラグインをご紹介します。なお、今回ご紹介するプラグインは、先日リニューアルしたアプリ「ポジティブ日記」でも使用しています。

iOS版

‎ポジティブ日記
‎ポジティブ日記
Developer: Sato Kazushige
Price: Free+

Android版

ポジティブ日記
ポジティブ日記
Developer: kazushige
Price: Free+

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週目の表示がかけてしまう

しかし5週しかない月の場合、カレンダーの下に不自然な空間ができてしまう

という欠点がありました。2021年5月はこのように6週間分の行が必要なのですが、かといってそれに合わせて高さを決めると、2021年6月などは変な空間が目につきますよね。

table_calendarの場合は、そのような心配をすることなく、高さは週の数に応じて自動的に調整してくれます。新しくなった「ポジティブ日記」で2021年5月、6月を見てください。

このように変な空間なく自動的に高さ調整が入ります。

flutter_calendar_carouselを使用されてる方はtable_calendarへの移行をオススメします。

もう一回アプリの宣伝を。

iOS版

‎ポジティブ日記
‎ポジティブ日記
Developer: Sato Kazushige
Price: Free+

Android版

ポジティブ日記
ポジティブ日記
Developer: kazushige
Price: Free+
created by Rinker
¥4,048 (2022/01/17 11:11:30時点 楽天市場調べ-詳細)

 

 

Flutterを学ぶなら世界最大級のオンライン学習サイトUdemyがおすすめ

Flutterを学ぶなら、世界最大級のオンライン学習サイトUdemy
がおすすめです。


通常ですと、各コース2万円程度するのですが、年がら年中割引セールスを行なっており、割引後価格はなんとおおむね1500円程度で受講することができます。
今すぐ受講しなくても、安い時に大量に買っておいて、あとでじっくり勉強するのがかしこいやり方だと思います。

-Flutter

© 2022 かずのアプリときどきキャンプ飯 Powered by AFFINGER5