Blog スタッフブログ

Flutter システム開発 ひとくちコードスニペット

[Flutter]お手軽カレンダー表示コードスニペット

こんにちは、株式会社MIXシステム開発担当のBloomです。

今回はFlutterで利用できるコードスニペットを紹介します。まずはこちらのパッケージを導入しましょう。

flutter pub add table_calendar

それでは、試しにカレンダー表示を実装しましょう。

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: CalendarSample());
}

class CalendarSample extends StatefulWidget {
  const CalendarSample({super.key});
  @override
  State<CalendarSample> createState() => _CalendarSampleState();
}

class _CalendarSampleState extends State<CalendarSample> {
  CalendarFormat _format = CalendarFormat.month;
  DateTime _focusedDay = DateTime.now();
  DateTime? _selectedDay;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('TableCalendar')),
      body: TableCalendar(
        firstDay: DateTime.utc(2020, 1, 1),
        lastDay: DateTime.utc(2030, 12, 31),
        focusedDay: _focusedDay,
        selectedDayPredicate: (day) => isSameDay(_selectedDay, day),
        onDaySelected: (selected, focused) {
          setState(() {
            _selectedDay = selected;
            _focusedDay = focused;
          });
        },
        calendarFormat: _format,
        onFormatChanged: (format) => setState(() => _format = format),
        onPageChanged: (focused) => _focusedDay = focused,
      ),
    );
  }
}

実行結果

これでカレンダー表示ができましたが、英語表示になってしまっています。これを日本語表示にする方法は次の記事で紹介させていただきます。

ともかくこれで簡単にカレンダーUI表示ができました。良かったですね。

戻る 一覧へ戻る