本日はDartでDatePickerを表示するサンプルを作成しましたので、記載していきます。


日付を選択して、ラベルに選択した日付を転記する部分のDateFomatterがうまく使えなかったので、またintlパッケージを使用して、簡易かつ確実に日付の転記を実現しています。

pucspec.yaml

dependencies:

  flutter:

    sdk: flutter

  intl: ^0.17.0 # これを追加

 

アーキテクチャはMVCやMVVM等を使わずに、main.dartのみで書きました。


main.dart

import 'package:flutter/material.dart';

import 'package:intl/intl.dart'; // 追加



// アプリケーションのエントリーポイント

void main() => runApp(MyApp());



class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    // マテリアルデザインのアプリケーションを返す

    return MaterialApp(

      home: DatePickerDemo(),

    );

  }

}



// DatePickerを含むデモ用のStatefulWidget

class DatePickerDemo extends StatefulWidget {

  @override

  _DatePickerDemoState createState() => _DatePickerDemoState();

}



class _DatePickerDemoState extends State<DatePickerDemo> {

  // 選択された日付を保持するための変数

  DateTime? _selectedDate;



  // 日付を選択するための非同期関数

  Future<void> _selectDate(BuildContext context) async {

    // 日付選択ダイアログを表示し、選択された日付を取得する

    final DateTime? picked = await showDatePicker(

      context: context,

      initialDate: DateTime.now(), // 初期日付を現在の日付に設定

      firstDate: DateTime(2000), // 選択可能な最小日付

      lastDate: DateTime(2101), // 選択可能な最大日付

    );

    // ユーザーが日付を選択した場合、選択された日付を状態に反映する

    if (picked != null && picked != _selectedDate) {

      setState(() {

        _selectedDate = picked;

        print('Selected date: $_selectedDate'); // デバッグ用のログ

      });

    }

  }



  @override

  Widget build(BuildContext context) {

    print('Building UI with selected date: $_selectedDate'); // 追加のデバッグ用のログ

    return Scaffold(

      appBar: AppBar(

        title: Text('Date Picker Demo'),

      ),

      body: Center(

        child: Column(

          mainAxisSize: MainAxisSize.min,

          children: <Widget>[

            // 選択された日付を表示するテキストウィジェット

            Container(

              padding: EdgeInsets.all(16.0),

              child: Text(

                _selectedDate == null

                    ? 'No date selected!' 

                    : 'Selected date: ${DateFormat('yyyy-MM-dd').format(_selectedDate!)}', // 日付をフォーマットして表示

                style: TextStyle(fontSize: 24), // 文字サイズを大きく設定

                textAlign: TextAlign.center, // テキストを中央揃え

              ),

            ),

            SizedBox(height: 20.0), 

            ElevatedButton(

              onPressed: () => _selectDate(context),

              child: Text('Select date'),

            ),

          ],

        ),

      ),

    );

  }

}

 

今回使用している、DatePickerの部分はこちらです。

// 選択された日付を保持するための変数

  DateTime? _selectedDate;



  // 日付を選択するための非同期関数

  Future<void> _selectDate(BuildContext context) async {

    // 日付選択ダイアログを表示し、選択された日付を取得する

    final DateTime? picked = await showDatePicker(　//←■showDatePickerは用意されている呼び出し関数

      context: context,

      initialDate: DateTime.now(), // 初期日付を現在の日付に設定

      firstDate: DateTime(2000), // 選択可能な最小日付

      lastDate: DateTime(2101), // 選択可能な最大日付

    );

    // ユーザーが日付を選択した場合、選択された日付を状態に反映する

    if (picked != null && picked != _selectedDate) {

      setState(() {

        _selectedDate = picked;

        print('Selected date: $_selectedDate'); // デバッグ用のログ

      });

    }

  }

 

実行結果
　

中央のボタンを押すとDatapickerが立ち上がり、選択した日付を転記します。