[flutter]Table Calendarをこれでもかってくらい使ってみた

##Table Calendarとは
https://pub.dev/packages/table_calendar

とある開発でflutterのカレンダーライブラリであるTable Calendarを使用する機会があったので紹介します。詳細はパッケージを見て欲しいが、何よりも応用した記事が少ない。正直開発するにあたってとーっても苦労しました。「柔軟なカレンダーアプリを使用したい！」という方もいると思うので、以下で僕が調べた全てを余すことなく紹介します。

##カレンダー表示をする
まずは簡単カレンダー表示です。

```dart
class MyHomePage extends StatelessWidget {
  MyHomePage(this.title);
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: TableCalendar(
        firstDay: DateTime(2020, 1, 1),
        lastDay: DateTime(2040, 12, 31),
        focusedDay: DateTime.now(),
      ),
    );
  }
}
```
![スクリーンショット 2021-10-14 23.13.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/729692/127040bd-acdb-2548-8641-3b24cf8c9d6d.png)

##枠線をつける
これ意外とパッと調べるとありません。

```dart
class MyHomePage extends StatelessWidget {
  MyHomePage(this.title);
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: TableCalendar(
        firstDay: DateTime(2020, 1, 1),
        lastDay: DateTime(2040, 12, 31),
        focusedDay: DateTime.now(),
        calendarStyle: CalendarStyle(
          defaultDecoration: BoxDecoration(
            border: Border.all(),
          ),
        ),
      ),
    );
  }
}
```
![スクリーンショット 2021-10-14 23.13.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/729692/85f2c939-6359-8d1e-865b-70a5e38c17cd.png)

ここでおやっと思いますよね。
そうです。当日、土日と当月には枠線がつきません。
大丈夫です、ちゃんと紹介します。

一気に見ていきましょう！

```dart
class MyHomePage extends StatelessWidget {
  MyHomePage(this.title);
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: TableCalendar(
        firstDay: DateTime(2020, 1, 1),
        lastDay: DateTime(2040, 12, 31),
        focusedDay: DateTime.now(),
        calendarStyle: CalendarStyle(
            defaultDecoration: BoxDecoration(
              border: Border.all(),
            ),
            todayDecoration: BoxDecoration(
              border: Border.all(),
            ),
            outsideDecoration: BoxDecoration(
              border: Border.all(),
            ),
            weekendDecoration: BoxDecoration(
              border: Border.all(),
            ),
            todayTextStyle: TextStyle(color: Colors.black)),
      ),
    );
  }
}
```

難しくはないですが、プロパティ多すぎて見つけるのに時間がかかります。

##枠線をくっつける
これ意外とやりたい人いそうな気がします。
今は枠線が離れていると思いますが、これをくっつけて見ましょう。

```dart
class MyHomePage extends StatelessWidget {
  MyHomePage(this.title);
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: TableCalendar(
        firstDay: DateTime(2020, 1, 1),
        lastDay: DateTime(2040, 12, 31),
        focusedDay: DateTime.now(),
        calendarStyle: CalendarStyle(
          defaultDecoration: BoxDecoration(
            border: Border.all(),
          ),
          todayDecoration: BoxDecoration(
            border: Border.all(),
          ),
          outsideDecoration: BoxDecoration(
            border: Border.all(),
          ),
          weekendDecoration: BoxDecoration(
            border: Border.all(),
          ),
          todayTextStyle: TextStyle(color: Colors.black),
          cellMargin: EdgeInsets.zero,
        ),
      ),
    );
  }
}
```

![スクリーンショット 2021-10-14 23.22.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/729692/c38bdfa0-eac8-c7b1-6b70-35f715dd751a.png)

ここまででだいぶ使えるカレンダーになっていると思います！

##曜日の日本語対応をしていく
次は曜日の日本語対応です。
これやりたい人めっちゃいると思います！！！！

```dart
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: TableCalendar(
        firstDay: DateTime(2020, 1, 1),
        lastDay: DateTime(2040, 12, 31),
        focusedDay: DateTime.now(),
        daysOfWeekHeight: 30,
        calendarStyle: CalendarStyle(
          defaultDecoration: BoxDecoration(
            border: Border.all(),
          ),
          todayDecoration: BoxDecoration(
            border: Border.all(),
          ),
          outsideDecoration: BoxDecoration(
            border: Border.all(),
          ),
          weekendDecoration: BoxDecoration(
            border: Border.all(),
          ),
          todayTextStyle: TextStyle(color: Colors.black),
          cellMargin: EdgeInsets.zero,
        ),
        daysOfWeekStyle: DaysOfWeekStyle(
          dowTextFormatter: (date, locale) => DateFormat.E('ja').format(date)[0],
        ),
        calendarBuilders: CalendarBuilders(
          dowBuilder: (context, day) {
            final dayText = DateFormat.E('ja').format(day);

            if (day.weekday == DateTime.saturday) {
              return Container(
                decoration: const BoxDecoration(),
                alignment: Alignment.center,
                child: Text(
                  dayText,
                  style: const TextStyle(color: Colors.blue),
                ),
              );
            }

            if (day.weekday == DateTime.sunday) {
              return Container(
                decoration: const BoxDecoration(),
                alignment: Alignment.center,
                child: Text(
                  dayText,
                  style: const TextStyle(color: Colors.red),
                ),
              );
            }
          },
        ),
      ),
    );
  }
}
```

![スクリーンショット 2021-10-14 23.40.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/729692/6f96b31f-55be-333e-15a1-6934699ba516.png)

記述長いです。。。

##ちょっと疲れたのでここまで
まだまだあるので続編そのうち書きます。