今週は仕事の追い上げで色々バタバタしてましたが、技術への探求は欠かさずやってます。

今回は仕事でこりゃ便利だってなったFlutterに入門してみようかなと思います。

まずなぜ便利かというと、マルチプラットフォームだということですね。

Webアプリにもできるし各OS用のアプリにもできてスマホアプリにも出力できる。

しかも最近はバージョンが上がってより良くなっているとのこと。

Flutterは現在バージョン2.2になりましたが、もう今から触るなら2から触るべきですね。

ってことでとりあえず公式からインストールしていきましょう。

大体の人はMacかLinux環境でやってそうなのであえてWindowsでやっていきます。

Flutter2をインストール

Flutterはインストーラーではないので注意しましょう。

まずは公式サイトにアクセスします。

https://flutter.dev/docs/get-started/install

ここから自分の環境にあったものを選んでダウロードします。

今回はWindowsでやっているので私はWindowsを選択しました。

Windowsの良いところはインストーラーでぽちぽちするだけでインストールできるのですが Flutterは先程も言ったようにインストーラーはなく、 インストーラーが終わった後のファイルがそのまま上がっているような感じです。

つまるところそれを落としてきて任意のディレクトリに保存して、 実行ファイルのパスを環境変数に貼り付けて動かすって感じですね。

gitの扱いに慣れてる人はcloneするコマンドもあるので公式を閲覧してください。

Program Filesとかには保存しないでできる限りドライブの浅い場所に入れておくのがオススメです。

私はDドライブの直下に「flutter」というディレクトリを作ってそこに保存しました。

Cドライブしかない人はそこでも大丈夫だと思います。

環境変数に実行ファイルがあるパスを指定

次にファイルをダウンロードし終わって指定の場所にいれたら 次はWindowsの環境変数に実行ファイルのパスを入力します。

これは別にしなくてもいいですが、毎回ディレクトリのパスを指定しないといけないのは 至極面倒なのでflutterコマンドとして使えるように設定します。

今回Dドライブの直下に保存したということは実行ファイルは以下のようなパスになります。

D:\flutter\bin\

Windowsの環境変数を設定するところは

「Windowsキー+R」→「ファイル名を指定して実行」

のウィンドウが出てきたら

rundll32 sysdm.cpl,EditEnvironmentVariables

以上のコードを打ち込むと一発で環境変数のウィンドウが出現します。

ただ、このやり方だと自分のユーザー名に対する設定しかできないので 素直に普通に開いていきましょう。

もちろんコマンドで管理者権限を付与できる人ならそれでいいと思います。

今回試してみたコマンドは

「Windowsキー＋Pause/Breakキー」

これを押すとシステム詳細画面が開くので そこの右側から「システム詳細設定」を開き、 でてきたウィンドウの「環境変数」を開くとシステム環境変数の編集が可能になります。

環境変数ウィンドウを開くと、上と下で入力するところが分かれていますが、 基本は下の方のシステム環境変数となっているところの「Path」に入れていきます。

Pathのところにカーソルを合わせて編集を押すかダブルクリックをすると、 編集画面が開くので今回は「新規」をクリックして入力状態になるので 先程のFlutterのパスを入れてあげましょう。

D:\flutter\bin\

上のパスは環境に応じて変わるのでコピペじゃなくてちゃんと自分の保存した場所のパスにしましょう。

OKを押すと設定が完了です。

Flutterが認識してるかチェック

環境変数が設定されると「flutter」コマンドがパス無しで使えるようになります。

設定前にVSCodeやPowerShell、コマンドプロンプトが開いていたらすべて閉じましょう。

再び開くとFlutterコマンドが使えるようになっています。

Shellで以下のコマンドを打ち込んでみてください。

flutter --version

このコマンドで以下のようなログが出ればインストール完了です。

PS > flutter --version
Flutter 2.2.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision b22742018b (7 days ago) • 2021-05-14 19:12:57 -0700
Engine • revision a9d88a4d18
Tools • Dart 2.13.0

とりあえずHello WorldのWindowsアプリ版

Windowsアプリとして作っていくにはちょっと準備が必要になります。

Flutterからはちょっと外れるので、 以下の方の記事がわかりやすかったので参考にさせていただきました。

https://qiita.com/br_branch/items/746ba34cc2d5780ee8db

私はすでにC++で開発してたのもあり特に入れるに必要はなかったです。

入れてない人は上記のURLを参考にして入れてみましょう。

デスクトップアプリの準備

まずセットアップをしていきます。

flutter config --enable-windows-desktop

Setting "enable-windows-desktop" value to "true".
You may need to restart any open editors for them to read new settings.

これでウィンドウズデスクトップアプリの準備を整えられました。

windowsの部分をmacosやlinuxに変えることもできますが、 今回はWindowsなのでこれでいきました。

次にWindowsUWPの設定をします。 これは必要あるのかどうかはわかりません。

UWPはWindowsの新しいOSらしいです。

WinodwsPhoneで使われてたOSの次世代版ってやつでしょうか。

正直Winodwsのモバイル展開はもう誰が望んでいるのかわからないのですが、 とりあえずサンプルに習って進めていきます。

以下のコマンドを順に打ち込みましょう。

flutter channel dev
flutter upgrade
flutter config --enable-windows-uwp-desktop
flutter devices

最後に実装したflutter devices で色々ダウンロードされた後 使用できるデバイス一覧が出てきます。

私はこんな感じになりました。

Windows (desktop)       • windows • windows-x64     • Microsoft Windows [Version 10.0.19042.985]
Windows (UWP) (desktop) • winuwp  • windows-uwp-x64 •
Chrome (web)            • chrome  • web-javascript  • Google Chrome 90.0.4430.212
Edge (web)              • edge    • web-javascript  • Microsoft Edge 90.0.818.66

やっていくのは結局

「Windows (desktop)」

これになりますね。

気が変わったらWindowsをやめてブラウザアプリにしてしまうのもありです。

プロジェクトを作ってみる

任意のディレクトリに移動してから

flutter create helloworld

createコマンドを打つと自動的にプロジェクトが作成されます。

次にディレクトリの中に入って起動してみます。

cd helloworld
flutter run

Windowsアプリにするためのダウンロードが始まって少し時間がかかります。

途中で

[1]: Windows (windows)
[2]: Windows (UWP) (winuwp)
[3]: Chrome (chrome)
[4]: Edge (edge)

という選択肢がでるのでとりあえず1を選びましょう。

ビルドが終わってアプリケーションが立ち上がったら完了です！

右下に＋のボタンがあるので押してカウントされていったら無事動いています。

これでFlutterの入門は完了です！

次はなんかアプリケーションを組んでいきましょう。

それでは。