[読書会]ダイアログについて

Flutter で、アダプティブな(適応型デザインが要求されるウィジェットには、

ダイアログ(Dialogs)
・ナビゲーション(Navigation)
・カスタムレイアウト(Custom layout)

があります。(このことは、docs.flutter.dev/ui/adaptive-responsive で述べられています)
以下は、(上記のうちの)ダイアログ(Dialogs)ウィジェット(または関数)のリファレンスです。

 

1.ダイアログ表示メソッド

各ダイアログクラス(例:DialogAlertDialog、等)を呼び出して表示する為のトリガー(あるいは、ハンドラー)として機能するメソッド類です。

1-(1).showDialog<T> function

各Dialogクラス(例:Dialog, AlertDialog, SimpleDialog等)を戻す(returnする)為に使用されます。
(デザインはマテリアル3に準拠しています)

設定等:

Future showDialog({
 required BuildContext context,
 required WidgetBuilder builder,
 bool barrierDismissible = true,
 Color? barrierColor,
 String? barrierLabel,
 bool useSafeArea = true,
 bool useRootNavigator = true,
 RouteSettings? routeSettings,
 Offset? anchorPoint,
 TraversalEdgeBehavior? traversalEdgeBehavior,
})

 

1-(2).showAdaptiveDialog<T> function

基本機能は(上記1-(1)の)showDialogと同じだが、iOS, macOS の場合にのみ、showCupertinoDialog として動作します。(それ以外のプラットフォームでは、showDialogと同じ動作です)
(デザインはマテリアル3に準拠しています)

 

1-(3).showGeneralDialog<T extends Object?> function

(どちらかといえば上記1-(1)の)showDialog と同様の使い方ができますが、デザインはマテリアル3準拠ではないので、デザインを統一したい場合は、DialogTheme クラスを利用してデザインを統一したり、あるいは(手作業設定により)各設定を行うことでカスタマイズする必要があります。
(逆に言うと、一番カスタマイズによる柔軟性が高い関数です)

 

2.ダイアログ本体クラス

(上記1-(1)~(3)の)ダイアログ表示メソッドに呼び出されることで表示されるダイアログクラスです。

2-1.汎用ダイアログ

(後述の日付選択や時間選択用のダイアログとは違い)汎用的に最も使用されるダイアログです。

2-1(1).Dialog class

カスタムダイアログを表示するための基本的なウィジェットです。それ故、それ以外になにか特徴的な機能があるわけではありません。故に、最初から直接これの使用をするのではなく、まずは特定の種類のマテリアル デザイン ダイアログを実装するAlertDialog またはSimpleDialog の使用を検討するべきです。

参照:

AlertDialog :メッセージといくつかのボタンがあるダイアログ用です。
SimpleDialog :さまざまなオプションを提供するダイアログ用です。
showDialog:実際にダイアログを表示し、その結果を返します。
マテリアルデザインmaterial.io/design/components/dialogs.html

 

2-1(2).AlertDialog class

通常、ダイアログを表示するshowDialogに子ウィジェットとして渡されます。
(ユーザーに複数のオプションの選択肢を提供するダイアログの場合は、SimpleDialogの使用を検討して下さい)

設定等:

アラート ダイアログ (基本ダイアログとも呼ばれます) は、確認が必要な状況についてユーザーに通知します。アラート ダイアログには、オプションのタイトルとオプションのアクション リストがあります。タイトルはコンテンツの上に表示され、アクションはコンテンツの下に表示されます。

確認が必要な状況についてユーザーに通知します。アラート ダイアログには、オプションのタイトルとオプションのアクション リストがあります。タイトルはコンテンツの上に表示され、アクションはコンテンツの下に表示されます。

アラートダイアログとスクロール
デフォルトでは、アラート ダイアログは子要素を収容できるサイズに設定されます。

コンテンツが大きすぎて画面に垂直に収まらない場合は、ダイアログにタイトルとアクションが表示され、コンテンツがオーバーフローします。これはほとんど望ましくありません。オーバーフローを回避するには、SingleChildScrollViewなどの コンテンツのスクロール ウィジェットの使用を検討してください。

ダイアログはコンテンツに合わせてサイズを調整しようとするため、コンテンツは 固有の寸法の報告をサポートしている必要があります。特に、これは、ListViewGridViewCustomScrollViewなどの遅延レンダリングされたウィジェットが、特定のサイズを強制するウィジェット ( SizedBox など)にラップされていない限り、 AlertDialogで動作しないことを意味します。

ダイアログのサイズをより細かく制御するには、 Dialog を直接使用することを検討してください。

参照

SimpleDialogはコンテンツのスクロール処理は行いますが、アクションはありません。
AlertDialogとSimpleDialogのベースとなるDialog。
CupertinoAlertDialog は、iOS スタイルのアラート ダイアログです。
showDialogは実際にダイアログを表示し、その結果を返します。
material.io/design/components/dialogs.html#alert-dialog
m3.material.io/components/dialogs

 

2-1(3).SimpleDialog class

通常、ダイアログを表示するshowDialogに子ウィジェットとして渡されます。
・ユーザーに複数のオプションから選択するオプションが提供されます。
・選択肢の上にオプションのタイトルが表示されます。

設定等:

選択肢は通常、SimpleDialogOptionウィジェットを使用して表されます。他のウィジェットを使用する場合は、マテリアル デザインで想定される間隔を取得するための規則に関する注意事項については、 contentPadding を参照してください。
状況をユーザーに通知するダイアログの場合は、 AlertDialogの使用を検討してください。

 

2-2.目的別ダイアログ

(前述の汎用ダイアログとは違い)限定された目的に使用されるダイアログです。

 

2-2-A.日付選択ダイアログ

日付を1日ずつ選択できるダイアログを表示します。

 

2-2-A(1).showDatePicker function(関数)

日付選択ダイアログ(シンプル版(シンプルに日付選択ダイアログを表示する))
関数を呼び出すだけで、標準の日付選択ダイアログが表示されます。

設定可能項目:

Future showDatePicker({
 required BuildContext context,
 DateTime? initialDate,
 required DateTime firstDate,
 required DateTime lastDate,
 DateTime? currentDate,
 DatePickerEntryMode initialEntryMode = DatePickerEntryMode.calendar,
 SelectableDayPredicate? selectableDayPredicate,
 String? helpText,
 String? cancelText,
 String? confirmText,
 Locale? locale,
 bool barrierDismissible = true,
 Color? barrierColor,
 String? barrierLabel,
 bool useRootNavigator = true,
 RouteSettings? routeSettings,
 TextDirection? textDirection,
 TransitionBuilder? builder,
 DatePickerMode initialDatePickerMode = DatePickerMode.day,
 String? errorFormatText,
 String? errorInvalidText,
 String? fieldHintText,
 String? fieldLabelText,
 TextInputType? keyboardType,
 Offset? anchorPoint,
 ValueChanged? onDatePickerModeChange,
 Icon? switchToInputEntryModeIcon,
 Icon? switchToCalendarEntryModeIcon,
})

参照:

showDateRangePicker : 日付の範囲を選択するために使用されるマテリアル デザインの日付範囲ピッカーを表示します。
CalendarDatePicker は: 日付選択ダイアログで使用されるカレンダー グリッドを提供します。
InputDatePickerFormField: 日付を入力するためのテキスト入力フィールドを提供します。
DisplayFeatureSubScreen : DisplayFeatureが画面をサブ画面に分割する方法の詳細を文書化します 。
showTimePicker : Material Design の時間ピッカーを含むダイアログを表示します。

また、関数故に、showDialogで呼び出さずとも、関数を呼ぶだけで実装できます。

showDatePicker function(関数)
DateTime? selectedDate = await showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(2000),
  lastDate: DateTime(2101),
);

if (selectedDate != null) {
  // ユーザーが日付を選択した場合の処理
  print("Selected date: ${selectedDate.toLocal()}");
}

 

2-2-A(2).DatePickerDialog class(クラス)

上記(showDatePicker)と違い、カスタマイズ可能。
例えば、日付のフォーマット、キャンセルボタンの挙動等を細かく設定したり、他のウィジェットと組み合わせて、より複雑なダイアログを構築できます。

 

2-2-B.日付選択ダイアログ

日付を範囲選択できるダイアログを表示します。

 

2-2-B(1).showDateRangePicker function

日付範囲(開始日、終了日)選択ダイアログ(シンプル版(シンプルに日付範囲選択ダイアログを表示する))で、関数を呼び出すだけで、標準の日付選択ダイアログが表示されます。

設定可能項目:

Future showDateRangePicker({
 required BuildContext context,
 DateTimeRange? initialDateRange,
 required DateTime firstDate,
 required DateTime lastDate,
 DateTime? currentDate,
 DatePickerEntryMode initialEntryMode = DatePickerEntryMode.calendar,
 String? helpText,
 String? cancelText,
 String? confirmText,
 String? saveText,
 String? errorFormatText,
 String? errorInvalidText,
 String? errorInvalidRangeText,
 String? fieldStartHintText,
 String? fieldEndHintText,
 String? fieldStartLabelText,
 String? fieldEndLabelText,
 Locale? locale,
 bool barrierDismissible = true,
 Color? barrierColor,
 String? barrierLabel,
 bool useRootNavigator = true,
 RouteSettings? routeSettings,
 TextDirection? textDirection,
 TransitionBuilder? builder,
 Offset? anchorPoint,
 TextInputType keyboardType = TextInputType.datetime,
 Icon? switchToInputEntryModeIcon,
 Icon? switchToCalendarEntryModeIcon,
})

参照:

showDatePicker: 単一日付選択に使用される 日付ピッカーを表示します。
DateTimeRange : 日付の範囲を記述するために使用されます。
DisplayFeatureSubScreen:  DisplayFeatureが画面をサブ画面に分割します。

また、関数故に、showDialogで呼び出さずとも、関数を呼ぶだけで実装できます。

showDateRangePicker function(関数)
DateTimeRange? selectedDateRange = await showDateRangePicker(
  context: context,
  firstDate: DateTime(2000),
  lastDate: DateTime(2101),
  initialDateRange: DateTimeRange(
    start: DateTime.now(),
    end: DateTime.now().add(Duration(days: 7)),
  ),
);

if (selectedDateRange != null) {
  // ユーザーが日付範囲を選択した場合の処理
  print("Selected range: ${selectedDateRange.start} - ${selectedDateRange.end}");
}

 

2-2-B(2).DateRangePickerDialog class

上記(showDateRangePicker)と違い、カスタマイズ可能。
例えば、独自のボタンやレイアウトを追加したり、特定の挙動をカスタマイズしたりできます。

DateRangePickerDialog class(クラス)
showDialog(
  context: context,
  builder: (BuildContext context) {
    return DateRangePickerDialog(
      initialDateRange: DateTimeRange(
        start: DateTime.now(),
        end: DateTime.now().add(Duration(days: 7)),
      ),
      firstDate: DateTime(2000),
      lastDate: DateTime(2101),
    );
  },
);

 

2-2-C.時間選択ダイアログ

2-2-C(1).showTimePicker function(関数)

時間選択ダイアログ(シンプル版(シンプルに時間選択ダイアログを表示する))。
関数を呼び出すだけで、標準の時間選択ダイアログが表示されます。

showTimePicker function(関数)
TimeOfDay? selectedTime = await showTimePicker(
  context: context,
  initialTime: TimeOfDay(hour: 14, minute: 30),
);

if (selectedTime != null) {
  // ユーザーが時間を選択した場合の処理
  print("Selected time: ${selectedTime.format(context)}");
}

  

2-2-C(2).TimePickerDialog class(クラス)

時間選択ダイアログ(上記(showTimePicker)と違い、カスタマイズ可能)。
例えば、時間のフォーマット、キャンセルボタンの挙動等を細かく設定したり、他のウィジェットと組み合わせて、より複雑なダイアログを構築できます。

TimePickerDialog class(クラス)
showDialog(
  context: context,
  builder: (BuildContext context) {
    return TimePickerDialog(
      initialTime: TimeOfDay(hour: 14, minute: 30),
    );
  },
);

  

2-2-D.バージョン情報表示ダイアログ

2-2-D(1).showAboutDialog function(関数)

通常、次のAboutDialogクラスを戻す(return)為に使用されます。

2-2-D(2).AboutDialog class(クラス)

バージョン情報(アプリケーションのアイコン、名前、バージョン番号、著作権、およびアプリケーションで使用されるソフトウェアのライセンスを表示するボタンを含む)ダイアログ ボックスです。

AboutDialogを表示するには、showAboutDialogを使用します。

仕様等:

アプリケーションにDrawerがある場合、AboutListTileウィジェットを使用すると、About ダイアログを表示するプロセスが簡単になります。
showAboutDialogによって表示されるAboutDialogには、showLicensePageを呼び出すボタンが含まれています 。
LicensePageに表示されるライセンスは、LicenseRegistry APIによって返されるライセンスであり 、これを使用してリストにライセンスを追加できます。

コメントを残す