この記事の対象者
この記事はFlutterでiOSとAndroid向けのアプリを構築したいという人を対象としています。
環境
この記事では以下を環境を前提としています。
- Flutter 2.2.3
- Dart 2.13.4
- M1, MacOS Big Sur
プロジェクト作成コマンド
下記のコマンドを実行することでiOS(Swift対応)とAndroid(Kotlin対応)のアプリが両方開発できるFlutterプロジェクトが作成されます。末尾のmy_flutter_app
の部分はプロジェクト名となりますので、適宜変更してください。この記事ではmy_flutter_appという名前でプロジェクトを作成していきます。
$ flutter create -i swift -a kotlin my_flutter_app
こんな感じの出力になったら成功です
...
...
...
my_flutter_app/ios/Runner.xcodeproj/project.pbxproj (created)
my_flutter_app/lib/main.dart (created)
my_flutter_app/.idea/runConfigurations/main_dart.xml (created)
my_flutter_app/.idea/libraries/Dart_SDK.xml (created)
my_flutter_app/.idea/libraries/KotlinJavaRuntime.xml (created)
my_flutter_app/.idea/modules.xml (created)
my_flutter_app/.idea/workspace.xml (created)
Running "flutter pub get" in my_flutter_app... 4.1s
Wrote 78 files.
All done!
In order to run your application, type:
$ cd my_flutter_app
$ flutter run
Your application code is in my_flutter_app/lib/main.dart.
VSCodeで開いてみる
VSCodeで開くとこんな感じになっています。

Flutter Extension
VScode用のFlutter Extensionがあるのでインストールしましょう。こちらです。
https://flutter.dev/docs/development/tools/vs-code

このExtensionを使うとVSCode上でのエミュレータ切り替え・起動することができるなど、Flutterアプリ開発の効率が上がります。
エミュレータ起動
早速ですがデフォルトプロジェクトの状態でエミュレータを起動してみましょう。
エミュレータ選択
VSCode右下にこんなのがあるかと思います。

黄色い枠で囲っているところが現在選択されているエミュレータになります。画面の状態だと、Androidですね。ここをクリックするとエミュレータのリストが表示されますのでお好きなものを選んでください。この記事ではこのままAndroidで進めていきます。
起動
VSCodeの左の矢印のようなアイコンをクリックしRun and Debug
というボタンをクリックしてください。するとリストが出てくるのでDart & Flutter
を選択してください。これでエミュレータが起動します。下の画面のようになったら成功です。

VSCode上にこんなウィジェットが表示されているかと思います。

赤いボタンでアプリを停止することができ、緑のボタンでリロードすることができます。Flutterはデフォルトでホットリロードが適用されるので、この緑ボタンのリロードはアプリを再起動する、というような意味合いで覚えてもらった方がいいかと思います。
修正してみる
ここでちょっとした修正をして、それが反映されるかやってみましょう。
lib/main.dart
を開いてみてください。Flutterの処理はここから始まります。
下記の部分のテキストを修正してみましょう。
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
これを、こうしてみます。
children: <Widget>[
Text(
'Hello! You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
修正したらファイルを保存しましょう。すると画面が自動的にこうなるはずです。

テキストの前にHello!
が入っていますね。このホットリロードでサクサク開発が進みます。
簡単ではありますがFlutterでのアプリプロジェクト作成の説明を終わります。最後までお読みいただきありがとうございました。