【Flutter】calendar | カレンダーから日付/年月を取得する方法を3分で解説！

2023-01-042023-02-09

Flutterでカレンダーから年月日付の取得方法を知りたい
Flutterで日付の取得ができるライブラリの使い方を知りたい

そこで、今回はFlutterのカレンダーのライブラリ「syncfusion_flutter_datepicker」の基本的な使い方をサンプルコードとデモ動画で解説します。

不明点などありましたら、お気軽にお問い合わせ下さい。

この記事で分かること！

syncfusion_flutter_datepickerを使ったサンプルコード

ちなみに、Flutterのスキルを０から効率的に伸ばす方法は、仕事として実務を経験することです。そして、最速で転職・就職・副業するには学習をどんどん進め、ポートフォリオを最優先で完成させましょう！応募できそうなFlutter案件をチェックすると必要なスキルも分かり学習に身が入ります！Flutter案件/求人の探し方はコチラで詳しく解説していますので、ご参考にして下さい。

【Flutter】カレンダー | syncfusion_flutter_datepickerとは？使いやすい日付入力/表示カレンダー

カレンダーの人気ライブラリ「syncfusion_flutter_datepicker」は、大抵のことはカバーしているカレンダーライブラリです。

The Flutter Date Range Picker is a lightweight widget that allows users to easily select a single date, multiple dates, or a range of dates. Date Picker provides month, year, decade, and century view options to quickly navigate to the desired date. It supports minimum, maximum, blackout and disabled dates to restrict date selection.

（直訳）ユーザーが単一の日付、複数の日付、または日付の範囲を簡単に選択できる軽量のウィジェットです。日付ピッカーには、月、年、10 年、世紀の表示オプションがあり、目的の日付にすばやく移動できます。日付の選択を制限するために、最小、最大、ブラックアウト、および無効な日付をサポートしています。
引用：pub.dev「syncfusion_flutter_datepicker」

【Flutter】カレンダー | syncfusion_flutter_datepickerの基本的な使い方

pubspec.yamlファイルにsyncfusion_flutter_datepickerを定義します。

dependencies:
  syncfusion_flutter_datepicker: ^20.4.41

syncfusion_flutter_datepickerをインポートし、以下のように記述します。

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_datepicker/datepicker.dart';
import 'package:intl/intl.dart';

void main() {
  runApp(
    MaterialApp(
      home: MyApp(),
    ),
  );
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  DateTime? _selectedDate;
  DateRangePickerController _dateRangePickerController =
  DateRangePickerController();
  DateFormat format = DateFormat('yyyy-MM-dd');
  String dateFormat = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('カレンダーデモ'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(_selectedDate == null
                ? '日付が選択されていません'
                : '選択した日付: ${dateFormat}'),
            OutlinedButton.icon(
              icon: Icon(Icons.calendar_month),
              label: Text('カレンダー'),
              onPressed: () {
                showModalBottomSheet(
                  context: context,
                  builder: (context) {
                    return SfDateRangePicker(
                      initialSelectedDate: _selectedDate,
                      view: DateRangePickerView.year,
                      showActionButtons: true,
                      controller: _dateRangePickerController,
                      onSubmit: (date) {
                        setState(() {
                          _selectedDate = date as DateTime?;
                          dateFormat = format.format(date as DateTime);
                        });
                        Navigator.of(context).pop(); // DatePickerを閉じる
                      },
                      onCancel: () {
                        _dateRangePickerController.selectedRange = null;
                        Navigator.of(context).pop(); // DatePickerを閉じる
                      },
                    );
                  },
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

syncfusion_flutter_datepickerの基本プロパティ

syncfusion_flutter_datepickerの基本プロパティをしっかり押さえておきましょう！

プロパティ	内容
view	カレンダーの表示を年/月/を指定
showActionButtons	カレンダー表示時の初期値
showActionButtons	カレンダー日付決定のOK/Cancelボタン表示有無
onSubmit	OKボタンクリック時の処理
onCancel	Cancelボタンクリック時

【Flutter】カレンダー | 年月のみ取得できるライブラリはmonth_picker_dialog_2

syncfusion_flutter_datepickerでは年月のみ取得はできないので、年月をカレンダーから取得したい場合はmonth_picker_dialog_2のライブラりがオススメです。

ソースコードはこちらをクリックすると表示されます。

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:month_picker_dialog_2/month_picker_dialog_2.dart';

void main() => runApp(MyApp(
  initialDate: DateTime.now(),
));

class MyApp extends StatefulWidget {
  final DateTime initialDate;

  const MyApp({Key? key, required this.initialDate}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  DateTime? selectedDate;

  @override
  void initState() {
    super.initState();
    selectedDate = widget.initialDate;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: [
        Locale('en'),
        Locale('zh'),
        Locale('fr'),
        Locale('es'),
        Locale('de'),
        Locale('ru'),
        Locale('ja'),
        Locale('ar'),
        Locale('fa'),
        Locale("es"),
        Locale("it"),
      ],
      theme: ThemeData(
          colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.indigo).copyWith(secondary: Colors.pinkAccent)),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Month Picker Example App'),
        ),
        body: Center(
          child: Text(
            'Year: ${selectedDate?.year}\nMonth: ${selectedDate?.month}',
            style: Theme.of(context).textTheme.headline4,
            textAlign: TextAlign.center,
          ),
        ),
        floatingActionButton: Builder(
          builder: (context) => FloatingActionButton(
            onPressed: () {
              showMonthPicker(
                context: context,
                firstDate: DateTime(DateTime.now().year - 1, 5),
                lastDate: DateTime(DateTime.now().year + 1, 9),
                initialDate: selectedDate ?? widget.initialDate,
                locale: Locale("en"),
                //show only even months
                selectableMonthPredicate: (DateTime val) => val.month.isEven,
                headerColor: Colors.purple,
                headerTextColor: Colors.orange,
                selectedMonthBackgroundColor: Colors.amber[900],
                selectedMonthTextColor: Colors.white,
                unselectedMonthTextColor: Colors.green,
                confirmText: Text('This one!',style: TextStyle(fontWeight: FontWeight.bold),),
                cancelText: Text('Cancel'),
                yearFirst: true,
                roundedCornersRadius: 20,
              ).then((date) {
                if (date != null) {
                  setState(() {
                    selectedDate = date;
                  });
                }
              });
            },
            child: Icon(Icons.calendar_today),
          ),
        ),
      ),
    );
  }
}