この記事ではコマンドラインからのFlutterビルド方法をご紹介します。

FlutterはIDE（統合開発環境）を使用してビルドする方法もありますが、コマンドラインからビルドする方法もあります。

今回はFlutterの環境がすでに準備されていることを前提に話を進めていきます！

なお、使用する環境は Windows11 Home 64bitになります。

Flutterとは

まずFlutterの概要について簡単に解説します。

FlutterはGoogleによって開発され、2018年にリリースされたクロスプラットフォームの開発フレームワークで主に「Dart」という言語が使用されていています。

iOS、Android、Web、Windows、Mac、Linuxの6つのプラットフォーム向けアプリケーション開発をサポートしています。

また、GoogleのNest HubなどにもFlutterが使われているそうです。

Flutterは1つのプログラミング言語と1つのコードベースで複数のプラットフォーム用アプリケーションを作成できるので、開発コストを短縮できることが大きなメリットです。

一方、ネイティブ開発と比較すると動作面で不安定なところがあったり、Flutterに対応したライブラリが少ないなどでデメリットも数多くあるのが現状です。

プロジェクトの作成方法

まずFlutterプロジェクトの作成から行います！

以下のコマンドで「sample」という名前のFlutterプロジェクトが作成できます。

flutter create sample

それでは実際に実行してみます。

C:\Flutter>flutter create sample
Creating project sample...
Resolving dependencies in sample... (1.5s)
Got dependencies in sample.
Wrote 129 files.

All done!
You can find general documentation for Flutter at: https://docs.flutter.dev/
Detailed API documentation is available at: https://api.flutter.dev/
If you prefer video documentation, consider: https://www.youtube.com/c/flutterdev

In order to run your application, type:

  $ cd sample
  $ flutter run

Your application code is in sample\lib\main.dart.

これでsampleという名前のFlutterプロジェクトが作成されました！

起動・ビルド

次にビルドしてみましょう！

C:\Flutter\sample>flutter build web
Compiling lib\main.dart for the web... 23.9s

以上になります。

Webアプリ (Chrome) 編

ビルドが終了したのでまずはwebアプリ（chrome）で起動してみます！

ちなみにwindows環境ではwindowsデスクトップアプリ、Androidシミュレータなど、

mac環境ではmacデスクトップアプリ、iOSシミュレータなどでも起動できます。

C:\Flutter>cd sample
C:\Flutter\sample>flutter run
Connected devices:
Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.22621.3235]
Chrome (web)      • chrome  • web-javascript • Google Chrome 122.0.6261.112
Edge (web)        • edge    • web-javascript • Microsoft Edge 122.0.2365.80
[1]: Windows (windows)
[2]: Chrome (chrome)
[3]: Edge (edge)
Please choose one (or "q" to quit): 2
Launching lib\main.dart on Chrome in debug mode...
Waiting for connection from debug service on Chrome...             20.4s
This app is linked to the debug service: ws://127.0.0.1:63195/OEM0jra7GIs=/ws
Debug service listening on ws://127.0.0.1:63195/OEM0jra7GIs=/ws

  To hot restart changes while running, press "r" or "R".
For a more detailed help message, press "h". To quit, press "q".

A Dart VM Service on Chrome is available at: http://127.0.0.1:63195/OEM0jra7GIs=
The Flutter DevTools debugger and profiler on Chrome is available at:
http://127.0.0.1:9100?uri=http://127.0.0.1:63195/OEM0jra7GIs=

実行結果

実行するとChromeが起動しwebブラウザでアプリが起動します！

ちなみに予め実行先をコマンドで指定することも可能です。

windowsデスクトップアプリ編

それでは実行オプションにwindowsを指定して起動してみます！

flutter run -d xxxxxx

上のコマンドのxxxxxxに実行時のデバイスを指定できます。

C:\Flutter\sample>flutter run -d windows
Launching lib\main.dart on Windows in debug mode...
Building Windows application...                                    21.8s
√  Built build\windows\x64\runner\Debug\sample.exe.
Syncing files to device Windows...                                  63ms

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).

A Dart VM Service on Windows is available at: http://127.0.0.1:63465/qDX5ja6b97Q=/
The Flutter DevTools debugger and profiler on Windows is available at:
http://127.0.0.1:9100?uri=http://127.0.0.1:63465/qDX5ja6b97Q=/

実行結果

実行するとWindowsデスクトップアプリが起動します！

まとめ

今回は以上になります。

Flutterには長所も短所もあり、まだまだ発展途上ですが

GoogleデバイスやiOS、Android向けアプリケーション開発に使われています。

今回はコマンドラインからのビルドのみでしたが、お好みでIDEや他の便利なツールを駆使してFlutterに触れてみてください！