【2024年4月】弊社では、基本リモートワークで一緒に成長してくださるメンバーを広く募集させていただいております。 詳細はこちら

【Flutter】ドロップダウン(プルダウン)から日付を選択したり、現在の日付を取得して比較する方法を解説!

【Flutter】ドロップダウン(プルダウン)から日付を選択したり、現在の日付を取得して比較する方法を解説!
いちの

こんばんは〜
弊社ブログに辿り着いていただきありがとうございます!
株式会社メモリアインクのいちのです

この記事を読んでわかること

  • Flutterでのプルダウンメニューの作り方
  • プルダウンメニューから日付を選択する方法
  • Dartで現在の日付を取得する方法

開発環境

  • Dart 3.0.0
  • Flutter 3.10.0
目次

プルダウンから日付を選択する方法

概要

プルダウンメニュー(ドロップダウンメニュー)を使用して日付を選択することは、ユーザーインターフェースの一部としてよく見られる機能です。FlutterではDropdownButtonウィジェットを用いて、簡単にこの機能を実装できます。

サンプルコード

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DateDropdown(),
    );
  }
}

class DateDropdown extends StatefulWidget {
  @override
  _DateDropdownState createState() => _DateDropdownState();
}

class _DateDropdownState extends State<DateDropdown> {
  String selectedDate = '2021-01-01'; // 初期選択値

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('日付選択'),
      ),
      body: Center(
        child: DropdownButton<String>(
          value: selectedDate,
          onChanged: (newValue) {
            setState(() {
              selectedDate = newValue!;
            });
          },
          items: <String>['2021-01-01', '2021-02-01', '2021-03-01']
              .map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
        ),
      ),
    );
  }
}

サンプルコードの解説

  • 5-12行目: MyAppクラスがアプリケーションのルートです。
  • 14-17行目: DateDropdownは日付を選択するためのウィジェットです。
  • 33行目: selectedDate変数で選択された日付を保持し、DropdownButtonウィジェットを使用して日付の選択肢をユーザーに提供します。
  • 30行目: DropdownButtonvalueに現在選択されている日付を設定します。
  • 31-35行目: onChangedコールバックで選択された日付をselectedDateに更新します。
  • 36-42行目: itemsプロパティでドロップダウンメニューの選択肢を定義します。

動作確認

いちの

それでは、動作を確認してみましょ〜

【Flutter】ドロップダウン(プルダウン)から日付を選択

ウィジェットを横幅いっぱいに広げたり、割合表示する方法にご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。

現在の日付を取得して比較する方法

概要

DartのDateTimeクラスを使用すると、現在の日付を取得し、選択した日付と比較することができます。

サンプルコード

DateTime now = DateTime.now(); // 現在の日付と時刻を取得
DateTime selected = DateTime.parse(selectedDate); // 選択された日付をDateTimeオブジェクトに変換

if (selected.isBefore(now)) {
  // 選択された日付が現在より前の場合の処理
} else if (selected.isAfter(now)) {
  // 選択された日付が現在より後の場合の処理
} else {
  // 選択された日付が現在と同じ場合の処理
}

サンプルコードの解説

  • DateTime.now()で現在の日付と時刻のDateTimeオブジェクトを取得します。
  • DateTime.parse(selectedDate)で選択された日付の文字列をDateTimeオブジェクトに変換します。
  • isBefore()メソッドとisAfter()メソッドを使用して、選択された日付が現在の日付より前か後かを判断します。

まとめ

いかがでしたでしょうか?今回は、ドロップダウン(プルダウン)から日付を選択したり、現在の日付を取得して比較する方法について、サンプルコードを用いて解説してみました。読者様の開発の手助けに少しでもなればいいなと思いこの記事を書かせていただいております。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ!

いちの

自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次