i++

プログラム系のメモ書きなど

Flutter : Flutter Desktop Embedding のデバッグ・ホットリロード(Windows)

increment.hatenablog.com

の続き。デバッグとホットリロードについて。基本的に Debugging Desktop Flutter Applications に書いてあることのメモ。


  • C++example\windows\flutter_embedder_example.cpparguments.push_back(argv[0]); の下に arguments.push_back("--observatory-port=49494"); を加える(49494 部分は適当な空いているポートであればなんでもいい)。
    • これで Observatory Port が 49494 に固定される。
    • プログラムを実行したときにコンソールに表示される flutter: Observatory listening on http://127.0.0.1:49494/ のような一文でポートは確認できる。
  • VS Codeexample\flutter_app ディレクトリを開く。
    • Flutter の Extension を入れてなければ入れて Reload する。
  • Debug パネルを開く(Ctrl + Shift + D)。
  • 左上の再生ボタンみたいなところから設定を追加する。
    • .vscode\launch.json ファイルができる。多分ファイルを直接作ってもよい。
  • リンク先の設定を configurations 内にコピペする。ポートは ↑ で設定した数字。
    • 「Property deviceId is not allowed.」という警告が launch.json ファイルに対して出るが、消したらデバッグできなくなるので無視する。
  • この(アプリが起動していて、VS Code で flutter_app ディレクトリを開き、launch.json を作った)状態で、VS Code 内で F5 を押すとアプリにアタッチされる。これで Flutter アプリのソースコード(lib/main.dart など)を編集すれば Hot Reload されて、VS Code で break point を設定すればそこに到達したときに止まる(incrementCounter で試した)
    • Hot Reload はあまり安定していない気がする?テキストの内容を変えてもボタン操作するまで反映されなかったり、いつまでたっても「Syncing files to device Flutter test device...」が終わらなくなったりした。後者の状態になると、VS Code から一度デバッグ終了や再接続などをしてもダメで、一度アプリの方も終了して起動し直す必要があった。

launch.json
{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Flutter Desktop Attach",
            "request": "attach",
            "deviceId": "flutter-tester",
            "observatoryUri": "http://127.0.0.1:49494/",
            "type": "dart"
        }
    ]
}

Flutter : Flutter Desktop Embedding Library を Windows で動かす

flutter-desktop-embeddingWindows 環境でのビルド・実行ができたので、そこまでのメモ。

f:id:tkyjhr:20190112170516p:plain

環境


flutter-desktop-embedding のクローン

とりあえず C 直下に(flutter 本体も同じく c 直下にある環境)。


GLFW Library のビルド

ここWindows に対する指示に従って library/windows/GLFW Library.vcxproj を VS2017 で開いてビルドする。 以下、そのときに発生したエラーとその対処方法。エラーメッセージが文字化けしていてよくわからなかったこともあって対処療法的。最終的には、いろいろ警告っぽいメッセージは残りつつビルド成功。

vcvars64.bat

vcvars64.bat が見つからない、vcvars64.bat はコマンドではない、のようなメッセージ。環境変数C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\VC\Auxiliary\Build を追加してから VS 2017 を再起動することで解消。

Windows SDK 8.1

(文字化けでよくわからなかったものの)8.1 という数字が見えたので、Visual Studio Installer を起動して「Visual Studio Community 2017」の「変更」を選んで Windows SDK 8.1 をインストール。


example のビルド・実行

example\windows\Example Embedder.sln を VS 2017 で開いて F5 実行。ボタンやキー入力は動く。SAVE / OPEN は動かず。plugins/file_chooserwindows ディレクトリがないのでファイル選択画面が未実装と思われる。


デバッグ方法や1からプロジェクトを作る方法については今後確認する(かもしれない)。

Android : No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android

少し古い Flutter のアプリをビルドしようとしたところ発生。build.gradle の

classpath 'com.android.tools.build:gradle:3.0.1'

となっていた箇所を 3.2.0 に変えたら、このエラーは解消したものの以下の別のエラーが出現。

* What went wrong:
A problem occurred evaluating project ':app'.
> Failed to apply plugin [id 'com.android.application']
   > Minimum supported Gradle version is 4.6. Current version is 4.1. If using the gradle wrapper, try editing the distributionUrl in <プロジェクトのディレクトリ>\android\gradle\wrapper\gradle-wrapper.properties to gradle-4.6-all.zip

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

* Get more help at https://help.gradle.org

BUILD FAILED in 1m 16s

Finished with error: Please review your Gradle project setup in the android/ folder.

指示に従い、gradle-wrapper.properties で gradle-4.6-all.zip を使うように修正したところ、ビルドが通るようになりました(いくつかの「registerResGeneratingTask is deprecated, use registerGeneratedResFolders(FileCollection)」というメッセージは残ったまま)。


参考:No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android · Issue #22031 · flutter/flutter · GitHub

flutter : Android で action_send (共有) intent を使う

share | Flutter Package を使います。

android_intent | Flutter Package を使って action パラメータに action_send を設定すればよいかと思ったのですが、上手くいきませんでした。詳しく調べていないので上手くやる方法はあるのかもしれません(多分ありそうです)。

Flutter : PullToRefresh の実装

flutter/overscroll_demo.dart at master · flutter/flutter · GitHub を参考にする。

要点は

  • RefreshIndicator を使う。
    • child に ListView.Builder を設定する。
    • onRefresh に、更新が終わったら complete する Future を返す関数を設定する。これが Pull したときに呼ばれる。
    • key に GlobalKey() を設定する。
      • Pull 以外の箇所(ボタン押しなど)で state の .currentState.show() を呼び出すと onRefresh に設定した関数が呼ばれる。

Dart : DateTime の parse/format

intl パッケージの DateFormat クラスを使う。

import 'package:intl/intl.dart';
// パース
var format = DateFormat('EEE, d MMM yyyy HH:mm:ss Z');
var date = format.parse('Tue, 18 Sep 2018 11:30:15 +0000');

Flutter : MissingPluginException(No implementation found for method close on channel flutter_webview_plugin)

Flutter で webview の plugin (flutter_webview_plugin) を使用し、hot reload が反映されて WebView を表示しようとしたところタイトルのエラーが発生(Androidエミューレーター上での実行)。

以下の記事によると「リビルド(クリーン)」したら直ったとのこと。一回実行を停止してから再開したら直りました。

MissingPluginException(No implementation found for method close on channel flutter_webview_plugin) · Issue #33 · fluttercommunity/flutter_webview_plugin · GitHub

他のパッケージを入れたときも似たようなエラーが発生したので、新しいパッケージを入れたときやパッケージを更新したときは再実行が必要な模様。