ホーム>プログラミング関連>その他のソースコード
ダウンロード

CalendardatePicker2

シングルデートピッカー、レンジピッカー、マルチピッカーのサポートを備えた、フラッターカレンダーターゲートピッカーに基づいた軽量でカスタマイズ可能なカレンダーピッカー。

シングルモードピッカーマルチモードピッカーレンジピッカーモードダイアログ機能
シングルモードマルチモード範囲モードダイアログ関数
シングルスクロールマルチスクロールレンジスクロールダイアログスクロール

イントロ

CalendarDatePicker2は、2つのメインウィジェットで構成されています。

  • CalendarDatePicker2 、このウィジェットにはカレンダーUIのみが含まれており、ユーザーが別の日付をタップするたびにイベントを発します。
  • CalendarDatePicker2WithActionButtons 、このウィジェットにはカレンダーUIとアクションボタン（Cancel＆OK）が含まれます。このウィジェットは、ユーザーが[OK]ボタンをタップする場合にのみ更新された値を放出します。

特徴

  • 拡張CalendArdatePickerを使用すると、 null initialdateが許可されます
  • 高度にカスタマイズ可能なUI
  • シングル、マルチ、範囲の3つのモードをサポートします
  • 日、月、年、スクロールの4つのビューをサポートしています
  • 組み込みのshowCalendarDatePicker2Dialog
  • 多言語サポート
  • 材料のサポート3

0.xxから移動します

バージョン1.xxはデフォルトで月のピッカーを有効にします。 v0.xxからv1.xxに移行したい場合は、古い動作を維持したい場合は、 disableMonthPicker trueに設定する必要があります。

使い方

詳細については、必ず例をご覧ください。

インストール

次の行をpubspec.yamlに追加します。 

 dependencies :
calendar_date_picker2 : ^1.1.8

基本セットアップ

完全な例はこちらから入手できます。

CalendarDatePicker2では、 configとvalueを提供する必要があります。

  • configは、カレンダーのセットアップとUIの構成が含まれています。
  • value 、カレンダーピッカーに渡される初期値であり、 value Listでなければなりません。

最小作業サンプル

 CalendarDatePicker2 (
  config : CalendarDatePicker2Config (),
  value : _dates,
  onValueChanged : (dates) => _dates = dates,
);

シングルデートピッカー構成

CalendarDatePicker2Configの初期化中に、configインスタンスのcalendarTypeはデフォルトでCalendarDatePicker2Type.singleに設定されるため、カレンダータイプを具体的に設定する必要はありません。

マルチデートピッカー構成

マルチモードの日付ピッカーを使用するには、configのCalendArtypeをCalendarDatePicker2Type.multiに設定する必要があります。 

 CalendarDatePicker2 (
  config : CalendarDatePicker2Config (
      calendarType : CalendarDatePicker2Type .multi,
  ),
  value : _dates,
  onValueChanged : (dates) => _dates = dates,
);

範囲日付ピッカーの構成

範囲モードの日付ピッカーを使用するには、configのCalendarDatePicker2Type.rangeにconfigのカレンダーアタイプを設定する必要があります。 

 CalendarDatePicker2 (
  config : CalendarDatePicker2Config (
      calendarType : CalendarDatePicker2Type .range,
  ),
  value : _dates,
  onValueChanged : (dates) => _dates = dates,
);

組み込みのダイアログ表示方法を使用します

このパッケージには、ダイアログとしてカレンダーを表示するための組み込みサポートが含まれています。それを使用するには、 showCalendarDatePicker2Dialog dialogSize電話する必要があります。これconfigはcontext必要な3つの引数が必要です。 

...
var results = await showCalendarDatePicker2Dialog (
  context : context,
  config : CalendarDatePicker2WithActionButtonsConfig (),
  dialogSize : const Size ( 325 , 400 ),
  value : _dates,
  borderRadius : BorderRadius . circular ( 15 ),
);
...

構成オプション

calendardatepicker2ウィジェット用

口論タイプ説明
config CalendardatePicker2ConfigカレンダーUI関連の構成
価値リスト<DateTime？>ピッカーが表示する必要がある[DateTime] [DateTime]。
onvaluueChanged ValueChanged <list <DateTime >>？選択した日付が変更されたときに呼び出されます
表示されたmonthdate DateTime？コントロールカレンダーの表示日表示された月
ondisplayedmonthChanged ValueChanged <DateTime>？ユーザーが非スロールモードでピッカーで新しい月/年にナビゲートするときに呼び出されます

calendardatepicker2configの場合：

オプションタイプ説明
CalendArtype CalendardatePicker2Type？カレンダーピッカータイプには、シングル、マルチ、範囲の3つの値があります
rangeBidirectionalブール？日付の選択を有効にするためのフラグも逆の順序で範囲で範囲を選択できます
FirstDate DateTime？最も早い許容DateTimeユーザーを選択できます
最後のDateTime？最新の許容DateTimeユーザーを選択できます
currentDate DateTime？カレンダーで概説される今日を表すデータタイム
CalendarViewMode CalendardatePicker2Mode？カレンダーピッカーの最初に表示されたビュー、4つのオプションが利用可能です：日、月、年、スクロール
CalendarViewScrollphysics Scrollphysics？暦月ビューのスクロール物理学
dynamiccalendarrowsブール？特定の月に基づいて動的なカレンダーの行を有効にするフラグ
aversamevalueSelectionブール？ [onvalueChanged]動作を制御するフラグ
AnimateTodisplayedMonthDateブール？常に表示されたMonthDateに常にアニメーション化するフラグ
セマンティクスディクショナリ地図？セマンティクスラベルのカスタム辞書
vibrationブール？日付の選択で振動を無効にするフラグ
weekdaylabelsリスト<文字列>？カスタム平日のラベルは、日曜日から始まるはずです
weekdaylabeltextStyle TextStyle？平日のラベルのカスタムテキストスタイル
weekdaylabelbuilder weekdaylabelbuilder？平日のラベルウィジェットを完全に制御する機能
FirstDayofweek int？ 0が日曜日にポイント、土曜日まで6ポイントの週の最初の日のインデックス。
lastmonthiconウィジェット？先月のボタンコントロールのカスタムアイコン
hidelastmonthiconブール？先月アイコンを隠すためのフラグ
NextMonThiconウィジェット？来月のボタンコントロール用のカスタムアイコン
hidenextmonthiconブール？来月のアイコンを隠すためのフラグ
Controlsheightダブル？カレンダーコントロールのトグルの高さのカスタム高さ
ControlStextStyle TextStyle？カレンダーモードのカスタムテキストスタイルトグル制御
CenterAlignModepickerブール？コントロールで年および月のテキストラベルを集中化するフラグ
modepickersgapダブル？月と年のピッカー間のカスタムギャップ距離
DisableModepickerブール？モードピッカーを無効にし、トグルアイコンを非表示にするフラグ
modepickertexthandler modepickertexthandler？コントロールモードのピッカーを制御する機能テキストを表示します
Modepickerbuilder modepickerbuilder？モードピッカーUIを完全に制御する機能
custommodepickericonウィジェット？モードピッカーボタンアイコンのカスタムアイコン
useabbrlabelformonthmodepickerブール？月モードピッカーに略語ラベルを使用します。月ピッカーが有効になっている場合にのみ機能します
DayViewController PageController？暦日ビュー用のカスタムページコントローラー
Daymaxwidthダブル？デイウィジェットの最大幅。 [daymaxwidth]がnullでない場合、デフォルトのサイズの設定をオーバーライドします
Dayborderradius borderradius？日インジケーターのカスタムボーダー半径
DayTextStyle TextStyle？暦日のカスタムテキストスタイル
今日のテキストスタイルTextStyle？現在の暦日のカスタムテキストスタイル
DisabledDayTextStyle TextStyle？障害者の日のカスタムテキストスタイル
DayTextStylePredicate DayTextStylePredicate？暦日のテキストスタイルを完全に制御する機能
SelectedDayhighlightscolor色？ハイライトカラーが選択された日
SelectedDayTextStyle TextStyle？選択した暦日のカスタムテキストスタイル
selectadedaypredicate selectadedaypredicate？カレンダーのどの日付を選択できるかを完全に制御する機能
SelectedRangeDayTextStyle TextStyle？選択された範囲暦日のカスタムテキストスタイル
SelectedRangeHighlightColor色？選択した範囲に含まれる日のハイライトカラー
SelectedRangeDecorationSepredicate selectedRangedecorationPredicate？選択した範囲で1日のウィジェットボックスの装飾を決定するための述語
selectedrangehighlighlightbuilder selectedrangehighlighlightbuilder？レンジピッカーのハイライトを完全に制御する機能
Daysplashcolor色？デイウィジェットのスプラッシュカラー
デイビルダーデイビルダー？ 1日のウィジェットUIを完全に制御する機能
DayModescrolldirection軸？ [CalendardatePicker2Mode.day]モードの軸スクロール方向
MonthViewController ScrollController？暦月ビューのカスタムスクロールコントローラー
月産業者月ビルダー？月間ウィジェットUIを完全に制御する機能
hidemonthpickerdividersブール？月のピッカーで仕切りを隠すフラグ
secrecablemonthpredicate secrecablemonthpredicate？その月リストのどの月を完全に制御できるようにする機能。
DisableMonthpickerブール？月のピッカーを無効にするフラグ
MonthTextStyle TextStyle？月のカスタムテキストスタイル
SelectedMonthTextStyle TextStyle？選択した月のカスタムテキストスタイル
DisabledMonthTextStyle TextStyle？障害者の月のカスタムテキストスタイル
YearViewController ScrollController？暦年ビューのカスタムスクロールコントローラー
yearborderradius borderradius？年度指標のカスタムボーダー半径
yeartextStyle TextStyle？年のカスタムテキストスタイル
SelectedYeartExtStyle TextStyle？選択した年のカスタムテキストスタイル
DisableDeyeArtextStyle TextStyle？障害者のカスタムテキストスタイル
SelectableYear Predicate SelectableYear Predicate？この年のリストを選択するための完全な制御を提供する機能。
イヤービルダーイヤービルダー？ 1年間のウィジェットUIに完全な制御を提供する機能
HideyearpickerDividersブール？年間ピッカーに仕切りを隠すためのフラグ
scrollviewtopheadertextStyle TextStyle？スクロールビュートップウィークラベルヘッダーのカスタムテキストスタイル
hidescrollviewtopheaderブール？スクロールビューピッカーのトップウィークラベルヘッダーを非表示にするフラグ
hidescrollviewtopheaderdividerブール？スクロールビューでトップウィークラベルヘッダーディバイダーを非表示にするフラグ
hidescrollviewmonthweekheaderブール？スクロールビューで月暦週間ラベルヘッダーを非表示にするフラグ
ScrollViewConstraints BoxConstraints？スクロールカレンダービュー用のBoxConstraints、スクロールモードでのみ機能します
scrollviewmonthyearbuilder scrollviewmonthyearbuilder？スクロールカレンダーの月に完全な制御を提供する機能ui
scrollviewonscrolling scrollviewonscrolling？スクロールビュー上のスクロール上でコールバックする機能
ScrollViewController ScrollController？スクロールカレンダービューへのカスタムスクロールコントローラー

上記の構成に加えて、CalendardatePicker2withActionButtonsConfigには9つの追加オプションがあります

オプションタイプ説明
GapbetWeencalendarandButtonsダブル？カレンダーとアクションボタンのギャップ
cancelbuttontextStyle TextStyle？キャンセルボタンのテキストスタイル
CancelButtonウィジェット？カスタムキャンセルボタン
OKBUTTONTEXTSTYLE TextStyle？ OKボタンのテキストスタイル
Okbuttonウィジェット？カスタムOKボタン
OpenedFromDialogブール？カレンダーはダイアログから開かれています
閉じたcanceltappedブール？ユーザーがキャンセルボタンをタップした後、ダイアログを閉じます
閉じた閉じたブール？ユーザーがOKボタンをタップした後、ダイアログを閉じます
ボタンパッドEdgeInsets？ OKおよびキャンセルボタン用のカスタムラッピングパディング

カスタムUI

上記の構成を使用することにより、あなた自身のカスタムカレンダーピッカーを必要に応じて作成できます。

画像画像画像

 CalendarDatePicker2WithActionButtons (
  config : CalendarDatePicker2WithActionButtonsConfig (
    firstDayOfWeek : 1 ,
    calendarType : CalendarDatePicker2Type .range,
    selectedDayTextStyle : TextStyle (color : Colors .white, fontWeight : FontWeight .w700),
    selectedDayHighlightColor : Colors .purple[ 800 ],
    centerAlignModePicker : true ,
    customModePickerIcon : SizedBox (),
    dayBuilder : _yourDayBuilder,
    yearBuilder : _yourYearBuilder,
  ),
  value : _dates,
  onValueChanged : (dates) => _dates = dates,
);

多言語サポート

このパッケージには多言語のサポートがあります。それを有効にするには、 LocaleラッピングMaterialAppに追加します。 

 MaterialApp (
  localizationsDelegates : GlobalMaterialLocalizations .delegates,
  supportedLocales : const [
    Locale ( 'en' , '' ),
    Locale ( 'zh' , '' ),
    Locale ( 'ru' , '' ),
    Locale ( 'es' , '' ),
    Locale ( 'hi' , '' ),
  ],
  ...
);
画像画像画像画像
中文陶芸español हिंदी

貢献

このプロジェクトに自由に貢献してください。 ？プルリクエストは大歓迎です！

PRを作成する前にいくつかのヒントがあります：

  • PRを上げる前に、常に問題/機能を作成してください
  • 問題の最小限の再現可能な例を常に作成してください
  • 公式DART拡張機能をフォーマッターとして使用するか、 dart format . -l 80 VSコードを使用していない場合
  • 必要な最小スコープに変更を保持してください（無関係な変更を導入しないでください）
  • feat:またはfix: fo your your commitを追加して、このgitコミットコンベンションに従ってください
拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて