2024.10.01
【勉強】ミドルウェア・アプリケーションのEOL・EOSLについて学んでみた
2024.04.16
開発環境・ツールFlutterをコマンドラインからビルドしてみた
この記事ではコマンドラインからのFlutterビルド方法をご紹介します。
FlutterはIDE(統合開発環境)を使用してビルドする方法もありますが、コマンドラインからビルドする方法もあります。
今回はFlutterの環境がすでに準備されていることを前提に話を進めていきます!
なお、使用する環境は Windows11 Home 64bitになります。
まず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)で起動してみます!
ちなみに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を指定して起動してみます!
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に触れてみてください!
【記事への感想募集中!】
記事への感想・ご意見がありましたら、ぜひフォームからご投稿ください!【テクノデジタルではエンジニア/デザイナーを積極採用中です!】
下記項目に1つでも当てはまる方は是非、詳細ページへ!Qangaroo(カンガルー)
【テクノデジタルのインフラサービス】
当社では、多数のサービスの開発実績を活かし、
アプリケーションのパフォーマンスを最大限に引き出すインフラ設計・構築を行います。
AWSなどへのクラウド移行、既存インフラの監視・運用保守も承りますので、ぜひご相談ください。
詳細は下記ページをご覧ください。
最近の記事
タグ検索