1. HOME
  2. ブログ
  3. IT技術
  4. Flutterでネイティブ画面を呼び出してみよう

Flutterでネイティブ画面を呼び出してみよう

前回、OS固有の問題を解決するためにネイティブコードの呼び出し方法を解説しました。

今回はさらなる問題解決のため、ネイティブの画面を呼び出せるようにしましょう。

Flutter側の呼び出し処理

今回はアプリのログイン処理をネイティブで行う、という想定で話を進めていきます。

Flutter側はInvokeMethodを使用し呼び出します。詳細は前回の記事で解説しています。

iOSの呼び出し

XCodeを開きiOSのログイン画面を作ります。伝統的なStoryboard+ViewControllerの形式で作ります。ログインボタンを押すと通信し、ログイン結果(トークンなど)をFlutter側に返す、というイメージです。

Swift側のAppDelegate実装です。

methodChannelのハンドラを設定する段階でFlutterViewControllerを取得しています。FlutterではこのFlutterViewController一枚(正確には内包されているFlutterViewクラス)に各画面のUIを描画する作りになっています。とはいえネイティブアプリ上の扱いはあくまでViewControllerなので、いつも通りpresent等で遷移することができます。

また、flutter側の処理を再開させるにはsetMethodCallHandler()で渡されるFlutterResultを保持しておく必要があります。今回はコードを短くするためLoginViewControllerのメンバ変数に持たせていますが、実際はdelegateなどでやりとりした方が無難でしょう。

LoginViewControllerにはボタン押下処理を記述しています。実際は通信し、ログイントークンやjsonを返す事になります。

Androidの呼び出し

Kotlinも同様にAndroid標準の画面遷移で移動します。

Activityが終了したことをFlutter側に伝える必要ため今回はstartActivityForResultを使用し、LoginActivity画面から結果を取るようにしています。

LoginActivityではiOSアプリと同じく、アクティビティ終了時に情報を渡します。

Flutter側の受け取り処理

Flutter側の受け取りは画面遷移を行わないネイティブ呼び出しと同一です。

ログインが成功しFlutterの次画面に遷移する、といったイメージです。

実際の動作

完成したものがこちらです。まずはFlutterでログイン画面を開き、

Androidのネイティブ画面で「ログイン」ボタンを押すと、

ネイティブ画面で取得した値(今回は「android_token」)をFlutterに持ってくることができます。

あとはFlutter側で画面遷移を行うことで引き続きFlutterアプリとして動作します。

まとめ

Flutterはネイティブアプリ上では一つのViewController/Activityを使い回している、という点が分かれば処理をイメージするのは難しくないかと思います。

前回以上にOSネイティブの知識が必要となりますが、Flutterで取りきれないライブラリやOS仕様を解決するための手段として知っておいて損はしませんね。

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア