Flutterはじめてみました
flutterの現場増えてきてるなぁなんて思いながら書いてます。
Flutter とは、スマートフォンのAndroidやiPhoneなどに向けて両方書き出してくれる開発ツールです。
Flutterは、Googleによって開発されたフリーかつオープンソースのUIのSDKである。単一のコードベースから、Android、iOS、Linux、macOS、Windows、Google Fuchsia向けのクロスプラットフォームアプリケーションを開発するために利用される。 ウィキペディア
初リリース日： 2017年5月
ライセンス： BSDライセンス
開発元： Googleとコミュニティ
情報元：ウィキペディア
Android 開発向け
Android Studio
https://developer.android.com/
Androidはまた時間がある時に書きますね。
重要: Apple Silicon Mac にインストールする場合は、いくつかの補助ツールで使用できる Rosetta 翻訳環境が必要です。これを手動でインストールするには、次を実行します。
sudo softwareupdate --install-rosetta --agree-to-license
Get the Flutter SDKについては、ダウンロードしておきましょう
Development にflutter のファイルを解凍します
以下は、ダウンロードして圧縮ファイルを解凍する方法は以下の通り
cd ~/Development
unzip ~/Downloads/flutter_macos_3.7.1-stable.zip
＊一度もしくはバージョンアップしたりもう一度解凍する時はこちら使ってください
cd ~/
export PATH="$PATH:`pwd`/Development/flutter/bin"
Update your path
パスを更新する
export PATH="$PATH:[PATH_OF_FLUTTER_GIT_DIRECTORY]/bin"
Flutter SDK を取得するに示すように、コマンド ラインで現在のセッションの PATH 変数を更新できます。おそらく、この変数を永続的に更新して、任意のターミナル セッションでフラッター コマンドを実行できるようにすることをお勧めします。
このパスの設定で、失敗する場合がありますこの辺りは環境によったりフォルダ階層などでうまくいかない場合があります。
Run flutter doctor
flutter doctorを実行します
次のコマンドを実行して、セットアップを完了するためにインストールする必要がある依存関係があるかどうかを確認します (詳細な出力を得るには、-v フラグを追加します)。
flutter doctor
これを実行するとflutterの環境が作成してくれます
今のところパソコンを立ち上げるたびにこちらを実行する必要がありそうですね
パスを更新し、フラッター ドクターを実行します。これにより、Flutter を使用するためにインストールする必要がある他の依存関係 (Android SDK など) があるかどうかがわかります。
アーカイブを使用しなかった場合、Flutter は必要な開発バイナリを必要に応じてダウンロードします。 (アーカイブを使用した場合は、ダウンロードに含まれています)これらの開発用バイナリを事前にダウンロードすることをお勧めします (たとえば、気密ビルド環境をセットアップする場合や、ネットワークが断続的にしか利用できない場合など)。これを行うには、次のコマンドを実行します。
flutter precache
追加のダウンロード オプションについては、フラッター ヘルプのプリキャッシュを参照してください。
警告: Flutter ツールは、Google サーバーからリソースをダウンロードする場合があります。 Flutter SDK をダウンロードまたは使用すると、Google 利用規約に同意したことになります。
PATHを確認する
echo $PATH
次を実行して、flutter コマンドが使用可能であることを確認します
which flutter
設定がされている場合は、実行されます
Platform setup
プラットフォームのセットアップ
macOS は、iOS、Android、macOS 自体、およびウェブ用の Flutter アプリの開発をサポートしています。最初の Flutter アプリをビルドして実行できるように、少なくとも 1 つのプラットフォーム セットアップ手順を今すぐ完了してください。
iOS setup
iOS セットアップ
Xcode をインストールする
iOS 用の Flutter アプリを開発するには、Xcode がインストールされた Mac が必要です。
Xcode の最新の安定バージョンをインストールします (Web ダウンロードまたは Mac App Store を使用)。
コマンド ラインから次のコマンドを実行して、新しくインストールされた Xcode のバージョンを使用するように Xcode コマンド ライン ツールを構成します。
以下のコマンドでXcodeのシミュレーションが起動します
sudo xcode-select --switch /Applications/[Xcode path]/Contents/Developer
sudo xcodebuild -runFirstLaunch
[Xcode path]は、通常はXcode.appですが
フォルダーに分けてたり場所が違う場合は、ここで指定してください
Xcode の最新バージョンを使用する場合、ほとんどの場合、これが正しいパスですが、別のバージョンを使用する必要がある場合は、代わりにそのパスを指定してください。
僕の場合は、Xcodeのフォルダに入れてるので以下のように指定してます
/Applications/Xcode/Xcode14.2/Contents/Developer
Xcode を 1回開いて確認するか、コマンド ラインから sudo xcodebuild -license を実行して、Xcode ライセンス契約が署名されていることを確認します。
Set up the iOS simulator
iOS シミュレーターをセットアップする
iOS シミュレーターで Flutter アプリを実行してテストする準備をするには、次の手順に従います。
Mac で、Spotlight を介して、または次のコマンドを使用して、シミュレーターを見つけます。
open -a Simulator
シミュレーターが 64 ビット デバイス (iPhone 5s 以降) を使用していることを確認します。シミュレーターの [Hardware] > [Device] または [File] > [Open Simulator] メニューで設定を表示して、デバイスを確認できます。
開発マシンの画面サイズによっては、シミュレートされた高画面密度の iOS デバイスが画面からはみ出す場合があります。シミュレーターの角をつかんでドラッグし、スケールを変更します。コンピューターの解像度が十分に高い場合は、[ウィンドウ] > [物理サイズ] または [ウィンドウ] > [ピクセル精度] オプションを使用することもできます。
Create and run a simple Flutter app
シンプルな Flutter アプリを作成して実行する
最初の Flutter アプリを作成してセットアップをテストするには、次の手順に従います。
コマンドラインから次のコマンドを実行して、新しい Flutter アプリを作成します。
Flutter のスターター アプリを含む my_app ディレクトリが作成されます。次のディレクトリを入力します。
flutter create my_app
シミュレーターでアプリを起動するには、シミュレーターが実行されていることを確認して、次のように入力します。
cd my_app
- sample_app OK
- my_app_flutter OK
- flutter_app NG
- FlutterApp NG
頭にFlutterがついているとエラーになるようですね
編集するたびに以下のコマンドはよく使います
flutter run
ちなみに自分は、以下をコマンドで実行できるようにしました
#!/usr/bin/bash
#プロンプトをechoを使って表示
echo -n INPUT_STR:
#入力を受付、その入力を「str」に代入
read my_app
#結果を表示
echo $my_app
#flutterで新規プロジェクト作成
flutter create $my_app
#新規プロジェクトのフォルダに移動（カレントディレクトリ）します
cd $my_app
自動でflutterの新規のアプリを作成できるようになります
sh createFlutterApp.sh
NG事例がありましたら報告していただけると助かります。
Deploy to iOS devices
iOS デバイスへの展開
Flutter アプリを物理的な iPhone または iPad にデプロイするには、Xcode と Apple 開発者アカウントで物理デバイスのデプロイを設定する必要があります。アプリで Flutter プラグインを使用している場合は、サードパーティの CocoaPods 依存関係マネージャーも必要になります。
接続された物理デバイスを iOS 開発に初めて使用するときは、Mac とそのデバイスの開発証明書の両方を信頼する必要があります。 iOS 16 以降では、開発者モードも有効にする必要があります。
iOS デバイスを Mac に初めて接続するときに、ダイアログ プロンプトで [信頼] を選択します。
次に、iOS デバイスの設定アプリに移動し、[一般] > [デバイス管理] を選択して、証明書を信頼します。初めてのユーザーの場合は、代わりに [一般] > [プロファイル] > [デバイス管理] を選択する必要がある場合があります。 iOS 16 以降では、設定アプリのトップ レベルに戻り、[プライバシーとセキュリティ] > [開発者モード] を選択して、[開発者モード] をオンに切り替えます。
アプリが iOS ネイティブ コードの Flutter プラグインに依存していない場合は、この手順を省略できます。次のコマンドを実行して、CocoaPods をインストールしてセットアップします。
注: Ruby のデフォルト バージョンでは、CocoaPods gem をインストールするために sudo が必要です。 Ruby バージョン マネージャーを使用している場合は、sudo なしで実行する必要がある場合があります。
sudo gem install cocoapods
Apple Silicon Mac にインストールする場合は、次のコマンドを実行します。
sudo gem uninstall ffi && sudo gem install ffi -- --enable-libffi-alloc
Follow the Xcode signing flow to provision your project:
Xcode 署名フローに従って、プロジェクトをプロビジョニングします。
Flutter プロジェクト ディレクトリからターミナル ウィンドウで open ios/Runner.xcworkspace を実行して、プロジェクトのデフォルトの Xcode ワークスペースを開きます。
実行ボタンの横にあるデバイス ドロップダウン メニューで、デプロイ先のデバイスを選択します。
左側のナビゲーション パネルで Runner プロジェクトを選択します。
ランナー ターゲット設定ページで、[署名と機能] > [チーム] で開発チームが選択されていることを確認します。
チームを選択すると、Xcode は開発証明書を作成してダウンロードし、デバイスをアカウントに登録し、プロビジョニング プロファイルを作成してダウンロードします (必要な場合)。
最初の iOS 開発プロジェクトを開始するには、Apple ID で Xcode にサインインする必要がある場合があります。
開発とテストは、すべての Apple ID でサポートされています。アプリを App Store に配布するには、Apple Developer Program に登録する必要があります。メンバーシップの種類の詳細については、メンバーシップの選択を参照してください。
Xcode で自動署名が失敗した場合は、プロジェクトの [一般] > [ID] > [バンドル識別子] の値が一意であることを確認してください。
flutter run を実行するか、Xcode の [実行] ボタンをクリックして、アプリを起動します。
Android setup
注: Flutter は、Android Studio のフル インストールに依存して、Android プラットフォームの依存関係を提供します。ただし、多くのエディターで Flutter アプリを作成できます。後のステップでそれについて説明します。
Install Android Studio
Android Studio をダウンロードしてインストールします。
Android Studio を起動し、「Android Studio セットアップ ウィザード」を実行します。これにより、最新の Android SDK、Android SDK Command-line Tools、および Android SDK Build-Tools がインストールされます。これらは、Android 向けの開発時に Flutter で必要になります。
flutter doctor を実行して、Flutter が Android Studio のインストールを見つけたことを確認します。 Flutter が見つからない場合は、flutter config --android-studio-dir を実行して、Android Studio がインストールされているディレクトリを設定します。
Android デバイスをセットアップする
Android デバイスで Flutter アプリを実行してテストする準備をするには、Android 4.1 (API レベル
16) 以降を実行する Android デバイスが必要です。
デバイスで開発者向けオプションと USB デバッグを有効にします。詳細な手順については、Android のドキュメントを参照してください。
Windows のみ: Google USB ドライバーをインストールします。
USB ケーブルを使用して、電話機をコンピュータに接続します。デバイスでプロンプトが表示されたら、コンピューターがデバイスにアクセスすることを承認します。
ターミナルで flutter devices コマンドを実行して、Flutter が接続されている Android デバイスを認識していることを確認します。デフォルトでは、Flutter は adb ツールのベースとなっているバージョンの Android SDK を使用します。 Flutter で Android SDK の別のインストールを使用する場合は、ANDROID_SDK_ROOT 環境変数をそのインストール ディレクトリに設定する必要があります。
Set up the Android emulator
Android エミュレーターをセットアップする
Android エミュレーターで Flutter アプリを実行してテストする準備をするには、次の手順に従います。
マシンで VM アクセラレーションを有効にします。
Android Studio を起動し、AVD Manager アイコンをクリックして、Create Virtual Device… を選択します。
古いバージョンの Android Studio では、代わりに Android Studio > Tools > Android > AVD Manager を起動し、Create Virtual Device… を選択する必要があります。 (Android サブメニューは、Android プロジェクト内でのみ表示されます。)
プロジェクトを開いていない場合は、[構成] > [AVD マネージャー] を選択し、[仮想デバイスの作成…] を選択できます。
デバイス定義を選択し、[次へ] を選択します。
エミュレートする Android バージョンのシステム イメージを 1 つ以上選択し、[次へ] を選択します。 x86 または x86_64 イメージをお勧めします。
[エミュレートされたパフォーマンス] で、[ハードウェア - GLES 2.0] を選択して、ハードウェア アクセラレーションを有効にします。
AVD 構成が正しいことを確認し、[完了] を選択します。
上記の手順の詳細については、AVD の管理を参照してください。
Android Virtual Device Manager で、ツールバーの [実行] をクリックします。エミュレータが起動し、選択した OS バージョンとデバイスのデフォルト キャンバスが表示されます。
Agree to Android Licenses
Android ライセンスに同意する
Flutter を使用する前に、Android SDK プラットフォームのライセンスに同意する必要があります。この手順は、上記のツールをインストールした後に実行する必要があります。
Java 8 のバージョンがインストールされていること、および JAVA_HOME 環境変数が JDK のフォルダーに設定されていることを確認してください。
Android Studio バージョン 2.2 以降には JDK が付属しているため、これは既に行われているはずです。
管理者特権のコンソール ウィンドウを開き、次のコマンドを実行してライセンスへの署名を開始します。
flutter doctor --android-licenses
同意する前に、各ライセンスの条件をよくお読みください。
ライセンスへの同意が完了したら、フラッター ドクターを再度実行して、Flutter を使用する準備ができていることを確認します。
macOS setup
Additional macOS requirements
macOS のセットアップ
追加の macOS 要件
macOS デスクトップ開発の場合、Flutter SDK に加えて次のものが必要です。
ｰ Xcode
ｰ プラグインを使用する場合は CocoaPods
### Web setup
ウェブ設定
Flutter は、Stable チャネルでの Web アプリケーションの構築をサポートしています。 Flutter 2 で作成されたアプリはすべて、ウェブ用に自動的にビルドされます。 Web が安定版になる前に作成されたアプリに Web サポートを追加するには、上記のセットアップが完了したら、Flutter を使用した Web アプリケーションの構築の手順に従ってください。
Set up an editor
エディターをセットアップする
Flutter のコマンドライン ツールと組み合わせた任意のテキスト エディターを使用して、Flutter でアプリを構築できます。ただし、さらに優れたエクスペリエンスを得るには、エディター プラグインのいずれかを使用することをお勧めします。これらのプラグインは、コード補完、構文の強調表示、ウィジェット編集支援、実行とデバッグのサポートなどを提供します。
次の手順を使用して、VS Code、Android Studio、IntelliJ、または Emacs 用のエディター プラグインを追加します。別のエディターを使用したい場合は、それで問題ありません。スキップして次のステップに進んでください: テスト ドライブ.
- Visual Studio Code
- Android Studio and IntelliJ
- Emacs
Visual Studio Code
Install VS Code
VSCodeをインストールする
VS Code は、完全な Flutter アプリの実行とデバッグをサポートする軽量エディターです。
VS Code、最新の安定版
Install the Flutter and Dart plugins
Flutter および Dart プラグインをインストールする
VS コードを起動します。
[表示] > [コマンド パレット…] を呼び出します。
「install」と入力し、「拡張機能: 拡張機能のインストール」を選択します。
拡張機能の検索フィールドに「flutter」と入力し、リストから [Flutter] を選択して、[インストール] をクリックします。これにより、必要な Dart プラグインもインストールされます。
Validate your setup with the Flutter Doctor
Flutter Doctor でセットアップを検証する
[表示] > [コマンド パレット…] を呼び出します。
「doctor」と入力し、Flutter: Run Flutter Doctor を選択します。
問題がないかどうか、[出力] ペインで出力を確認します。別の出力オプションのドロップダウンから Flutter を選択してください。
Android Studio and IntelliJ
Install Android Studio
Android Studio をインストールする
Android Studio は、Flutter の完全な統合 IDE エクスペリエンスを提供します。
Android Studio バージョン 2020.3.1 (Arctic Fox) 以降
または、IntelliJ を使用することもできます。
IntelliJ IDEA コミュニティ、バージョン 2021.2 以降
IntelliJ IDEA Ultimate、バージョン 2021.2 以降
Install the Flutter and Dart plugins
Flutter および Dart プラグインをインストールする
インストール手順はプラットフォームによって異なります。
Mac
Mac
macos の場合は、次の手順を使用します。
- Android Studio を起動します。
- プラグインの設定を開きます (v3.6.3.0 以降では [設定] > [プラグイン])。
- Flutter プラグインを選択し、[インストール] をクリックします。
- Dart プラグインをインストールするように求められたら、[はい] をクリックします。
- プロンプトが表示されたら、[再起動] をクリックします。
Linux or Windows
Linux または Windows
Linux または Windows では、次の手順を使用します。
- プラグインの設定を開きます (ファイル > 設定 > プラグイン)。
- Marketplace を選択し、Flutter プラグインを選択して、[インストール] をクリックします。
Emacs
Install Emacs
Emacs をインストールする
Emacs は、Flutter と Dart をサポートする軽量のエディターです。
Emacs、最新の安定バージョン
Install the lsp-dart package
lsp-dart パッケージをインストールする
パッケージのインストール方法と使用方法については、lsp-dart のドキュメントを参照してください。
Test drive
実機テスト
このページでは、テンプレートから新しい Flutter アプリを作成して実行し、アプリに変更を加えた後に「ホット リロード」を体験する方法について説明します。
Flutter アプリを作成、ビルド、実行するための開発ツールを選択します。
- Visual Studio Code
- Android Studio and IntelliJ
- Terminal & editor
Visual Studio Code
Create the app
新しいプロジェクト
- [表示] > [コマンド パレット] を呼び出します。
- 「flutter」と入力し、Flutter: New Project を選択します。
- アプリケーションを選択します。
- フォルダーの親ディレクトリを作成または選択します。
- my_app などのプロジェクト名を入力し、Enter キーを押します。
- プロジェクトの作成が完了し、main.dart ファイルが表示されるまで待ちます。
- 上記のコマンドは、マテリアル コンポーネントを使用する簡単なデモ アプリを含む my_app という名前のFlutter プロジェクト ディレクトリを作成します。
注: 新しい Flutter アプリを作成するとき、一部の Flutter IDE プラグインでは、com.example.
company domain name and project name は、アプリのリリース時に Android のパッケージ名 (iOS のバンドル ID) として使用されます。アプリがリリースされる可能性があると思われる場合は、パッケージ名を指定した方がよいでしょう。アプリのリリース後にパッケージ名を変更することはできないため、一意の名前にします。
警告: 最初の Flutter セットアップ中に VS Code が実行されていた場合、VS Code の Flutter プラグインが Flutter SDK を検出するために再起動が必要になる場合があります。
ヒント: アプリのコードは lib/main.dart にあります。各コード ブロックの機能の概要については、そのファイルの上部にあるコメントを参照してください。
Run the app
アプリを実行する
VS Code ステータス バー (ウィンドウの下部にある青いバー) を見つけます。
ステータスバー
[デバイス セレクタ] 領域からデバイスを選択します。詳細については、Flutter デバイスをすばやく切り替えるを参照してください。
使用できるデバイスがなく、デバイス シミュレーターを使用する場合は、[デバイスなし] をクリックし、[iOS シミュレーターの開始] をクリックしてシミュレーターを起動します。
警告: VS Code で [No Devices] をクリックすると、[Start iOS Simulator] オプションが表示されない場合があります。 Mac を使用している場合は、ターミナルで次のコマンドを実行してシミュレーターを起動する必要がある場合があります。
open -a simulator
＊ Windows または Linux では、iOS シミュレーターを起動できません。
実際のデバイスをセットアップするには、OS のインストール ページにあるデバイス固有の手順に従ってください。
[実行] > [デバッグの開始] を呼び出すか、F5 キーを押します。
アプリが起動するのを待ちます。進行状況は [デバッグ コンソール] ビューに表示されます。
アプリのビルドが完了すると、デバイスにスターター アプリが表示されます。
Try hot reload
ホットリロードを試す
Flutter は、ステートフル ホット リロードを使用して迅速な開発サイクルを提供します。これは、ライブ実行中のアプリのコードを再起動したり、アプリの状態を失ったりすることなくリロードする機能です。アプリのソースを変更し、IDE またはコマンドライン ツールにホット リロードすることを伝え、シミュレーター、エミュレーター、またはデバイスで変更を確認します。
lib/main.dart を開きます。
文字列を変更する
例
'You have [pushed] the button this many times'
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
'You have [clicked] the button this many times'
変更を保存します。[すべて保存] を呼び出すか、ホット リロードの稲妻アイコン をクリックします。
実行中のアプリに更新された文字列がすぐに表示されます。
Profile or release runs
プロファイルまたはリリースの実行
重要: デバッグとホット リロードを有効にしてアプリのパフォーマンスをテストしないでください。
ここまでは、アプリをデバッグ モードで実行してきました。デバッグ モードは、パフォーマンスと引き換えに、ホット リロードやステップ デバッグなどの便利な開発者向け機能を提供します。デバッグ モードでパフォーマンスが低下したり、アニメーションがぎくしゃくしたりするのは当然のことです。パフォーマンスの分析やアプリのリリースの準備が整ったら、Flutter の「プロファイル」または「リリース」ビルド モードを使用します。詳細については、Flutter のビルド モードを参照してください。
重要: アプリのパッケージ サイズが気になる場合は、アプリのサイズの測定をご覧ください。
Android Studio and IntelliJ
Create the app
アプリを作成する
- IDE を開き、[新しい Flutter プロジェクト] を選択します。
- Flutter を選択し、SDK の場所で Flutter SDK パスを確認します。次に、[次へ] をクリックします。
- プロジェクト名 (my_app など) を入力します。
- プロジェクト タイプとして [アプリケーション] を選択します。次に、[次へ] をクリックします。
- [完了] をクリックします。
- Android Studio がプロジェクトを作成するのを待ちます。
注: 新しい Flutter アプリを作成するとき、一部の Flutter IDE プラグインでは、com.example.
company domain name and project name は、アプリのリリース時に Android のパッケージ名 (iOS のバンドル ID) として使用されます。アプリがリリースされる可能性があると思われる場合は、パッケージ名を指定した方がよいでしょう。アプリのリリース後にパッケージ名を変更することはできないため、一意の名前にします。
上記のコマンドは、マテリアル コンポーネントを使用する簡単なデモ アプリを含む my_app という名前の Flutter プロジェクト ディレクトリを作成します。
ヒント: アプリのコードは lib/main.dart にあります。各コード ブロックの機能の概要については、そのファイルの上部にあるコメントを参照してください。
Run the app
アプリを実行する
- Android Studio のメイン ツールバーを見つけます。
メイン IntelliJ ツールバー - ターゲット セレクターで、アプリを実行する Android デバイスを選択します。使用可能なものがない場合は、[ツール] > [AVD マネージャー] を選択して作成します。詳細については、AVD の管理を参照してください。
- ツールバーの実行アイコンをクリックするか、メニュー項目の [実行] > [実行] を呼び出します。
アプリのビルドが完了すると、デバイスにスターター アプリが表示されます。
Try hot reload
ホットリロードを試す
Flutter は、ステートフル ホット リロードを使用して迅速な開発サイクルを提供します。これは、ライブ実行中のアプリのコードを再起動したり、アプリの状態を失ったりすることなくリロードする機能です。アプリのソースを変更し、IDE またはコマンドライン ツールにホット リロードすることを伝え、シミュレーター、エミュレーター、またはデバイスで変更を確認します。
- lib/main.dart を開きます。
- 文字列を変更する
例
'You have [pushed] the button this many times'
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
'You have [clicked] the button this many times'
重要: アプリを停止しないでください。アプリを実行します。
変更を保存します。[すべて保存] を呼び出すか、ホット リロードの稲妻アイコン をクリックします。
実行中のアプリに更新された文字列がすぐに表示されます。
Profile or release runs
プロファイルまたはリリースの実行
重要: デバッグとホット リロードを有効にしてアプリのパフォーマンスをテストしないでください。
ここまでは、アプリをデバッグ モードで実行してきました。デバッグ モードは、パフォーマンスと引き換えに、ホット リロードやステップ デバッグなどの便利な開発者向け機能を提供します。デバッグ モードでパフォーマンスが低下したり、アニメーションがぎくしゃくしたりするのは当然のことです。パフォーマンスの分析やアプリのリリースの準備が整ったら、Flutter の「プロファイル」または「リリース」ビルド モードを使用します。詳細については、Flutter のビルド モードを参照してください。
重要: アプリのパッケージ サイズが気になる場合は、アプリのサイズの測定をご覧ください。
Terminal & editor
Create the app
アプリを作成する
flutter create コマンドを使用して、新しいプロジェクトを作成します。
flutter create my_app
cd my_app
プロジェクト名、組織名などの他の引数を flutter create に渡すことも、ネイティブ プラットフォームに使用されるプログラミング言語を指定することもできます。
flutter create --project-name my_app --org dev.flutter --android-language java --ios-language objc my_app
cd my_app
このコマンドは、マテリアル コンポーネントを使用する簡単なデモアプリを含む my_app という名前の Flutter プロジェクト ディレクトリを作成します。
ヒント: アプリのコードは lib/main.dart にあります。各コード ブロックの機能の概要については、そのファイルの上部にあるコメントを参照してください。
Run the app
アプリを実行する
Android デバイスが実行されていることを確認します。何も表示されない場合は、お使いの OS のインストール ページにあるデバイス固有の手順に従ってください。
flutter devices
次のコマンドでアプリを実行します。
flutter run
アプリのビルドが完了すると、デバイスにスターター アプリが表示されます。
Try hot reload
ホットリロードを試す
Flutter は、ステートフル ホット リロードを使用して迅速な開発サイクルを提供します。これは、ライブ実行中のアプリのコードを再起動したり、アプリの状態を失ったりすることなくリロードする機能です。アプリのソースを変更し、IDE またはコマンドライン ツールにホット リロードすることを伝え、シミュレーター、エミュレーター、またはデバイスで変更を確認します。
- lib/main.dart を開きます。
- 文字列を変更する
例
'You have [pushed] the button this many times'
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
'You have [clicked] the button this many times'
重要: アプリを停止しないでください。アプリを実行します。
- 変更を保存します。
- ターミナル ウィンドウで r と入力します。
実行中のアプリに更新された文字列がすぐに表示されます。
Profile or release runs
プロファイルまたはリリースの実行
重要: デバッグとホット リロードを有効にしてアプリのパフォーマンスをテストしないでください。
ここまでは、アプリをデバッグ モードで実行してきました。デバッグ モードは、パフォーマンスと引き換えに、ホット リロードやステップ デバッグなどの便利な開発者向け機能を提供します。デバッグ モードでパフォーマンスが低下したり、アニメーションがぎくしゃくしたりするのは当然のことです。パフォーマンスの分析やアプリのリリースの準備が整ったら、Flutter の「プロファイル」または「リリース」ビルド モードを使用します。詳細については、Flutter のビルド モードを参照してください。
重要: アプリのパッケージ サイズが気になる場合は、アプリのサイズの測定をご覧ください。
まとめ
もともとiOS開発者だったためiOS側はスムーズにいけました。Androidの方は実践してないのでもし色々うまくいかない場合があるかもしれないです。まだまだ最初の導入として実行までできるといいですね。
申請については記載してないですが実践的に申請してみたいと思いますのでその時が来たらアップできたらいいかななんて思います。
今回購入したプログラミングの本
現場で使える Flutter開発入門 (Compass Booksシリーズ) 単行本（ソフトカバー） – 2021/8/24
澤 良弘、上村 隆弘、村岡 直人、多田 幸一 (著)
https://amzn.to/3HG5f2L
単行本（ソフトカバー）
定価 ￥3,993（本体¥3,630 + 税10%）
B2-13 プログラミング・開発
マルチプラットフォーム対応 最新フレームワーク Flutter 3入門 単行本（ソフトカバー） – 2022/11/22
掌田津耶乃 (著)
https://amzn.to/3I49dU6
単行本（ソフトカバー）
定価 ￥3,300（本体¥3,300 + 税10%）
安定の 秀和システムさん
制作
サンストライプ