👋 Hello, Flutter
この章からついに Flutter の中身を実際に見ていきます。
Flutter は様々な機能が組み合わさって出来ているフレームワークです。開発者が Flutter を使う際に用いるのが Dart ですが、その裏では Dart 以外にも C++や C#など様々なプログラムが動いて Flutter のアプリ開発を支えています。それらを意識すること無く開発を進めることができるのも Flutter の魅力の１つです。
内部処理を全て理解しようとするとそれだけで本が書けてしまう程なので、まずはその内、アプリ開発を進める為に最低限押さえておくべきポイントだけ学んでいきましょう。
Flutter の基本的なコマンド
コマンドラインで flutter help と叩くと Flutter が用意してくれている様々なコマンドを確認することができます。
flutter help
Manage your Flutter app development.
Common commands:
flutter create <output directory>
Create a new Flutter project in the specified directory.
flutter run [options]
Run your Flutter application on an attached device or in an emulator.
Usage: flutter <command> [arguments]
Global options:
-h, --help Print this usage information.
-v, --verbose Noisy logging, including all shell commands executed.
If used with "--help", shows hidden options. If used with "flutter doctor", shows additional diagnostic information. (Use
"-vv" to force verbose logging in those cases.)
-d, --device-id Target device id or name (prefixes allowed).
--version Reports the version of this tool.
--suppress-analytics Suppress analytics reporting when this command runs.
Available commands:
Flutter SDK
bash-completion Output command line shell completion setup scripts.
channel List or switch Flutter channels.
config Configure Flutter settings.
doctor Show information about the installed tooling.
downgrade Downgrade Flutter to the last active version for the current channel.
precache Populate the Flutter tool's cache of binary artifacts.
upgrade Upgrade your copy of Flutter.
Project
analyze Analyze the project's Dart code.
assemble Assemble and build Flutter resources.
build Build an executable app or install bundle.
clean Delete the build/ and .dart_tool/ directories.
create Create a new Flutter project.
drive Run integration tests for the project on an attached device or emulator.
format Format one or more Dart files.
gen-l10n Generate localizations for the current project.
pub Commands for managing Flutter packages.
run Run your Flutter app on an attached device.
test Run Flutter unit tests for the current project.
Tools & Devices
attach Attach to a running app.
custom-devices List, reset, add and delete custom devices.
devices List all connected devices.
emulators List, launch and create emulators.
install Install a Flutter app on an attached device.
logs Show log output for running Flutter apps.
screenshot Take a screenshot from a connected device.
symbolize Symbolize a stack trace from an AOT-compiled Flutter app.
Run "flutter help <command>" for more information about a command.
Run "flutter help -v" for verbose help output, including less commonly used options.
この中から基本となるコマンドをいくつかご紹介します。
flutter create
Flutter プロジェクトを作成するコマンドです。コマンドの後に任意のプロジェクト名を指定することで、指定したプロジェクト名のディレクトリが作成されます。
$ flutter create [プロジェクト名]
flutter doctor
環境構築の章でも紹介した Flutter SDK、 Dart、Android Studio、Xcode など Flutter 開発で必要とされるツールの設定状況を確認する事が出来るコマンドです。
-vオプションを付けることでより詳細なログを表示することができます。
$ flutter doctor
$ flutter doctor -v #より詳細な情報を表示
flutter devices
Flutter アプリを起動する際に使えるデバイスを確認できるコマンドです。シミュレーターが起動していればシミュレーター、実機が繋がっていれば実機などが表示されます。
$ flutter devices
flutter pub add
アプリで使用するパッケージをインストールするコマンドです。次章で紹介するpubspec.yamlに依存関係を追加し、その上でインストールを行なってくれます。
$ flutter pub add [パッケージ名]
flutter run
アプリを起動するコマンドです。後述しますが-dオプションでデバイスを指定して起動することができます。
$ flutter run
$ flutter run -d [デバイスID] #デバイスを指定してアプリを起動
リフレッシュ、ホットリロード
flutter runを実行後、コマンドラインでは flutter のログが出力されます。
その状態で「r(小文字)→Enter キー」でリフレッシュ、「R(大文字)→Enter キー」でホットリロードをアプリにかけることができます。
リフレッシュは現在の画面の再読み込み、ホットリロードはアプリ全体の再読み込みです。この機能によりアプリを立ち上げ直すことなく素早く変更箇所を反映させることができます。Flutter の魅力の１つでもあります。
flutter build
アプリをコンパイルするコマンドです。コマンドの後にapk、ios、webなど指定することで.buildディレクトリを作成し、その中にコンパイルされたファイルを吐き出してくれる。
$ flutter build [プラットフォームを指定]
$ flutter build apk #Android用のapkファイルをビルド
$ flutter build ios #iOS用のファイルをビルド
サンプルアプリを起動しよう
1. Flutter プロジェクトを作成
では早速、以下のコマンドを叩いて Flutter プロジェクトを作成してみましょう
$ flutter create test_flutter
※ test_flutter は任意のプロジェクト名です。お好きな名前に書き換えてもらって OK です。-(ハイフン)は使えないので注意してください 👌
2. シミュレーターを設定＆起動する
iOS、Android、どちらのシミュレーターで開発するかに応じて以下を参考にシミュレーターを起動させてください。
ios
コマンドラインからシミュレーターを起動します
$ open -a Simulator
起動するデバイスは以下のように選択することができます
選択したシミュレータが起動します
android
Android Studio を起動し、トップページのVirtual Device Managerをクリックします
Create virtual deviceをクリックし、デバイスの新規作成に進みます
起動したいデバイスを選択
デバイスにインストールする API をダウンロードします
インストールが完了したら、Finishをクリックします
再度 API を選択し、次に進みます
設定を確認し、Finishをクリックします
作成したデバイスがリストに表示されるので再生ボタンをクリックして起動します
下記のようなシミュレータが起動すれば完了です 🙌
3. 起動するデバイスとデバイス ID の確認
前述したflutter devicesを使って、アプリ立ち上げに使用可能なデバイスのリストを確認しましょう。
$ flutter devices
下記のようにいくつか使用可能なデバイスが表示されます。上から Androdi のエミュレータ、iOS のシミュレータ、Mac のデスクトップ、Chrome のウェブブラウザが表示されています。
$ flutter devices
4 connected devices:
sdk gphone64 arm64 (mobile) • emulator-5554 • android-arm64 • Android 13 (API 33)(emulator)
iPhone 13 (mobile) • 7EDB54CF-D928-4E0C-A65E-F2AA602F3F18 • ios • com.apple.CoreSimulator.SimRuntime.iOS-15-5 (simulator)
macOS (desktop) • macos • darwin-arm64 • macOS 12.6 21G115 darwin-arm
Chrome (web) • chrome • web-javascript • Google Chrome 109.0.5414.119
各デバイスの最初の・の後がデバイス IDになります。上記の場合、デバイス ID は以下のようになります
・ emulator-5554
・ 7EDB54CF-D928-4E0C-A65E-F2AA602F3F18
・ macos
・ chrome
4. デバイスを指定して立ち上げ
flutter プロジェクトのルートディレクトリに移動し、下記コマンドで先ほど確認したデバイス ID を指定してアプリを立ち上げます
$ flutter run -d [デバイスID]
以下のような画面が表示されれば成功です 🎉
まとめ
これで Flutter 開発の準備は万端です！
次章からは作成されたサンプルアプリの中身を見ながら、開発する上で理解しておくべき重要な概念や実装を学んでいきましょう。