Flutter カスタマイズ可能なカレンダーウィジェット

今回はFlutterでカレンダー機能を簡単に実装できるパッケージを紹介します。

紹介するパッケージは「calendar_date_picker」です。
https://pub.dev/packages/calendar_date_picker2
こちらのパッケージはカスタマイズ可能なカレンダーウィジェットを提供するパッケージで、主に日付選択のUIを簡単に実装できます。

カレンダーの外観や動作をカスタマイズするためのオプションが豊富。
シンプルで使いやすいインターフェース。
期間の選択をすることもできる。
というのがこのパッケージの特徴です。

以下に実装例を記載します。

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'hoge',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DateTime? selectedDate;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('日付を選択'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              selectedDate == null
                  ? '日付を選択してください'
                  : '選択された日付: ${selectedDate!.toLocal()}',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                DateTime? pickedDate = await showCalendarDatePicker(
                  context: context,
                  initialDate: DateTime.now(),
                  firstDate: DateTime(2020),
                  lastDate: DateTime(2030),
                );

                if (pickedDate != null && pickedDate != selectedDate) {
                  setState(() {
                    selectedDate = pickedDate;
                  });
                }
              },
              child: Text('カレンダーを開く'),
            ),
          ],
        ),
      ),
    );
  }
}

このように、簡単にカレンダー機能を実装することが可能です。

ぜひ使ってみてください。