Custom Dialog by Flutter

こんにちはEveryDaySoft代表の永田です。

FlutterのカスタムDialogプログラムを紹介します。
作成したWidget、サイズ、位置などを自由に設定できます。
デフォルトのDialogでもできるかもしれませんが、大きな違いは、１つのMethodで開閉が行われます。
作成したWidgetは、ドラッグしたデータをDialog上のWidgetにドロップするというものです。

ソース

https://github.com/DaisukeNagata/flutter_application_dialog/tree/main

挙動

画面収録 2023-05-19 20.41.53

作成したFlutterのDialogについて

buttonのtap時に使用できます。
サイズ、位置などを簡単に指定できます。
開閉処理を考えなくても、自動でできます。

追加した機能について

button内のみ設定してある、ドラッグしたデータを更新するためStreamBuilderを使用しています。
https://github.com/DaisukeNagata/flutter_application_dialog/blob/main/lib/main.dart#L31

今後の公式Flutterの課題

アプリケーションはアプリの領域を超えたUI、UXが多様に使用されるので、
デフォルト機能で背面の操作を有効・無効が選択できるようになると良いと思っています。
Widgetのみで実装するとできなくはないですが、設定順を考える必要があるので、methodで使用できると良いです。

追記

こちらのbranchで背面のWidgetも操作可能にしました。

何が良いかというと、複雑なwidgetが多重に入り込んでいるプログラムでも

順番関係なしにwidgetをdialogと同じ原理で呼び出し、背面の操作、有効無効も選択できるという点です。これはFlutterの公式にはない機能でしたので、生成しました。

https://github.com/DaisukeNagata/flutter_application_dialog/tree/feature/rear_operation

原理は簡単で、呼び出しmethodのchildにIgnorePointerを設定して、背面を操作可能にしました。

Future<void> show(BuildContextcontext, Widget child, intspeed) async {

ドラッグ&ドロップに関しては、操作タイミングで実行する関数にflgを設定しているだけです。

 貴重なお時間読みくださいまして、誠にありがとうございます。