FlutterのHelloWorld実行までの流れ

こんにちは、lisです！

前回Flutterの環境構築を行いました。

www.lisz-works.com

今回はVSCodeでFlutterのHelloWorldを実行するまでの流れです！

VSCodeにFlutter拡張を入れる

VSCodeの拡張「Flutter」をインストールします。

https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

Flutterと調べれば1番最初に出てきます。

ひとまずこれだけ入れる。

プロジェクト作成

VSCodeのコマンドパレット*1から

「Flutter: New Project」→「Application」

ここからプロジェクトフォルダを置く場所→プロジェクト名の順に設定します。

1. フォルダー選択ダイアログが出るので、プロジェクトフォルダを置く場所を選択
2. プロジェクト名を入力

と設定することでプロジェクトが作成されます。

フォルダパスとしては

<1.プロジェクトフォルダを置く場所>\<2.プロジェクト名>

ちなみにプロジェクト名は、小文字でスネークケースがルールらしい(例: hello_world_project)。

実行！Hello Flutter！

Ctrl+@などでターミナルを開いて「flutter run」を実行。

使用するブラウザを聞かれるので「[2]: Chrome (chrome)」を選択します。

>flutter run
Multiple devices found:
Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.19044.1586]
Chrome (web)      • chrome  • web-javascript • Google Chrome 99.0.4844.74
Edge (web)        • edge    • web-javascript • Microsoft Edge 99.0.1150.36
[1]: Windows (windows)
[2]: Chrome (chrome)
[3]: Edge (edge)
Please choose one (To quit, press "q/Q"): 2

Chromeが勝手に開いてアプリが起動した！

右下の＋ボタンで数字がカウントアップする。

エミュレータで実行する

Android StudioのDevice Managerでエミュレータを事前に作成しておきます。

VSCode右下の「Windows (windows-x64)」と表示されているボタンをクリック。

実行環境が複数表示されるので、任意のエミュレータを選択。

この状態で改めてflutter runを実行。

暫く待たされたのちにAndroidエミュレータでアプリが実行された！

ターミナル内でのコマンド

flutter run実行後、こんな出力がターミナルに表示されている。

Flutter run key commands.
r Hot reload.
R Hot restart.
h List all available interactive commands.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).

先頭に書かれているキーを入力すると、その後に書かれたものが実行できます。

例えばタイトルを適当なものに変更して、「r」を押すとホットリロードしてくれます。

「r」を押したあとすぐに実行画面のタイトル変わりましたね？

「h」を押すとコマンド一覧が表示されます。こう見ると色々できるようです。

Flutter run key commands.
r Hot reload.
R Hot restart.
v Open Flutter DevTools.
s Save a screenshot to flutter.png.
w Dump widget hierarchy to the console.                                               (debugDumpApp)
t Dump rendering tree to the console.                                          (debugDumpRenderTree)
L Dump layer tree to the console.                                               (debugDumpLayerTree)
S Dump accessibility tree in traversal order.                                   (debugDumpSemantics)
U Dump accessibility tree in inverse hit test order.                            (debugDumpSemantics)
i Toggle widget inspector.                                  (WidgetsApp.showWidgetInspectorOverride)
p Toggle the display of construction lines.                                  (debugPaintSizeEnabled)
I Toggle oversized image inversion.                                     (debugInvertOversizedImages)
o Simulate different operating systems.                                      (defaultTargetPlatform)
b Toggle platform brightness (dark and light mode).                        (debugBrightnessOverride)
P Toggle performance overlay.                                    (WidgetsApp.showPerformanceOverlay)
a Toggle timeline events for all widget build methods.                    (debugProfileWidgetBuilds)
M Write SkSL shaders to a unique file in the project directory.
g Run source code generators.
h Repeat this help message.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).

F5キーで実行できるようにする

と、ここまでコマンドで実行する流れを書いてきましたが……面倒ですよね。

ということで「launch.json」を設定して、F5キーで実行できるようにするために下記を実施しましょう。

1. サイドパネルから「実行とデバッグ」を開く
2. 「launch.json ファイルを作成します」を押す

これでF5キーを押してデバッグ実行してみましょう。

しばらくすると実行されれます。

「エミュレータで実行する」の項目で記載したのと同様、VSCode右下で選択されているデバイスで実行されるので、エミュレータで実行したい場合などはそれに合わせて切り替えましょう。

参考

コチラを参考にしました。ありがとうございました！

docs.flutter.dev qiita.com qiita.com

あとがき

FlutterのHelloWorld実行までの流れでした！

www.lisz-works.com

*1:F1またはCtfl+Shift+P