Edited at

Flutter for DesktopでWindowsアプリ開発環境を構築

6/13追記: Macでもほぼ同じ方法で実行出来ることを確認しましたので、bashでの方法も追記しました。


はじめに

Flutter for Desktopは、2019年5月7日のGoogle I/Oにて発表された内容になります。

公式にて、「開発初期段階だから警告なしに変わるかも」,「めんどくさいから頑張って」的なニュアンスの表現がありましたが、理解すると簡単だったので、今回はExampleのアプリを利用して、導入部分を紹介します。


Flutterとは

Flutter(フラッター)は、Googleによって開発されたフリーかつオープンソースのモバイルアプリケーションフレームワークである。FlutterはAndroidやiOS向けのアプリケーションの開発に利用されている。(Wikipedia)


早速やっていきます。


開発環境

今回はコマンドプロンプトのみで構築します。

Windows10 [10.0.17134.590]

Flutter (Channel stable v1.5.4-hotfix.2)

公式にはVisual Studio 201*が良いよと書いてあったので、必要な方はインストールしてください。

(SublimeText, Visual Studio Code等でも動きました)


手順

git clone https://github.com/flutter/flutter.git

公式からFlutter本体をとってきます。

※環境変数に<CloneDir>/flutter/binを追加するのもお忘れなく。

bash

export ENABLE_FLUTTER_DESKTOP=true

(~/.bash_profileに記入しておきましょう。)

powershell

$env:ENABLE_FLUTTER_DESKTOP="true"

CMD

set ENABLE_FLUTTER_DESKTOP=true

flutter

FlutterのDesktopモードを有効にし、flutterを実行します。

すると、いろいろダウンロードされるはず。しばらく時間がかかります。

git clone https://github.com/google/flutter-desktop-embedding.git

また、今回はExampleをCloneします。

cd flutter-desktop-embedding/example

flutter run

うまくいけば次のような画面が起動するはずです。(下部はCMD)

キャプチャ3.PNG

実行されたアプリケーションは、lib/main.dartを変更することでアプリの内容を変更できます。

また、--hotオプションを付けることで、ホットリロードや、ホットリスタートも簡単に実行できます(!!!)


いいなと思った点


  • クロスプラットフォーム開発がお手軽

  • UIがMaterialで整っている。

  • Dart言語はJS好きの筆者にはとっかかりやすい(JavaとCとかの中間的な印象)

  • ホットリロードで開発速度向上

  • Desktopについてはレスポンシブ対応

  • そしてある程度高速。

まだ、「いい案を考えている」とか、「警告なしに変えるかもよ」とか言っているFlutterですが、 日本語情報が少ないことと、拡張性さえ無視すれば十分有用、全然実用的な選択肢だと思います。


つまずいたところ



  • 一番最初に環境変数の設定をしておらず、androidのsdkなどがインストールされ、flutter doctorして!とか言われました。これが難解だった。


参考になるドキュメントたち

Flutter Desktop-shells Wiki

macOS/Linux,Powershell等での環境変数の設定方法

招待リンクの場所を忘れましたが、公式Discordもあります。質問などは推奨されてませんが、議論は活発に行われていますので、のぞいてみたらいいかもしれません。


記事の紹介

今回紹介したホットリロードをWeb開発の際に導入する