遷移先画面を終了時に値を受け取るFlutter遷移先の画面を終了する時に、元の画面へ何かしらのデータを渡したいというケースがあります。遷移先の画面で何か選択をした結果を元の画面へ反映したい時などです。AndroidであればstartActivityForResultでActivityを起動し、元画面のonActivityResultでデータを受け取るという感じで実装することができます。FlutterではNavigator.pushがFutureを返します。遷移先のNavigator.popはこのFutureをcompleteさせますので、遷移元の画面はFutureへコールバックを登録しておくことでデータを受け取ることができます。screenを元にして実装方法を紹介します。遷移元画面作成ボタン押下時に画面遷移させるようにします。遷移先画面を作成"Up!"と"Down!"と書かれた2つのボタンを用意します。}}各ボタン押下時にNavigator.popでこの画面を終了する共に、遷移前の画面へ"Up!"と"Down!"の文字列を渡すようにしています。遷移元画面で値を受け取るHomeScreenの_navigateAndDisplaySelectionを以下のように修正します。});}前述のようにNavigator.pushはFutureを返すのでthenでコールバックを登録することができます。resultにはNavigator.popで渡されたデータが渡ってきてコールバックが実行されます。ここではSnackBarでその文字列を表示しています。awaitで書くthenでコールバック登録するような記述は煩雑になりがちなので、以下のように書くことが多いです。Text('$result')));}Navigator.pushでFutureが生成されますが、awaitによってFutureがcompleteするまで処理が中断状態になります。前述のようにNavigator.popでデータが渡されると処理が再開し、resultにデータが代入され、そのデータでSnackBarを表示させるという流れになっています。Futuresが参考になるかと思います。最後に、AndroidとiOSでビルドすると以下のようになります。画面遷移で次画面へ値を渡すFlutter画面をタップして次画面へ遷移する時に値を渡す方法を紹介します。AndroidであればIntentでActivity間の値の受け渡しをすることができます。Flutterで画面遷移する時には、次画面にあたるWidgetのオブジェクトを生成します。このWidgetのコンストラクタで値を渡すことができます。以下に簡単な例を示します。「A」「B」「C」と書かれた3つのボタンを用意します。中央に受け取った値を表示するTextと元の画面へ戻るためのボタンを配置します。}}@requiredアノテーションで文字列textを必須としています。遷移先へ文字列を渡すFirstScreenを以下のように修正します。));}ボタンによって_navigateToNextへ渡す文字列を変えれば、DetailScreenで表示される文字列も変化します。これでAndroidとiOSでビルドすると以下のような感じになります。backを元にFlutterで画面遷移をどう書くか紹介します。Navigatorクラスアプリの「画面」にあたるものは、AndroidではActivityであり、iOSではViewControllerです。Flutterで画面にあたるものはrouteと呼ばれていて、NavigatorがRouteオブジェクトのスタックを管理します。Navigatorがスタックに対してRouteをプッシュしたり、ポップしたりすることで画面遷移を実現するというのが基本的な考え方です。最初の画面としてHomeScreenというクラスを用意します。画面の中央に”Next”と表示されたボタンが置いてあるだけです。}}次に遷移先のNextScreenです。こちらは”Back"と書かれたボタンが置かれているだけす。}}Navigator.pushで次の画面へ遷移HomeScreenのNextボタンを押した時にNavigator.pushメソッドを使ってNextScreenへ遷移させます。onPressedの処理にNavigator.pushを追加します。}}Navigator.pushはRouteオブジェクトをプッシュしてスタックに追加します。RouteオブジェクトとしてMaterialPageRouteを利用しました。Routeは遷移の見た目に関する情報も持っていますが、MaterialPageRouteはプラットフォームに応じた遷移アニメーションを行ってくれます。Navigator.popで元の画面へ遷移”Back"ボタンを押したら元の画面へ戻るようにします。Navigator.popメソッドで今のRouteオブジェクトをポップしてスタックから取り除きます。}}AndroidとiOSでビルドすると以下のような感じになります。01:36もっと読むコメントを書く2018-03-17Flutterでアプリを作ってみる(導入編)Flutter仕事では主にKotlinを使ってAndroidアプリ開発をしています。プライベートでもコードを書いたりするのですが、ふと思いついたアイデアを形にしたいと思い、アプリを作ったりすることがあります。動くものをiOSかAndroidで書くことはできるのですが、後々のことを考えるとiOS/Androidの両方を自分で書くのはツライよなあと思ったりもします。Nativeを試していました。ところがどうにもしっくりこず、いまいち進捗が芳しくありませんでした。いったところで最近よく話を聞くようになったFlutterを試してみることにしました。Flutterって?FlutterはDart言語によってiOS/Android両プラットフォームで動くアプリを書けるGoogleのフレームワークです。Nativeを試していた時に比べていくつか大きく心惹かれるポイントがありました。Studioという非常に高機能なIDEでの開発にどっぷりとつかってしまっています。StudioやIntelliJとそのプラグインで開発ができるというのはとても魅力に感じました。Nativeでは開発環境を整えるだけで一つのハードルがあり、プライベートのプログラミングではそういったことが開発モチベーションを削ぐ大きな要因になったりします。それを取り除けたことは大きかったです。私は静的型付け言語が好きです。基本的にはいつどこでどんなデータが扱われているのかが明確で、動的型付け言語よりもコードを読むのも書くのも楽だと感じています。見た目はJavaのようです。最近はKotlinを書くことが多いのでJavaに戻ってきてしまったような感覚でそこは若干あれな気分ですが、全然よいです。最近の盛り上がりFlutterでの開発事例や最近ベータ版をリリースしたというニュースもあり、注目が集まっています。アルファとしてリリースされてから多くの機能が追加され、まだ未成熟とはいえ今後も盛り上がっていく機運が感じられたのでトライしてみようと思いました。Studioでの導入を前提に書きます。インストールGitリポジトリからクローンしてきます。toolchainがないという結果がでました。これらはiOS実機にアプリをインストールする際に必要になりますが、今は無視します。Codeについてもなんか出てますが、使わないので無視します。デバイスが接続されてないとも出ていますが、これも今は関係ないので無視します。Studioのインストールインストールしましょう。エミュレーターを準備やってない人は準備しましょう。repositories...ボタンを押します。Flutterというプラグインがありますので、検索します。installボタンを押すと、Dartプラグインもインストールするかと聞かれるのでYesを選択します。Studioを再起動しましょう。Projectでプロジェクトを作成します。Studioの上部にこんなメニューがあると思います。左がインストール先のデバイスです。先程用意したエミュレーターを選択します。右のボタンが実行なのでこれを押すとビルドが始まり、無事にインストールされるとエミュレーターに以下のような画面が現れます。ホットリロードを試してみるFlutterの大きな特徴の一つにホットリロードというものがあります。これはコードを編集するとその変更が即アプリに反映されるというものです。再ビルド&再インストールをすることなくこれが実現されます。試しにコードを編集してその過程を見てみます。このように起動中のアプリに対して即座に変更が反映されます。まとめ以上、Flutterに関して簡単な説明と導入方法を書きました。今後は実際の開発方法を紹介していければと思います。NativeはJavaScriptでiOS/Androidアプリを開発するためのフレームワークです。Facebook社のJavaScriptライブラリであるReactを基礎としています。基本的にはJavaScriptで書くことができますので、ワンソースでiOSアプリとAndroidアプリを同時に開発できるのが大きな利点です。JavaScriptでマルチプラットフォームというと、WebViewアプリであったりハイブリッドアプリを思い浮かべたりしますが、ReactNativeではWebView上でアプリを動かすというわけではありません。JavaやSwiftで開発したものにかなり近いものを開発することができます(もちろん限界もありますが)。CLIを使った方法を紹介します。紹介するのはMac環境での手順となります。watchmanをインストール開発時のコード変更を監視するのに使います。コード修正を素早くデバッグ中のアプリに反映させたりするのに使います。react-native-cliどこでも使えるようにグローバルに置いときます。インストールはsudoが必要かもしれません。HogeProjectこのコマンドで以下のようなファイル郡が生成されます。package.json/androidと/iosディレクトリ内には各プラットフォーム用の雛形が作成されます。index.jsがReactのコードになります。node_modulesにはJavaScriptの依存パッケージが入っています。以下のコマンドを実行します。run-iosビルドが成功すると、このようにシミュレータが起動します。8をDLしてインストールします。9だとビルドできないので注意してください。Deviceもインストールします。詳細は要件はこちらを参照してください。SDKを利用するので以下の内容を$HOME/.bash_profileに書いておきます。$HOME/.bash_profileで設定を読み込んでください。起動リアル端末をMacに接続、あるいはエミュレーターを立ち上げた状態で(エミュレーターの詳細はこちらを見て下さい)、以下のコマンドを実行します。run-androidビルドに成功すると端末は以下のような画面になります。まとめ今回はreact-nativeコマンドでのプロジェクト作成とビルド方法を紹介しました。私も勉強中ですが、今後もその中で得られたことを紹介していければと思います。21:04もっと読むコメントを書く2014-10-12【Android】CursorLoaderのSQLに関してAndroidたとえば以下のようなCursorLoaderを継承したクラスを作った時に、CursorLoaderのコンストラクタの引数にどんな風にSQLを渡せばいいのかよくわかんなかったので調べました。}}これはローカルの端末のリソースから画像と動画を取り出すためのものですが、その中でも"アルバム"を取得しようとしている部分です。BY句を入れるということです。このままだとリソースの数分だけレコードが返ってしまう。アルバムだけ取得したいという感じです。問題点としては、CursorLoaderのコンストラクタを見てもらえればわかります。BYをどうやって挿入すればいいのかわからない。いうことで実際にどのようなSQLが発行されているのか見てみました。私が書いたようなGalleryLoaderでは以下のようなSQLが発行されていました。BYを挿入しようとすると、WHEREにうまいこと渡してやればよさそうです。これで期待通りの挙動になっています。18:08もっと読むコメントを書く2014-09-15Androidでmultipart/form-dataをPOST送信しながら、POSTの進捗をActivityに通知する。進捗表示を実装しましたので書いておきたい思います。やったこととしては、multipart/form-dataの形式に則ってデータを構築HttpUrlConnectionからOutputStreamを取得データをOutputStreamに流すどれだけ流しおえたかをActivityに通知する。前回のおさらいorg.apache.http.entity.mime.MultipartEntityBuilderでmultipart/form-data用のデータを作成。request)によってMultipartFormEntityをPOST。今回、データアップロード中の進捗を表示をするために問題だったのは、HttpClientがネットワークへのデータ書き出しの部分を隠蔽してしまっているのでそこをこちらでハンドリングするのが困難だという点でした。HttpClientを使うのはやめてHttpURLConnectionを使うようにします。実際、Volleyでデフォルトで使われているHurlStackではHttpURLConnectionを使っています。HttpURLConnectionを使うと大変なことMultipartEntityBuilderが使えません。multipart/form-data用のデータをHTTPの仕様に沿って自前で構築する必要があります。実際にどのような形式のデータを送る必要があるかはこちらを参考にして下さい。}続きは近いうちに書きます。6引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。