サーバサイドエンジニア4年目がFlutterやってみた

背景

バックエンドやフロントエンドの開発を日々しているなかで、
「アプリも作れたらかっこいいんじゃね？」
なんてふと思ったのがFlutterに手を出そうとした発端。

ゴール

Flutter Get startedをやってみて、感じたことを記載して、
「初心（ワクワク感）を忘れるべからず」が伝われば幸いです。

まとめ

純粋に、なにこれ、やばい（語彙力）。
導入までのスピードも早く、必要そうな設定も楽で、
言語仕様を覚えればサクサクに開発できそうな予感がする。

具体的には・・・

• Flutter SDKのインストールは楽で、Hello Worldをするまでに1時間程度で可能
  • SDKが1GB程度あるので、モバイルWi-Fiが食いつぶされたのもいい思い出
• flutter doctor で必要な初期設定を出してくれるのがありがたい
  • 多言語（例えばPHPなど）でmoduleが足りずランタイムエラーで、開発が止まってしまうこともしばしば
• VS Code利用で、デバイス起動やhot reloadしてくれる辺りは神
  • WordPressを利用したバックエンド・フロントエンド開発などでは、browser syncなどを利用してhot reloadを別で設定をする必要がありちょい手間
  • ドキュメント内には記載がなかったが、複数デバイスを同時hot reloadしてくれる方法があればご教示いただきたい

使用した各種バージョン

項目	version
OS	macOS Mojave 10.14.6
Flutter SDK	v1.12.13 for macos

---

Get Started

Install

Get the Flutter SDK

まずは、ドキュメント（Flutter）に沿って、Flutter SDKをインストール。
SDKを落として、コマンド叩いて

$ mkdir ~/development
$ cd ~/development
$ unzip ~/Downloads/flutter_macos_v1.12.13+hotfix.5-stable.zip

※ development directoryがなかったため、作成コマンドを追記

そして、pathを通す。

$ export PATH="$PATH:`pwd`/flutter/bin"

あとは、precacheコマンドで、toolを使用できるようにする。

$ flutter precache

Run flutter doctor

セットアップが正しくされているかどうかを確認

$ flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.12.13+hotfix.5, on Mac OS X 10.14.6 18G1012, locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[!] Xcode - develop for iOS and macOS (Xcode 11.3)
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install:
        sudo gem install cocoapods
[!] Android Studio (version 3.5)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.41.1)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

! Doctor found issues in 5 categories.

まぁ、色々issueがあるばい！って言われているが、
dart pluginや各IDEのプラグインが入ってないっぽいだけなので、後々ハマったら適宜入れていく方向で・・・

Update your path

再起動時にもflutter commandを利用できるように.zshrcにもPATHを記載。
zsh利用のため、.zshrcへ書き込みをしている。

$ echo "export PATH=\"\$PATH:`pwd`/flutter/bin\"" >> ~/.zshrc

ターミナルを再起動して、

$ which flutter

でパスが表示されればOK！

Add the following line and change [PATH_TO_FLUTTER_GIT_DIRECTORY] to be the path where you cloned Flutter’s git repo

とあるが、zipでlocalに持ってきた場合であっても、git repositoryに紐付いているため、
上記コマンドでPATHを通していれば、問題なさそう。

iOS setup

Install Xcode

Xcodeはインストール済みで、licenceも更新済みなので、飛ばし！
フロントエンド開発で、よくお世話になっておりますので！

Set up the iOS simulator

下記コマンドでシミュレーターを起動できる。

$ open -a Simulator

知らなかった・・・毎回、Xcode立ち上げて、シミュレーターを選択して・・・とかやっていた・・・

Create and run a simple Flutter app

そのまま流れでコマンドを打つと、~/development 配下にテンプレートができてしまうので、
適当なディレクトリを作成

$ mkdir ~/training-flutter
$ cd ~/training-flutter

あとは、ドキュメント通りにアプリケーションを作成して、実行してみる

$ flutter create my_app
$ cd my_app
$ flutter run

一発でdemo アプリケーションが起動した。すげぇ。。。
あと、各種コマンドでhot reloadやrestartができるようで、これはありがたい。

🔥 To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
An Observatory debugger and profiler on iPhone 11 Pro Max is available at: http://127.0.0.1:62239/cqCkL1QDHFQ=/
For a more detailed help message, press "h". To detach, press "d"; to quit, press "q".

Deploy to iOS devices

CocoaPodsを入れようということで、gemを利用してinstallして、pod setupで利用可能にする。

$ sudo gem install cocoapods
$ pod setup

※ CocoaPods（from wiki）

CocoaPodsは、Objective-C、Swift、およびRubyMotionなど、Objective-Cランタイムで実行される他の言語のアプリケーションレベルの依存関係マネージャーであり、外部ライブラリを管理するための標準形式を提供します。

pod setup でレスポンスが何も返ってこないのは、ちょっと怖い・・・
verboseオプションを利用しても、何も出てこない・・・

$ pod --verbose setup

この後は、下記コマンドでXcodeのワークスペース開いて、Apple IDの設定をすれば、OKとのこと。

$ open ios/Runner.xcworkspace

一旦、Apple IDを登録せずに進めてみる。デプロイするわけでもないので。。。

Android setup

Install Android Studio

終わってるのでスルー
こちらもフロントエンド開発で、よくお世話になっておりますので！

Set up your Android device

ごめんなさい、Android DeviceとMac OSをつなぐコードが無いんです。。。
Type-C to Thunderboltをください、誰か。。。

Set up the Android emulator

Android Studioを起動は、作成したappのandroid directoryを開けばOK

その後、下記でAVDのマネージャーを起動

Android Studio > Tools > Android > AVD Manager

適当に作成せよとかいてあるが、手元に
Galaxy Nexus API 22, Android 5.1, x86
のimageが存在していたため、そのまま流用します。

Android Studioからはやはり重いなぁ・・・

Web setup

現在、もりもり作っているみたいですね。めちゃくちゃ期待。

Warning: Flutter on the web is currently available as a technical preview. When trying Flutter apps on the web, you can expect to experience crashes and missing features.

---

Set up an editor

VSCodeをメインで利用しているため、VS Codeのセットアップを実施。
ExtensionsでFlutter入れて、初期設定完了。

Command + Shift + P でCommand Paletteを立ち上げて、Flutter: Run Flutter Doctor. を実行。
何やらかんやら、Doctorの結果で、自動でセットアップしてくれるので、超絶助かった。。。

---

Test drive

Create the app

プロジェクト自体は、「Create and run a simple Flutter app」あたりで作成したプロジェクトを利用。

Run the app

VS Codeの右下にデバイスが選べる箇所が表示され、デバイス選択が可能に・・・
え、やば。。。
その後、 /lib/main.dart を開いて、 F5 を押せば、アプリスタートできるようになる。

複数デバイスを同時に確認する方法が見当たらなかった・・・
iOSとAndroidを同時にHot Reloadさせるみたいな。

---

最後に

お前だれ？

バックエンドやフロントエンドの受託開発をメインで活動している @chara06ken です。
最近は、PHP（Laravel, WordPress）やJavascript（Vue, Vuex）を利用した、
業務システムやコーポレートサイトの開発がメインです。
開発のご依頼などは、TwitterでDMなどを飛ばしていただけますと幸いです。

感想

ここまで読んでいただき、誠にありがとうございます。
Flutterをとりあえず触ってみたい。って思いが強かったので、導入の部分のみとなりました。
web API通信をかませて認証やTODOリストの作成など、実装をメインにどこかでやります。。。多分。
あと、やりたいこととしては、layoutsの拡張やiOS/Androidごとのライブラリ導入方法、
非同期処理や、表示速度の計測（ベンチマーク周り）、ライフサイクルなどなど、、、