逆引きFlutter

Flutterの学習がてら、bookmark-with-image（Electron + Vue.js）のFlutterへの移植に挑戦した。（ひとまずは一部分の機能のみであるが、移植版はbookmark_with_image_flutterに置いている。）この過程で学習した事項を以下に整理した。

Dartの基本を学ぶ

• Language tour
• Library tour
• Effective Dart：コーディングスタイルやドキュメンテーションなど

開発環境を構築する (Windows)

• zipファイルをダウンロードしてPATHを通せばOK。
  • 参考：Flutter Docs - Windows install
  • chocolateyのパッケージは残念ながらあまりメンテされていない。
• エディタはプラグラインが提供されているAndroid Studio, IntelliJ, VS Code, Emacsのいずれかを推奨とのこと。
  • 参考：Flutter Docs - Set up an editor

Windowsアプリ（Beta）をビルドする

• WindowsアプリはBetaとしてサポートされている。
• 以下の手順でWindowsアプリのビルドを有効化できる。
  • Flutterの設定でWIndowsを有効化する：flutter config --enable-windows-desktop
  • Visual Studio Community 2019をインストールする
  • 新規プロジェクト作成時にWindowsを有効化するオプションを指定する：flutter create --platforms=windows
  • 既存のプロジェクトにDesktopを有効化することもできる。
• ビルドしたアプリはMSIXインストーラーに固めることもができるが、手軽にzipファイルにで配布する方法も取れる。
  • 参考：Building your own zip file for Windows

画面（ページ）切り替えを実装する

• 以下のいずれかの方法で実現できる。
  • Navigate to a new screen and back
    • Navigator.push()/Navigator.pop()で遷移・戻るを実装する。
  • Navigate with named routes
    • MaterialAppのコンストラクタにてルーティング設定（initialRouteとroutes）を定義して、Navigator.pushNamed()でルートの名前指定で遷移する。

Widgetを跨いだ状態管理

• providerパッケージ (ChangeNotifier) を使う方法を第一候補とすべきとのこと。
  • List of state management approaches
  • Flutterの状態管理いろいろ比較

トーストの出し方

• SnackBarを使えばよい。

URLを開く

• url_launcherを使う。（参考）

  • flutter pub add した後のビルドで以下のエラーが出力されるが、管理者モードで起動したコマンドプロンプトでflutter runをすると以後は問題なくビルドできるようになった。（原因は深追いしていないが、#66973、#72762あたりが関係してそう）

    Exception: Building with plugins requires symlink support. Please enable Developer Mode in your system settings.
    

スクレイピング

• universal_htmlが安定していそう。
  • 参考
    • FlutterでWebスクレイピング(QiitaのマイページからLGTMの数を取得)
    • Flutterで基本的なスクレイピングをする方法

画像ファイルのダウンロード・保存

• 参考：Fetch data from Internet

ウィンドウ幅に応じた折り返し表示

• Wrapで囲んであげればよい。（参考）

一部分のみスクロールバーを表示する

• Expandedの子要素にSingleChildScrollViewを入れる。
  • WindowsだとScrollのthicknessを指定してもマウスオーバー時の影は細いままになる。（不具合かも。）
  • 参考：flutterで一部だけスクロールさせたい

Containerにクリックイベントを設定する

• InkWellもしくはGestureDetectorを使う。
  • 参考：Flutter: InkWell vs GestureDetector: what is the difference?

OSのコマンドを実行する

• Process.start() を使う。

SQLiteでデータを永続化する

• モバイル + MacOSではsqfliteが定番だが、Windows/Linuxではsqflite_common_ffiを使えとのこと。
  • API仕様はsqfliteとほぼ同じのようなのでドキュメントはここを見ればよさそう。
  • ドキュメントにはリリースモードでは手動でsqlite3.dllを入れる必要あり、との記載があるが、入れなくてもちゃんと動いた。
  • 参考：Persist data with SQLite