[Flutter]Flutterでカレンダーを作るプラグイン - かずのアプリときどきキャンプ飯

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

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

iOS版

Download QR-Code

‎ポジティブ日記

開発者: Sato Kazushige

金額: 無料⁺

Android版

Download QR-Code

ポジティブ日記

開発者: kazushige

金額: 無料

flutter_calendar_carousel

Dart packages

flutter_calendar_carousel | Flutter Package

https://pub.dev/packages/flutter_calendar_carousel

Calendar widget for flutter that is swipeable. This widget can help you build customizable calendar with scrollable actions.

見た目がかわいらしいですね。このようなカレンダーを、こんなコードで簡単に作ることができます。

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の使用をやめました。現在は次のプラグインを使用しています。