【 Flutter 】Flutter を 基礎 から 学習 ( スタートガイド編 ) part08 環境構築
「基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は スタートガイド編 ( part08 )です。
公式サイトに記載してあったインストールはだいたい完了しました。
【 Flutter 】Flutter を 基礎 から 学習 ( スタートガイド編 ) part07 環境構築
本書によるともう少し設定が残っているようです。
プラグインのインストール
Android StudioにFlutterとDartのプラグインをインストールします。
本書ではこの部分、2行しかありません。読み飛ばすところでした(笑
紙面の都合上仕方なかったのでしょうね。
Android Studioを起動します。
左ペインのPluginsをクリックし、中央ペインの検索欄にFlutterと入力します。
候補一覧からFlutterを選択し、Installをクリックします。
Acceptをクリックします。
あ、依存関係でDartも自動インストールされるんですね。Installをクリックします。
RestartIDEをクリックしてAndroid Studioを再起動します。
Restartをクリックします。
これでFlutterをDartのプラグインが有効になりました。
Installedのパネルで確認できます。
プロジェクトを作成
flutterの開発プロジェクト(my_app)を作成します。
プロジェクトの作成はFlutter SDKから行うようです。
具体的にはflutterコマンドを使用します。
プロジェクトを作成する位置でPowershellを起動します。
私はDドライブにflutter_projectsというフォルダを作成しflutterプロジェクトを作成することにしました。
実行すると必要なツールが自動ダウンロードされフォルダやファイルがたくさん生成されます。
PS D:\flutter_projects> flutter create my_app
Downloading package sky_engine... 1,073ms
Downloading flutter_patched_sdk tools... 955ms
Downloading flutter_patched_sdk_product tools... 490ms
Downloading windows-x64 tools... 3.1s
Downloading windows-x64/font-subset tools... 273ms
Creating project my_app...
my_app\lib\main.dart (created)
my_app\pubspec.yaml (created)
・・・・
my_app\winuwp\runner_uwp\CMakeSettings.json (created)
my_app\winuwp\runner_uwp\flutter_frameworkview.cpp (created)
my_app\winuwp\runner_uwp\main.cpp (created)
my_app\winuwp\runner_uwp\resources.pri (created)
my_app\winuwp\runner_uwp\Windows_TemporaryKey.pfx (created)
Running "flutter pub get" in my_app... 2,152ms
Wrote 155 files.
All done!
In order to run your application, type:
$ cd my_app
$ flutter run
Your application code is in my_app\lib\main.dart.
PS D:\flutter_projects>次にmy_appフォルダに移動してflutter doctorを実施します。
android のライセンスは事前にクリアしているので本書とは違い以上ありませんでした！
PS D:\flutter_projects\my_app> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel dev, 2.5.0-6.0.pre, on Microsoft Windows [Version 10.0.19043.1165], locale ja-JP)
[√] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[√] Chrome - develop for the web
[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.8.3)
[√] Android Studio (version 2020.3)
[√] VS Code (version 1.58.2)
[√] Connected device (4 available)
• No issues found!
PS D:\flutter_projects\my_app>
flutter run , Webアプリケーション
プロジェクトを作成した際、「flutter runを実行してみろ」
というアドバイスがあったのでついてでやってみます。
Windowsアプリケーションを実行するかWebアプリケーションで実行するか選択できるようです。
もうここですごいですよね！
今回はひとまずWebアプリケーションで実行します。3のChromeを選択します。
※私の端末にはChromeがインストールされています。
PS D:\flutter_projects\my_app> flutter run
Downloading Web SDK... 3.8s
Downloading windows-x64/windows-x64-flutter tools... 6.0s
Downloading windows-x64/flutter-cpp-client-wrapper tools... 187ms
Downloading windows-x64-profile/windows-x64-flutter tools... 4.9s
Downloading windows-x64-release/windows-x64-flutter tools... 5.8s
Downloading windows-x64-debug/windows-uwp-x64-flutter tools... 6.5s
Downloading windows-x64/flutter-cpp-client-wrapper tools... 19ms
Downloading windows-x64-profile/windows-uwp-x64-flutter tools... 5.2s
Downloading windows-x64-release/windows-uwp-x64-flutter tools... 4.8s
Multiple devices found:
Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.19043.1165]
Windows (UWP) (desktop) • winuwp • windows-uwp-x64 •
Chrome (web) • chrome • web-javascript • Google Chrome 92.0.4515.131
Edge (web) • edge • web-javascript • Microsoft Edge 92.0.902.78
[1]: Windows (windows)
[2]: Windows (UWP) (winuwp)
[3]: Chrome (chrome)
[4]: Edge (edge)
Please choose one (To quit, press "q/Q"): 3
Launching lib\main.dart on Chrome in debug mode...
Waiting for connection from debug service on Chrome... 30.3s
This app is linked to the debug service: ws://127.0.0.1:62922/2PGPfovogG0=/ws
Debug service listening on ws://127.0.0.1:62922/2PGPfovogG0=/ws
Running with sound null safety
To hot restart changes while running, press "r" or "R".
For a more detailed help message, press "h". To quit, press "q".
An Observatory debugger and profiler on Chrome is available at: http://127.0.0.1:62922/2PGPfovogG0=
Activating Dart DevTools... 10.3s
The Flutter DevTools debugger and profiler on Chrome is available at:
http://127.0.0.1:9100?uri=http://127.0.0.1:62922/2PGPfovogG0=Chromeブラウザにサンプル画面が表示されました！
Powershellはサーバを起動し、待機状態となります。
右下のプラスアイコンをクリックすると中央の値が変化します。
確認が終わったらブラウザを閉じます。
するとPowershellの対話が復帰しました。
Application finished.
PS D:\flutter_projects\my_app>flutter run , Windowsアプリケーション
調子よく進むので勢いでWidnowsアプリケーションも実行してみました。
flutter runを実行し1を入力します。
PS D:\flutter_projects\my_app> flutter run
Multiple devices found:
Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.19043.1165]
Windows (UWP) (desktop) • winuwp • windows-uwp-x64 •
Chrome (web) • chrome • web-javascript • Google Chrome 92.0.4515.159
Edge (web) • edge • web-javascript • Microsoft Edge 92.0.902.78
[1]: Windows (windows)
[2]: Windows (UWP) (winuwp)
[3]: Chrome (chrome)
[4]: Edge (edge)
Please choose one (To quit, press "q/Q"): 1
Launching lib\main.dart on Windows in debug mode...
Building Windows application...
Syncing files to device Windows... 195ms
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).
Running with sound null safety
An Observatory debugger and profiler on Windows is available at: http://127.0.0.1:56485/dxzdadFaxII=/
The Flutter DevTools debugger and profiler on Windows is available at:
http://127.0.0.1:9101?uri=http://127.0.0.1:56485/dxzdadFaxII=/今度はWindowsアプリケーションが起動しましたよ！
ん？でもPowershellのメッセージを見る限りではWindowsアプリケーション内のWebブラウザ部品にURL先のHTMLをレンダリングしているだけではないのでしょうか？？？
まだ詳しくわかっていないので推測程度にしておきます。
右下のプラスアイコンをクリックするとWebアプリケーション同様に中央の値が変化します。
確認が終わったらWindowsアプリケーションを閉じておきます。
次回はこのプロジェクトをAndoroid Studioで開くところからですね。
そこから本格的に実装の話題に入っていくようです。楽しみですね😊
Android Studioが無くてもサンプルを見る程度ならばFlutter SDKだけで良さそうですね。
今日はここまで！