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

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

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

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

この記事で分かること!
  • syncfusion_flutter_datepickerを使ったサンプルコード

ちなみに、プログラミング初心者は疑問やエラーの解消に時間が掛かり、学習が前に進まなくて挫折することはよくあります。独学でFlutterを学習する場合は、次のことも考えないといけません。

  • 学習の計画
  • スケジュール管理
  • ポートフォリオ作成時に技術選定 など

初心者にとっては大変です。そこで、自走できるまでの手段にスクールを利用するのは1つの手です!Flutterが学べるおすすめスクールはこちらで詳しく解説してます。月2万ほど〜学べるスクールもあるのでご参考にどうぞ。

目次

【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ボタン表示有無
onSubmitOKボタンクリック時の処理
onCancelCancelボタンクリック時

【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),
          ),
        ),
      ),
    );
  }
}

まとめ | 【Flutter】カレンダーから日付を取得する方法は簡単!

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

カレンダーから日付取得する方法は、いろいろなアプリで使えるのでしっかり理解しときましょう!

Flutterエンジニアになるには?

初心者が中級者レベルのFlutterエンジニアなるまでの進め方をまとめました。

Flutterの学習方法を知る

Flutter を動画で学ぶ(Udemy)

Flutter をスクールで学ぶ

Flutterの仕事を探す

おまけFlutter入門の完全ガイド

Flutter/Dartの基礎一覧

Flutter/Dartの入門知識として押さえておきたい内容をまとめました。学習のご参考にどうぞ。

Widget一覧

画面レイアウト

ボタン

入力・出力

ページ遷移

状態管理

非同期処理

Dartの基本文法

ライブラリ使い方

目次