本記事では、Flutterでカレンダーを実装する方法の解説をしていきます。
これからカレンダーの実装をしてみたい方は是非参考ください。
目次
Flutterでカレンダーを実装する方法
table_calendarがおすすめ！
Flutterでカレンダーを実装したいのであれば「table_calendar」を使用すれば良いでしょう。
以下のようなUIを実装することが可能です。
table_calendarを実装してみよう
実際にtable_calendarを使って、カレンダーを実装してみましょう。
table_calendarの導入
pubspec.yamlに以下のコードを追加してください。
dependencies:
flutter:
sdk: flutter
table_calendar: ^3.0.5 #追加カレンダーのUIをとりあえず出す
まずは何も考えずにデフォルトのカウンターアプリのmain.dartを以下の内容に書き換えてみてください。
import 'package:flutter/material.dart';
import 'package:table_calendar/table_calendar.dart';
DateTime _focusedDay = DateTime.now();
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: TableCalendar(
firstDay: DateTime.utc(2022, 4, 1),
lastDay: DateTime.utc(2025, 12, 31),
focusedDay: _focusedDay,
),
));
}
}
そうすると以下のような画面になったかと思います。
このままでは日付をクリックできない状態になっていますので、日付を選択できるようしましょう。
日付を選択できるようにする
日付を選択できるようにするにはTableCalendarのonDaySelectedオプションとselectedDayPredicateオプションを活用します。
onDaySelectedオプションで選択した日付を一時的に保存し、selectedDayPredicateオプションで保存された日付情報にフォーカスを当てて現在どの日付が選択されているか分かるようにしています。
import 'package:flutter/material.dart';
import 'package:table_calendar/table_calendar.dart';
DateTime _focused = DateTime.now();
DateTime? _selected; //追記
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: TableCalendar(
firstDay: DateTime.utc(2022, 4, 1),
lastDay: DateTime.utc(2025, 12, 31),
selectedDayPredicate: (day) {
return isSameDay(_selected, day);
},
// --追記----------------------------------
onDaySelected: (selected, focused) {
if (!isSameDay(_selected, selected)) {
setState(() {
_selected = selected;
_focused = focused;
});
}
},
focusedDay: _focused,
// --追記----------------------------------
),
));
}
}
イベントを登録する
最後にカレンダーに対しイベントを登録してみましょう。
eventLoaderオプションで今回自作したgetEventを使ってイベントを読み込みます。
getEventからはイベント情報がリスト形式で返却されますので、それらを表示してくれます。
今回、イベント自体はinitState内で初期作成しています。
import 'package:flutter/material.dart';
import 'package:table_calendar/table_calendar.dart';
import 'dart:collection';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Map<DateTime, List> _eventsList = {}; //追記
DateTime _focused = DateTime.now();
DateTime? _selected;
//--追記--------------------------------------------------------------
int getHashCode(DateTime key) {
return key.day * 1000000 + key.month * 10000 + key.year;
}
@override
void initState() {
super.initState();
_selected = _focused;
_eventsList = {
DateTime.now().subtract(Duration(days: 2)): ['Test A', 'Test B'],
DateTime.now(): ['Test C', 'Test D', 'Test E', 'Test F'],
};
}
//--------------------------------------------------------------------
@override
Widget build(BuildContext context) {
//--追記--------------------------------------------------------------
final _events = LinkedHashMap<DateTime, List>(
equals: isSameDay,
hashCode: getHashCode,
)..addAll(_eventsList);
List getEvent(DateTime day) {
return _events[day] ?? [];
}
//--追記--------------------------------------------------------------
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: TableCalendar(
firstDay: DateTime.utc(2022, 4, 1),
lastDay: DateTime.utc(2025, 12, 31),
eventLoader: getEvent, //追記
selectedDayPredicate: (day) {
return isSameDay(_selected, day);
},
onDaySelected: (selected, focused) {
if (!isSameDay(_selected, selected)) {
setState(() {
_selected = selected;
_focused = focused;
});
}
},
focusedDay: _focused,
),
));
}
}
カレンダーの予定をリストで表示する
カレンダーのリストは、画面下部にリスト表示したいですね。
そのような場合はListViewを使って、イベントリストの内容を展開すれば実現できます。
import 'package:flutter/material.dart';
import 'package:table_calendar/table_calendar.dart';
import 'dart:collection';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Map<DateTime, List> _eventsList = {};
DateTime _focused = DateTime.now();
DateTime? _selected;
int getHashCode(DateTime key) {
return key.day * 1000000 + key.month * 10000 + key.year;
}
@override
void initState() {
super.initState();
_selected = _focused;
_eventsList = {
DateTime.now().subtract(Duration(days: 2)): ['Test A', 'Test B'],
DateTime.now(): ['Test C', 'Test D', 'Test E', 'Test F'],
};
}
@override
Widget build(BuildContext context) {
final _events = LinkedHashMap<DateTime, List>(
equals: isSameDay,
hashCode: getHashCode,
)..addAll(_eventsList);
List getEvent(DateTime day) {
return _events[day] ?? [];
}
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(children: [
TableCalendar(
firstDay: DateTime.utc(2022, 4, 1),
lastDay: DateTime.utc(2025, 12, 31),
eventLoader: getEvent, //追記
selectedDayPredicate: (day) {
return isSameDay(_selected, day);
},
onDaySelected: (selected, focused) {
if (!isSameDay(_selected, selected)) {
setState(() {
_selected = selected;
_focused = focused;
});
}
},
focusedDay: _focused,
),
//--追記--------------------------------------------------------------
ListView(
shrinkWrap: true,
children: getEvent(_selected!)
.map((event) => ListTile(
title: Text(event.toString()),
))
.toList(),
)
//--------------------------------------------------------------------
]));
}
}
まとめ
いかがでしたか？
Flutterであれば簡単にカレンダーを実装することができます。
是非この機会に習得してみてください。
最新のFlutterの勉強方法 まとめ
Flutterを入門から実践レベルまで一通り学習できる方法をまとめました。
Flutterの勉強方法を知る
Flutterを動画で学習する
Flutterを書籍で学習する
スポンサーリンク
