[初心者向け] FlutterでiOS(Swift対応)とAndroid(Kotlin対応)のアプリプロジェクトを作成する方法

この記事の対象者

この記事は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でのアプリプロジェクト作成の説明を終わります。最後までお読みいただきありがとうございました。