【Flutter】table_calendarを使用してカレンダーを表示

ホーム
BLOG
【Flutter】
【Flutter】table_calendarを使用して…

【Flutter】
2024.03.09

【Flutter】table_calendarを使用してカレンダーを表示

概要
プロジェクトの準備
Dependenciesの追加
ソースコード
結果
備考
参考

【Flutter】コード自動生成とGraphQLClientを使ってGraphQL・Apollo ServerのAPIにアクセス

1. 概要

上記では、Flutterでfreezedやgraphql-code-generatorでモデルクラスを自動生成しGraphQLClientを使ってGraphQLのAPIにアクセスし、データを取得する内容でした。今回は、table_calendarを使い、カレンダーを表示する内容となります。

対象としては開発を１年程やってて自分で最初から開発してみたい方になります。そのため細かい用語などの説明はしません。

2. プロジェクトの準備

2-1. プロジェクトを作成

こちらを参考
- https://isub.co.jp/flutter/flutter-dev-vscode-on-windows11/#create-project

3. Dependenciesの追加

3-1. table_calendarやprompt_dialogを追加

flutter pub add table_calendar

flutter pub add prompt_dialog

4. ソースコード

4-1. lib/utils/utils.dart

import 'dart:collection';
import 'package:table_calendar/table_calendar.dart';

class Event {
  final DateTime day;
  final String eventGuid;
  final String title;

  const Event(this.day, this.eventGuid, this.title);

  @override
  String toString() => title;
}

final kEvents = LinkedHashMap<DateTime, List<Event>>(
  equals: isSameDay,
  hashCode: getHashCode,
);

int getHashCode(DateTime key) {
  return key.day * 1000000 + key.month * 10000 + key.year;
}

final kToday = DateTime.now();
final kFirstDay = DateTime(kToday.year, kToday.month - 3, kToday.day);
final kLastDay = DateTime(kToday.year, kToday.month + 3, kToday.day);

4-2. lib/pages/example.dart

import 'package:flutter/material.dart';
import 'package:table_calendar/table_calendar.dart';
import 'package:prompt_dialog/prompt_dialog.dart';
import '../utils/utils.dart';

class TableExample extends StatefulWidget {
  const TableExample({super.key});

  @override
  State<TableExample> createState() => _TableExampleState();
}

class _TableExampleState extends State<TableExample> {
  late final ValueNotifier<List<Event>> _selectedEvents;
  CalendarFormat _calendarFormat = CalendarFormat.month;
  RangeSelectionMode _rangeSelectionMode = RangeSelectionMode.toggledOff;
  DateTime _focusedDay = DateTime.now();
  DateTime? _selectedDay;
  int eventId = 0;

  @override
  void initState() {
    super.initState();

    _selectedDay = _focusedDay;

    List<Event> list = _createList();
    _selectedEvents = ValueNotifier(list);
  }

  String _getEventId() {
    return 'Event-${eventId++}';
  }

  List<Event> _createList() {
    List<Event> list = [];
    for (var elements in kEvents.values) {
      for (var e in elements) {
        list.add(e);
      }
    }
    return list;
  }

  @override
  void dispose() {
    _selectedEvents.dispose();
    super.dispose();
  }

  List<Event> _getEventsForDay(DateTime day) {
    return kEvents[day] ?? [];
  }

  void _onDaySelected(DateTime selectedDay, DateTime focusedDay) async {
    if (!isSameDay(_selectedDay, selectedDay)) {
      String? promptValue = await prompt(context);
      final newEvent = {
        selectedDay: [
          Event(selectedDay, _getEventId(), promptValue ?? ''),
        ],
      };
      kEvents.addAll(newEvent);
      _selectedEvents.value = _createList();

      setState(() {
        _selectedDay = selectedDay;
        _focusedDay = focusedDay;
        _rangeSelectionMode = RangeSelectionMode.toggledOff;
      });
    }
  }

  void _removeEvent(int idx, Event event) {
    List<Event> newList = [];
    List<Event> currentList = _getEventsForDay(event.day);
    for (var e in currentList) {
      if (e.eventGuid != event.eventGuid) {
        newList.add(e);
      }
    }
    kEvents.update(event.day, (value) => newList);

    List<Event> newEvents = _selectedEvents.value
        .where((element) => element.eventGuid != event.eventGuid)
        .toList();
    _selectedEvents.value = newEvents;

    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            TableCalendar<Event>(
              firstDay: kFirstDay,
              lastDay: kLastDay,
              focusedDay: _focusedDay,
              selectedDayPredicate: (day) => isSameDay(_selectedDay, day),
              calendarFormat: _calendarFormat,
              rangeSelectionMode: _rangeSelectionMode,
              eventLoader: _getEventsForDay,
              startingDayOfWeek: StartingDayOfWeek.sunday,
              daysOfWeekStyle: const DaysOfWeekStyle(
                  weekendStyle: TextStyle(color: Colors.red)),
              calendarStyle: const CalendarStyle(
                outsideDaysVisible: false,
                weekendTextStyle: TextStyle(color: Colors.red),
              ),
              onDaySelected: _onDaySelected,
              onFormatChanged: (format) {
                if (_calendarFormat != format) {
                  setState(() {
                    _calendarFormat = format;
                  });
                }
              },
              onPageChanged: (focusedDay) {
                _focusedDay = focusedDay;
              },
            ),
            const SizedBox(height: 8.0),
            Flexible(
              child: ValueListenableBuilder<List<Event>>(
                valueListenable: _selectedEvents,
                builder: (context, value, _) {
                  return ListView.builder(
                    shrinkWrap: true,
                    itemCount: value.length,
                    itemBuilder: (context, index) {
                      return Container(
                        margin: const EdgeInsets.symmetric(
                          horizontal: 12.0,
                          vertical: 4.0,
                        ),
                        decoration: BoxDecoration(
                          border: Border.all(),
                          borderRadius: BorderRadius.circular(12.0),
                        ),
                        child: ListTile(
                          onTap: () => print('${value[index]}'),
                          title: Text('${value[index]}'),
                          trailing: IconButton(
                              onPressed: () =>
                                  _removeEvent(index, value[index]),
                              icon: const Icon(Icons.delete)),
                        ),
                      );
                    },
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

4-3. lib\main.dart

import 'package:flutter/material.dart';
import 'package:intl/date_symbol_data_local.dart';
import 'pages/example.dart';

void main() {
  initializeDateFormatting().then((_) => runApp(const MyApp()));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'TableCalendar Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: const Center(child: TableExample()),
    );
  }
}