開発

【Flutter】ModalRouteを使ったインジケータビューの実装

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

前回はFlutterのカスタムダイアログの実装について紹介しましたが、続編ということで、前回作成したModalOverlayを使ってインジケータビューの実装を紹介したいと思います。

 

実装説明

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

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

 

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

こちらは前回作ったModalOverlayを使用します。

ちなみにコードは以下になります。

 

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

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

前回の記事をコピって貼り付けました。ごめんね。

 

インジケータのコンテンツクラスを実装

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

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

 

 

まとめ

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

ModalRouteを使ってインジケータの実装を紹介をしました。

最近は毎日Flutterを触ってますが、すごく楽しいんですよねー。森の動物たちにも伝えたいぐらいw

この記事を見て、Flutterをやってみようと思ってもらえたらすごく嬉しいです。

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