開発

【Flutter】ModalRouteを使ったカスタムダイアログの実装

こんにちは。スマホアプリをメインに開発しているロッキーカナイです。

記事が大分ご無沙汰になってしまいましたが、今回はFlutterでカスタムダイアログの実装について紹介したい思います。

まずFlutterでダイアログを実装する場合は、SimpleDialogAlertDialogを使うと思うのですが、クライアントの要望にあったオシャンティなダイアログを作るとなると、これらでは実現出来ません。そこでカスタムダイアログを用いて実装します。

ではカスタムダイアログの実装を見てみましょう。

実装説明

ModalRouteを継承したページを用意し、モーダル画面遷移させて現在のページの上にかさねる感じになります。

よって、現在のページ上にボタンがあったとしてもタッチは届かず、ダイアログとしての機能を満たします。

ModalRouteを継承したルートクラスを実装

ModalRouteを継承したModalOverlayクラスを追加します。

 

Androidで実機のバックボタンを押すとダイアログが閉じてしまうので、有効無効の切り替えができるようにしました。dialogContentメソッドのWillPopScopeクラスのonWillPopでポップする際にコールバックが呼ばれて、bool値を返すことで切り替えしてます。

また、ModalOverlayではcontentsというWidgetをもらってそれを表示させるようにしました。

 

ダイアログのコンテンツクラスを実装

CustomDialogというクラスを作り、ここでModalOverlayのコンテンツを作って渡すのと、push遷移させます。

 

呼び出しは以下のようにします。

 

フキダシはここのを使用しました。

まとめ

いかがでしたでしょうか?

ModalRouteを使ってカスタムダイアログの実装を紹介をしました。

今回作ったModalOverlayを用いて、通信中などで使うインジケータビューとしても使うことができますので、次回はその紹介をしたいと思います。

いつかマイブームのキックボクシングの記事書けたらいいなぁ。

ABOUT ME
ロッキーカナイ
ロッキーカナイ
iOSをメインに、SwiftやObjective-C言語の開発をしてます。趣味は猫と戯れる事、PHPを使ったサイト作成やAndroidの開発もしております。ちなみに名前のロッキーカナイはよく昼飯を食べる所w