この記事の対象者

この記事は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.
Code language: JavaScript (javascript)

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, ), ],
Code language: PHP (php)

これを、こうしてみます。

<meta charset="utf-8"> children: <Widget>[ Text( 'Hello! You have pushed the button this many times:', ), Text( '$_counter', style: Theme.of(context).textTheme.headline4, ), ],
Code language: HTML, XML (xml)

修正したらファイルを保存しましょう。すると画面が自動的にこうなるはずです。

テキストの前にHello!が入っていますね。このホットリロードでサクサク開発が進みます。

簡単ではありますがFlutterでのアプリプロジェクト作成の説明を終わります。最後までお読みいただきありがとうございました。

By user