パッケージ、リポジトリ、アプリカテゴリを検索

flutter_datetime_picker のカバー
パッケージ詳細v1.5.1

flutter_datetime_picker

Flutter用の日時ピッカーで、英語、オランダ語、中国語で日付/時刻/日付と時刻を選択でき、独自のピッカー内容もカスタマイズできます

30日間ダウンロード
1.3万
いいね数
908
Pub ポイント
60

パッケージをインストール

flutter pub add flutter_datetime_picker

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

英語、オランダ語、中国語をサポートするカスタマイズ可能な日付および時刻ピッカーを提供するFlutterパッケージです。ユーザーは日付、時刻、または両方を選択でき、ピッカーの外観やコンテンツをカスタマイズするオプションも用意されています。ローカライズされた日時入力と柔軟なUIデザインが必要なアプリに最適です。このパッケージはオープンソースであり、GitHubでメンテナンスされており、開発者がピッカーの動作と表示に関して完全な制御权を持っています。

用途

  • 日付選択が必要なフォーム入力
  • 時刻ベースのスケジューリング機能
  • マルチリンガルアプリインターフェース
  • カスタマイズ可能な UI コンポーネント
  • 日時範囲ピッカー
  • ローカライズされたユーザー体験

主な機能

  • 複数の言語をサポート (英語、オランダ語、中国語)
  • カスタマイズ可能なピッカーのコンテンツとスタイル
  • 日付、時刻、または組み合わせた日時モードを選択可能
  • オープンソース、パブリックリポジトリ
  • pub.dev を通じた簡単な統合
  • クロスプラットフォーム互換性

適している対象

  • 多言語アプリを開発する開発者
  • ローカライズされた日時入力が必要なアプリ
  • 柔軟なピッカーを望むUIデザイナー
  • 軽量な日時選択を必要とするプロジェクト
  • モバイルおよびWeb用にFlutterを使用するチーム

注意事項

  • プラットフォーム固有のカスタマイズオプションはリストされていません
  • 基本的な使用方法以外のドキュメントは限られている
  • 高度なカスタマイズには手動設定が必要です
  • アクセシビリティ向けに明示的に設計されていない
  • 複雑なレイアウトには追加の依存関係が必要になる場合があります

元の README

関連するソースリポジトリの README 原文のスナップショットです。最新の内容はリポジトリをご覧ください。

Flutter Datetime Picker

(Pub) flutter_datetime_picker

A flutter date time picker inspired by flutter-cupertino-date-picker

you can choose date / time / date&time in multiple languages:

  • Albanian(sq)
  • Arabic(ar)
  • Armenian(hy)
  • Azerbaijan(az)
  • Basque(eu)
  • Bengali(bn)
  • Bulgarian(bg)
  • Catalan(cat)
  • Chinese(zh)
  • Danish(da)
  • Dutch(nl)
  • English(en)
  • French(fr)
  • German(de)
  • Hebrew(he)
  • Indonesian(id)
  • Italian(it)
  • Japanese(jp)
  • Kazakh(kk)
  • Korean(ko)
  • Persian(fa)
  • Polish (pl)
  • Portuguese(pt)
  • Russian(ru)
  • Spanish(es)
  • Swedish(sv)
  • Thai(th)
  • Turkish(tr)
  • Vietnamese(vi)
  • Khmer(kh)

and you can also custom your own picker content

Date picker Time picker Date Time picker

International:

Date Time picker (Chinese) Date Time picker (America) Date Time picker (Dutch) Date Time picker (Russian)

Demo App

main page

Usage

TextButton(
    onPressed: () {
        DatePicker.showDatePicker(context,
                              showTitleActions: true,
                              minTime: DateTime(2018, 3, 5),
                              maxTime: DateTime(2019, 6, 7), onChanged: (date) {
                            print('change $date');
                          }, onConfirm: (date) {
                            print('confirm $date');
                          }, currentTime: DateTime.now(), locale: LocaleType.zh);
    },
    child: Text(
        'show date time picker (Chinese)',
        style: TextStyle(color: Colors.blue),
    ));

Customize

If you want to customize your own style of date time picker, there is a class called CommonPickerModel, every type of date time picker is extended from this class, you can refer to other picker model (eg. DatePickerModel), and write your custom one, then pass this model to showPicker method, so that your own date time picker will appear, it’s easy, and will perfectly meet your demand

How to customize your own picker model:

class CustomPicker extends CommonPickerModel {
  String digits(int value, int length) {
    return '$value'.padLeft(length, "0");
  }

  CustomPicker({DateTime currentTime, LocaleType locale}) : super(locale: locale) {
    this.currentTime = currentTime ?? DateTime.now();
    this.setLeftIndex(this.currentTime.hour);
    this.setMiddleIndex(this.currentTime.minute);
    this.setRightIndex(this.currentTime.second);
  }

  @override
  String leftStringAtIndex(int index) {
    if (index >= 0 && index < 24) {
      return this.digits(index, 2);
    } else {
      return null;
    }
  }

  @override
  String middleStringAtIndex(int index) {
    if (index >= 0 && index < 60) {
      return this.digits(index, 2);
    } else {
      return null;
    }
  }

  @override
  String rightStringAtIndex(int index) {
    if (index >= 0 && index < 60) {
      return this.digits(index, 2);
    } else {
      return null;
    }
  }

  @override
  String leftDivider() {
    return "|";
  }

  @override
  String rightDivider() {
    return "|";
  }

  @override
  List<int> layoutProportions() {
    return [1, 2, 1];
  }

  @override
  DateTime finalTime() {
    return currentTime.isUtc
        ? DateTime.utc(currentTime.year, currentTime.month, currentTime.day,
            this.currentLeftIndex(), this.currentMiddleIndex(), this.currentRightIndex())
        : DateTime(currentTime.year, currentTime.month, currentTime.day, this.currentLeftIndex(),
            this.currentMiddleIndex(), this.currentRightIndex());
  }
}

Getting Started

For help getting started with Flutter, view our online documentation.

For help on editing package code, view the documentation.

カテゴリー

ソースリポジトリ

このパッケージを使用しているプロジェクト