Flutterを使ったアプリを作ってみる – 基礎編

この記事への評価

以前から、スマフォアプリ作成のプラットフォームとしてクロスプラットフォームなものがいくつか登場してきていますが、PhoneGap、Cordovaに始まり、React Nativeなどと変遷し、今はGoogle提供のFlutterが熱いようです。といっても、Android/iOSのネイティブ環境での開発と比較して、痒いところに手が届かないといった理由などから、結局はJava / Swift / Objective-C / Unity(C#)で作成に戻るケースもあるようです。

とはいえ、個人で複数の言語を扱って、それぞれのネイティブ環境に合わせて学習するのは正直大変。ということで、今回、Flutterで実際に開発をしてみてどこまで行けるのかまとめてみることにしました。

 

今回開発で使用する環境

Flutterはマルチプラットフォームであるため、Windows, Linux, macOSで開発することが可能。また、Flutter2からはデスクトップアプリの作成も可能になったようで。今回は、macOS上で作成にチャレンジしています。シェルはbashを利用しています。

ウェブには1.x系の古い書き方の記事と、2.x系の新しい書き方の記事が混在しており、1.x系の書き方ではNGになりますので、学習する場合にはよく見極めてから取り組む必要があります。

開発環境の整備

Flutter SDKのインストール

まずは開発基盤であるFlutter本体をインストール。以下の手順でインストールします。

  1. SDK配布サイトを開き、開発するOSを選択(ChromeOSの選択肢があるのが面白い)
  2. Get the Flutter SDKにあるflutter_macos_2.5.1-stable.zipをクリックしてダウンロード。
  3. ZIPファイルを解凍すると、flutterというフォルダが出来る
  4. ユーザディレクトリにflutterdevというフォルダを作って、その中に3.を移動させる
  5. このフォルダに対してPATHを通す必要があるので、好きなテキストエディタを起動する
  6. 開くにて、不可視ファイルを表示にチェックを入れて、ユーザディレクトリ直下の.zshrcを開く
  7. 以下のような記述を追加して保存する。
  8. ターミナルを再起動して、which flutterでflutterコマンドの場所が表示されればOK

図:bashの場合はこのファイルにパスを通す

図:パスが無事に通った

Android Studioのセットアップ

開発基盤はインストールできましたが、開発用のIDEがまだ準備できていません。Android向けに作成するにせよしないにせよ、IDEとしてAndroid Studioがベターなので、インストールします。

  1. Android Studioをダウンロードする
  2. 途中、説明書きが出るので最後まで読んで、チェックを入れる。IntelもしくはApple Chipのどちらかを環境に合わせて選んでクリック。
  3. DMGファイルがダウンロードされるので、マウントする
  4. アプリケーションフォルダにAndroid Studioをつまんで入れればOK
  5. Android Studioを実行すると、初回のセットアップが始まります。Nextで進めて、Standardでインストールします。
  6. Finishをクリックして、ネットからモジュールをインストールが始まります。
  7. 本体が起動したら、Pluginsをクリックして、FlutterとDartを探し、インストールをします
  8. 一旦、Android Studioを終了して再起動する
  9. New Flutter Projectと表示されたら完了です。

図:プラグインのインストールも必要

,VSCodeと拡張機能

Android Studioは高機能ですが故に重たい。個別のdartファイルを編集するのであるならば、VSCodeをインストールして編集したほうが楽です。以下にVSCodeと関連する拡張機能の追加を行ってみます。

  1. VSCodeをダウンロードしてインストールしておく(Win, macOS, Linuxとクロスプラットフォームで用意されています)
  2. VSCodeを起動する
  3. 左のサイドバーを開き、拡張機能パネルを開く
  4. 検索窓からjapaneseをまず検索して日本語化の為の拡張機能(japanese language pack for visual studio code)をみつけ、installを実行する
  5. 続けて、flutter用の拡張機能として、flutterで検索し拡張機能をみつけ、installを実行する(VSCodeからAndroid Emulatorを起動出来るようになる)
  6. Dartも入れろとメッセージが出るので、Yesボタンを押します。(F5キーでデバッグが出来るようになる)

拡張機能の追加はこれで完了。

VSCode自身がターミナルを装備しており、この画面からデバッグ実行やビルドを行う事も可能です。事前に後述のAndroid EmulatorのセットアップでAVD Managerで作成しておく必要があります。

  1. 作成したプロジェクトのフォルダをVSCodeで開く
  2. 右下にNo Deviceが出てくる。クリックして、作成した仮想のAndroidを選択します。
  3. 選択するとエミュレータが起動します。
  4. ターミナルからflutter runを実行するとビルドが開始されて、apkがエミュレータに送られて起動するようになります。

図:拡張機能を追加中

図:エミュレータを起動してみた

実行環境のセットアップ

AndroidおよびiOS用にアプリを動かすためのテスト環境(エミュレータ等)をセットアップします。必要な環境だけをセットアップすれば良いでしょう。

Android Emulatorのセットアップ

まずは適当にFlutter Projectを新規作成し、エディタの画面まで進めます。エディタの画面の右上に「AVD Manager」というアイコンがあるのでここをクリックして進めます。

  1. Create Virtual Deviceをクリックする
  2. Pixelシリーズなどしか列挙されていませんが、自分のスマフォのサイズに合うものを作ってみます(例:Zenfone6)
  3. New Hardware Profileをクリックする
  4. 画面サイズとエミュレータで使うRAMサイズを指定して、Finishをクリック
  5. 4.で作ったプロファイルを選んで、Nextをクリック
  6. select a system imageの項目が出てくる。Zenfone6はAndroid11なので、Rを選んでDownloadをクリック
  7. Accept -> Nextをクリックし、エミュレータがダウンロードされるまで待ちます
  8. 終わったら、Finsh -> Nextで進む
  9. AVD Nameは適当につけて、GraphicはHardwareを選択します。
  10. Finishをクリックするとセットアップ完了。▶をクリックすると、エミュレータが起動します(qemuベースのようです)。

※尚、M1 Macの場合この集団が使えないので、こちらのサイトを参考にAndroid Emulatorをインストールする必要があります。

図:カスタムプロファイルを作ってる様子

図:エミュレータを起動してみた

iOS Simulatorのセットアップ

iOS用のアプリを構築するには、macOSで且つiOS Simulatorが無ければ作ることは出来ません。これらをセットアップし、使えるようにしておきます。

  1. Mac App StoreからXCodeをインストールしておく
  2. インストールが終わったら、ターミナルを開き、以下のコマンドを実行する。パスワード要求されるので入力する。
  3. 終了したら、ターミナルとXCodeを閉じる
  4. 既にiOS Simulatorも入ってるので、Spotlightやアプリ一覧から、Simulatorと検索すれば出てきます。
  5. Android Studioから起動する場合は、真ん中あたりにあるツールバーのメニューから「iPhone 11 (Mobile)」を選択して、実行ボタン(▶)を押すだけ。

開発環境の準備が完了したら、ターミナルからflutter doctorを実行して不備がないかチェックする機能が備わっています。不足してるものや、最新版であるかどうかなど色々チェックされます。flutter自身のアプデは、flutter upgradeで行います。

図:足りないセットアップを確認中

まずは作ってみる

FlutterはCordovaなどと違い、HTMLで記述したりするのではなくDart言語とウィジェットと呼ばれるパーツの組み合わせで画面をデザインし処理を実装します。よって、複雑な事を実装したいであったり、トリッキーな画面を装備したいとなるとそれは「KotlinやSwiftなどのネイティブ言語でやったほうが良い」という結論になります。

標準的且つ外部ライブラリで十分なGUIと処理を実現出来るプロジェクトならばFlutterで実装し、ゲームなどはネイティブか?Unityを使うことになるでしょう。

一番最初に大きな壁になるのは、やはり独特なUIの構築。Dart言語の習得よりもこれが一番苦労することになると思います。

プロジェクトを新規生成する

なにわともあれ、まずプロジェクトを新規生成しなければ始まりません。ターミナルから以下のコマンドで新規に作成します。どんな構造でファイルが生成されるかをまず学びます。今回は、calcmanというプロジェクトを生成してみました。

生成されたファイルを見てみるとなにやら沢山出来ています。この中でまずは、最初の一歩で編集するファイルは、libフォルダ内にあるmain.dartというファイルになります。ここに処理やウィジェットの追記を行っていきます。

図:プロジェクト生成中

図:生成されたファイル群

ファイルを編集する

lib/main.dartファイルをVS Codeなどで開いてみます。Android Studioで開く場合は、Open -> calcmanのフォルダを指定で開くだけ。VSCodeでもプロジェクトフォルダを開くと、エミュレータでデバッグが可能になります。

今回は公式サイトにあるコードでmain.dartファイルの中身を書き換えて保存しました。

図:個人的にはVSCodeのほうが楽

デバッグの実行

ターミナルを開いて、flutter runを実行するとビルドが始まりアプリが起動します。エミュレータセットアップしていない場合は、Chromeが起動してアプリが表示される仕組みです。なお、Flutterにはホットリロードという機能があり、起動後にCommand+Sキー(Ctrl+S)を実行すると、書き換えた内容が直ちに反映するという高速デバッグ機能が備わっています。

※VSCodeの場合は、デバッグ開始⇒実行後にrキーを押すとホットリロードされます(但し、読み込まれたクラスは再読み込みされないので、その場合はホットリスタートすると良い。↑⌘F5キーを実行。)

また、Node.jsのcosole.logのように変数の中身をトレースしたい場合には、debugPrint(変数名)にて、出力する事が可能で、内容はターミナル内やChromeのデベロッパーツールのconsole内にも表示されるようになります。

図:アプリを実行中

図:変数のデバッグ

外部パッケージの追加

Flutterアプリに機能を追加するにあたって、自前でゴリゴリ作るのも良いのですが、Node.jsのnpmのように簡単にライブラリを追加して簡単に使えるようにする機能がFlutterにも備わっています。追加手順は以下の通り

  1. Flutter Packagesのサイトを開く
  2. 使いたいパッケージを検索。今回は、Flutterでfont awesomeを使う為の「font_awesome_flutter」を探します。
  3. installingタブを開く
  4. ターミナルを開き、プロジェクトのフォルダのところまで移動しておく
  5. 「flutter pub add font_awesome_flutter」を実行する
  6. Node.jsで言う所のpackage.jsonにあたるpubspec.yamlファイルに、パッケージの記述が追加される(font_awesome_flutter: ^9.1.0という記述がdependenciesに追加されてる)
  7. main.dartファイル冒頭に、「import ‘package:font_awesome_flutter/font_awesome_flutter.dart’;」の記述を追加すると、そのプロジェクトファイルでパッケージが使えるようになる
  8. 以下のコードをbodyセクションの中に以下のような記述を追加する。アイコンギャラリーはこちらから検索可能。FontAwesomeIcons.androidで、指定のfontawesomeのアイコンを表示可能です。
  9. ターミナルからflutter runで起動してみる

図:アイコン表示に成功した

ステートフルウィジェットとボタンの追加

冒頭の公式サイトのサンプルコードではメイン画面の部品であるMyAppはStatelessWidgetとして記述されています。もう一つ、StatefulWidgetというものも存在します。この違いは、前者が静的なウィジェット、後者が動的なウィジェットでレンダリング後に自身の内容を変更できない/出来るの違いになります。通常はあまり静的な状態でアプリを作るというケースは少ないと思われるので、サンプルのコードをStatefulWidgetに変更し、ボタンを配置、関数を呼び出し反映するといったものに変えてみます。

  • Dartではvar hogeのように型推論の書き方も出来ますが、通常はString hogeのように型指定を行います
  • 型指定の場合、指定以外の値を入れることは出来ません。
  • class内に関数をvoidで用意した場合には、class内で定義した変数にそのままアクセス可能
  • 文字の結合の場合は数値は一旦.toStringで行わないと、+で結合は出来ない。
  • 親のStatefulWidgetから子のclassをcreateStateで呼び出し、Widget buildの内容返しています。
  • 今回のケースでは、ボタンをタップする毎にボタン内のテキストにタップした回数がカウントアップされていきます。
  • ボタンはElevatedButtonを利用(古い記事だとRaisedButtonになっていたりするが、現在は使えない)
  • Body以下に、テキスト表示のcontainerとrowを配置、rowの中にchildrenとしてボタンを配置しています。
  • 呼び出された関数内からclass内の変数を変更する場合は、setState()にて変更を行います。

図:ボタンクリックでカウントアップするアプリ

テーマやスタイルの適用

テキストなどに対して個別に色やフォントスタイル、またアプリ全体のテーマ設定でカラーリングの変更が出来ます。ダークテーマなどを簡単に実装できるようになってるのが今風です。

  • theme:ThemeDataにて、primarySwatchの色を指定するとアプリのテーマカラーを変更可能です。
  • 色の指定はこちらのColor Classから選ぶ事が可能
  • theme: ThemeData.dark()を指定するとダークモードになります。

図:紫をテーマカラーにしてみた

関連リンク

共有してみる:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。