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ボタン表示有無 |
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),
),
),
),
);
}
}
まとめ | 【Flutter】カレンダーから日付を取得する方法は簡単!
今回はFlutterのカレンダーライブラリ「syncfusion_flutter_datepicker」の基本的な使い方をサンプルコードとデモ動画で解説しました。
カレンダーから日付取得する方法は、いろいろなアプリで使えるのでしっかり理解しときましょう!
Flutterエンジニアになるには?
初心者が中級者レベルのFlutterエンジニアなるまでの進め方をまとめました。
Flutterの学習方法を知る

Flutter を動画で学ぶ(Udemy)

Flutter をスクールで学ぶ

Flutterの仕事を探す

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

Flutter/Dartの基礎一覧
Flutter/Dartの入門知識として押さえておきたい内容をまとめました。学習のご参考にどうぞ。
画面レイアウト
ボタン
- ボタン(ElevatedButton、TextButton、OutlinedButton、IconButton、FloatingActionButton)
- Flutterのアイコンの探し方
入力・出力
- 文字・数値の入力(Text Field)
- 文字・数値の表示(Text)
- 画像の表示(Images)
- スクロール可能リスト(ListView.builder)
- スクロール可能マス目レイアウト(GridView.builder)
ページ遷移
状態管理
- 状態(State)管理の基本(Stateless Widget・Stateful Widget)
非同期処理
- 非同期処理・同期処理(Future)
- ローカルデータベース(SQLite)
- グラフ①(fl_chart)
- グラフ②(syncfusion_flutter_charts)
- カレンダーから日付取得①(syncfusion_flutter_datepicker)
- カレンダーから日付取得②(month_picker_dialog_2)