Flutterでカレンダーから日付を取得します。

まずは、画面に現在の日付を表示します。

dynamic型でdateTimeを作成します。

class _MyHomePageState extends State<MyHomePage> {
  dynamic dateTime;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Text("日付が表示されます"),
    ));
  }
}

次に、日付のデータを初期化しするためにinitStateを使用します。

initStateの中に、DateTimenow()を指定します。

dynamic dateTime;

@override
void initState() {
  super.initState();
  dateTime = DateTime.now();
}

Textの中に指定している、『"日付が表示されます”』を、『"$dateTime”』へ変更します。

@override
Widget build(BuildContext context) {
  return Scaffold(
      body: Center(
    child: Text("$dateTime"),
  ));
}

ブラウザを更新し、確認すると、

image2

現在の時刻が表示されました。

次に、日付選択のボタンを作成します。

Widget build(BuildContext context) {
  return Scaffold(
      body: Center(
          child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text("$dateTime"),
      ElevatedButton(
        onPressed: () {},
        child: const Text("日付を選択"),
      )
    ],
  )));
}

image3

ボタンを作成した後、DatePickerを設定します。

Flutterでは、showDatePickerを使用します。

また、showDatePickerは、非同期にしたいので、async/awaitを使用しましょう。

showDatePickercontextにはcontext、initialDateには現在時刻であるdateTimefirstDateではカレンダー開始年、lastDateではカレンダー終了年を指定します。

_datePicker(BuildContext context) async {
  final DateTime? datePicked = await showDatePicker(
      context: context,
      initialDate: dateTime,
      firstDate: DateTime(2003),
      lastDate: DateTime(2023)); 
}

showDatePikerが選択された場合、dateTimeを選択した時間に書き換えるようにします。

_datePicker(BuildContext context) async {
  final DateTime? datePicked = await showDatePicker(
      context: context,
      initialDate: dateTime,
      firstDate: DateTime(2003),
      lastDate: DateTime(2023));
  if (datePicked != null && datePicked != dateTime) {
    setState(() {
      dateTime = datePicked;
    });
  }
}

onPressed_datePickerを指定します。

_datePicker(BuildContext context) async {
  final DateTime? datePicked = await showDatePicker(
      context: context,
      initialDate: dateTime,
      firstDate: DateTime(2003),
      lastDate: DateTime(2023));
  if (datePicked != null && datePicked != dateTime) {
    setState(() {
      dateTime = datePicked;
    });
  }
}

@override
Widget build(BuildContext context) {
  return Scaffold(
      body: Center(
          child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text("$dateTimeFormat"),
      ElevatedButton(
        onPressed: () {
          _datePicker(context);
        },
        child: const Text("日付を選択"),
      )
    ],
  )));
}

では、動作確認しましょう。

image4

『日付を選択』をクリックすると、

image5

カレンダーが表示されました。

試しに、他の日をタップし、OKをタップすると、

image6

日付が変わりました。

カレンダーが英語なので、日本語化します。

日本語化するには、パッケージのflutter_localizationsを使用します。

pubspec.yamlのdependenciesflutter_localizationsを設定します。

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

pubをgetしましょう。

先程のプロジェクトに戻り、flutter_localizationsをインポートします。

import 'package:flutter_localizations/flutter_localizations.dart';

MyApp内に、localizationsDelegatesを設定します。

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
    );
  }
}

_datePickershowDatePickerlocaleを設定します。

_datePicker(BuildContext context) async {
  final DateTime? datePicked = await showDatePicker(
      locale: const Locale("ja"),
      context: context,
      initialDate: dateTime,
      firstDate: DateTime(2003),
      lastDate: DateTime(2023));
  if (datePicked != null && datePicked != dateTime) {
    setState(() {
      dateTime = datePicked;
    });
  }
}

ブラウザでカレンダーを確認すると、

image7

カレンダーが日本語化されました。

今のままでは、日付がわかりにくいので、〇〇年◯月◯日とします。

パッケージのintl(https://pub.dev/packages/intl)を使用します。

pubspec.yamlのdependenciesintlを設定します。

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: ^0.17.0

pubをgetしましょう。

先程のプロジェクトに戻り、intlをインポートします。

import 'package:intl/intl.dart';

dynamic型でdateFormatを作成します。

class _MyHomePageState extends State<MyHomePage> {
  dynamic dateTime;
  dynamic dateFormat;

initState内にDateFormatを使用し、dateTimeを変換します。

formatdateTimeを指定します。

書式は、yyyy年MM月dd日としました。

@override
void initState() {
  super.initState();
  dateTime = DateTime.now();
  dateFormat = DateFormat("yyyy年MM月dd日").format(dateTime);
}

_datePicker内のsetStateにもDateFormatを使用します。

formatdateTimeを指定します。

if (datePicked != null && datePicked != dateTime) {
  setState(() {
    dateFormat = DateFormat("yyyy年MM月dd日").format(datePicked);
  });
}

ElevatedButton内のdateTimedateFormatへ修正します。

再起動し、ブラウザを確認すると、

image8

〇〇年◯月◯日に変わりました。

カレンダーで日付を取得すると、

image9

変更した日付も〇〇年◯月◯日に変わりました。

ブログ一覧