Flutterに入門した

# Flutterに入門した

[Swiftの勉強会](https://nagoyaswiftplus.connpass.com/event/53948/)を開きながらまったくモバイルに関係なく機械学習ばっかりやっていたので、初心を取り戻すべく、せっかくだからAndroidとiOS両取りできるXamarinじゃなくてFlutterに入門しました。

## Flutter公式

* [Easy and fast SDK for beautiful apps - Flutter](https://flutter.io/)
* [Flutter - Dart API docs](https://docs.flutter.io/index.html)

"Alphaだから！"って書いてあるけれどドキュメントが充実しています。そろそろBetaに移行する模様。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">Flutter Beta &amp; the Hamilton App - DevShow at DartConf 2018 <a href="https://t.co/7UblV0WcLC">https://t.co/7UblV0WcLC</a> <a href="https://twitter.com/YouTube?ref_src=twsrc%5Etfw">@YouTube</a>さんから</p>&mdash; 龍一郎 (@K_Ryuichirou) <a href="https://twitter.com/K_Ryuichirou/status/967623366927503360?ref_src=twsrc%5Etfw">2018年2月25日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


## Hello, world

Flutter examplesの中に[Hello, world](https://github.com/flutter/flutter/blob/master/examples/hello_world/lib/main.dart)がそのままあるので引用します。

```dart
import 'package:flutter/widgets.dart';

void main() => runApp(const Center(child: const Text('Hello, world!', textDirection: TextDirection.ltr)));
```

言語は[Dart](https://www.dartlang.org/)で、UIに相当するものはWidgetしかないのが特徴。色々と使いたくなるようなパーツが揃っているのが利点とのこと。Reactっぽい？

IDEはAndroidStudioかVSCode。AndroidStudioでiOSアプリ開発をするのでXcodeに慣れていると辛いところも(辛かった)。

## 開発の様子

live codingしている様子が大変楽しそうで良いです。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">Let&#39;s live code in Flutter (DartConf 2018) <a href="https://t.co/UDNjM0qH3R">https://t.co/UDNjM0qH3R</a> <a href="https://twitter.com/YouTube?ref_src=twsrc%5Etfw">@YouTube</a>さんから</p>&mdash; 龍一郎 (@K_Ryuichirou) <a href="https://twitter.com/K_Ryuichirou/status/967634356503130113?ref_src=twsrc%5Etfw">2018年2月25日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

できあがったコードはこちら。

* [mjohnsullivan/nomnom: A Flutter app for seeing nearby restaurants](https://github.com/mjohnsullivan/nomnom)

## Sample

* [Flutter Architecture Samples](http://fluttersamples.com/)

* [flutter/examples at master · flutter/flutter](https://github.com/flutter/flutter/tree/master/examples)

## Tutorial

Firebaseを使ったチャットアプリがあるのがGoogleらしい感じ。完成品は[flutter/friendlychat-steps](https://github.com/flutter/friendlychat-steps)にあります。

* [Getting started with your first Flutter app - Flutter](https://flutter.io/getting-started/)

* [Building Beautiful UIs with Flutter](https://codelabs.developers.google.com/codelabs/flutter/#0)

* [Firebase for Flutter](https://codelabs.developers.google.com/codelabs/flutter-firebase/#0)

* [Building Layouts in Flutter - Flutter](https://flutter.io/tutorials/layout/)

* [Adding Interactivity to Your Flutter App - Flutter](https://flutter.io/tutorials/interactive/)

## 完成品

左がAndroidで右がiOSです。同じアカウントでログインしているからわかりにくいですが…。

<img width="851" alt="スクリーンショット 2018-02-25 00.22.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/41266/357a7a07-2464-3813-4e8f-c8a5df3559e1.png">

## ハマった点

Androidの開発とAndroidStudioに慣れていなかったので、妙な感じにハマりました。

### Android編

#### 1. `adb`コマンドが使えない

PATHを通していなかったのが原因。次の記事に従ってPATHを通しました。

* [MacにAndroid Studioを入れて、adbを使える状態にする - Qiita](https://qiita.com/hujuu/items/509fb234d29de10d6f1b)

#### 2. Androidのパッケージ名を変更するとアプリが立ち上がらない

Firebaseにアプリを登録するときに、`AndroidManifest.xml`を編集してAndroidアプリのパッケージ名を変更たところ、iOSでは動くのにAndroidではアプリが立ち上がらなくなってしまいました。

```AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.gokennya.firebasechat">
```

`MainActivity.java`を次のように変更することで動かせるようになりました。このあたりAndroidに慣れていない感が…。

```MainActivity.java
// before: package com.example.firebasechat; 
package com.gokennya.firebasechat; 
```

#### 3. インデント整形のコマンド

基本的には自動でコードを整形してくれるのですが、開発しているとインデントが狂ってしまうことがよくありました。再度、整形するためにはAndroidStudioでは`cmd + alt + L`でインデントが整えられました。

* [AndroidStudioでコード整形とimport整理を同時に行う - Qiita](https://qiita.com/ogapants/items/75cc105ee0054b2e6912)

### iOS編

#### 1. `info.plist`を編集すべきなのに`GoogleService-Info.plist`を編集した

Firebaseを使ったチャットアプリ製作中に、[Firebase for Flutter - 6. Sign users into your app](https://codelabs.developers.google.com/codelabs/flutter-firebase/index.html#5)で次の指示があり思いっきり`GoogleService-Info.plist`を編集しました。

<img width="783" alt="スクリーンショット 2018-02-25 14.14.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/41266/9762655d-dd10-05d7-e885-6c7d5e7c2556.png">

正解は`info.plist`を編集すべきなので思いっきり間違えました。

#### 2. `info.plist`を編集したのに反映されなかった

AndroidStudioで開発中に、上記の`info.plist`を編集するため、AndroidStudioを立ち上げたままXcodeを立ち上げて`info.plist`を編集して閉じたら変更が反映されませんでした。

理由はよくわかりませんが、AndroidStudioで編集すると無事反映されました。

#### 3. Firebase Analytics DebugViewの設定ができなかった

Firebase Analyticsではユーザーのデータをまとめてから送るため、最初にデータが届くまでに1h程度かかるようです。これはDebugViewを有効にすることで、即時にデータを送ることができます。

* [イベントのデバッグ  |  Firebase](https://firebase.google.com/docs/analytics/debugview)

Androidでは次のコマンドによりDebugViewが有効にできます。

```bash
adb shell setprop debug.firebase.analytics.app <package_name>
```

Xcodeではビルド時のコマンドライン引数で`-FIRDebugEnabled`を渡す必要があります。Xcodeへの設定はこの記事が詳しいです。

* [Firebase Analytics DebugView の設定の仕方 - Qiita](https://qiita.com/donuzium/items/cec53c07c2a69600fd90)

しかし、AndroidStudioで同様を行う方法については、多分できるんだと思うんですわかりませんでした。解決策として、`ios/Runner.xcworkspace`をXcodeで開き、同様の設定を行うと無事DebugViewの設定ができました。

### その他編

#### 1. `.gitignore`で`info.plist`をバージョン管理の対象から外せない

ありがちだとは思うんですが、一度gitの管理下においてしまった`info.plist`を`.gitignore`で指定してもバージョン管理の対象から外せなくて焦りました。正解はこう。

```
git rm --cached your/path/to/info.plist
```

* [あとからまとめて.gitignoreする方法 - Qiita](https://qiita.com/yuuAn/items/b1d1df2e810fd6b92574)

## Flutterに関する他の記事

* [Flutterおぼえがき - Qiita](https://qiita.com/gki/items/db9bac1e6eece826f564)

* [FlutterでDroidKaigi 2018のiOSアプリを作りました - Konifar's WIP](http://konifar.hatenablog.com/entry/2018/02/01/015601)

* [DroidKaigi2018で発表したFlutterアプリの話のスライド補足 - Konifar's WIP](http://konifar.hatenablog.com/entry/2018/02/11/081031)

<script async class="speakerdeck-embed" data-id="5f3b7ec657ed4a898774400b0033945c" data-ratio="1.33333333333333" src="//speakerdeck.com/assets/embed.js"></script>