flutter_architecture_sample を動かす

この記事では、flutterアプリの設計パターンが載っている [flutter_architecture_sample](https://github.com/brianegan/flutter_architecture_samples) の紹介と、動かすときにハマったことを取り上げます。

今、flutterアプリを作成しているのですが、オレオレな設計でコードが煩雑化してきました。
そこで、flutter_architecture_sampleから行儀の良い設計を学ぼうと、動かしてみました。


## flutter_architecture_sample

[flutter_architecture_sample](https://github.com/brianegan/flutter_architecture_samples) とは、以下のようなflutter製のTodoアプリを、いろいろなパターンで設計したコードが載っているリポジトリです。

<img src="https://qiita-image-store.s3.amazonaws.com/0/154068/721c5a47-d5fd-2bd3-e46f-9e751567d457.png" width=40%>

MVC(Model, View, Controller)や、 **子Widgetから親Widgetの状態へアクセスする手段** であるInheritedWidget、ScopedModel、BLoCなどのパターンが載っています。
また、Firebaseやreduxを用いた例もあり、非常に勉強になります。


## flutter_architecture_sample の問題点

flutter_architecure_sampleは勉強になるのですが、さまざまなパターンが1つのパッケージとしてまとまっています。
通常のアプリケーションのディレクトリ構成とは若干異なっていて、ただgit cloneして実行するだけではエラーが出てしまいます。
また、自分の学びたいパターンに関連する本質的な部分が学び辛いです。

そこで、この問題を解決する `flown` というdartのパッケージを紹介します。


## flown

[flown](https://pub.dartlang.org/packages/flown) とは、 flutter_architecture_sampleから **特定のパターンのみをcloneできる** dart製のCLI(command line interface)ツールです。

また、そのパターンのコードが `example` の中ではなく、通常のアプリケーションと同様、 `lib` に入ります。
より本質的な部分をスッキリと見ることができ、特定のパターンを学びやすいです。

以下のコードをターミナルで打つことで、 `vanilla_project` というディレクトリに、 flutter_architecture_sample の `example/vanilla` の中身を `lib` にもつプロジェクトが作成されます。

```termina/
$ flown --arch vanilla --name vanilla_project
```


## flown のインストール

この章では `flown` のインストール方法を書きます。

まず、 dart のパッケージをインストールし、 ターミナルで動かすには `pub` と `dart` の実行ファイルのパスを通す必要があります。
flutterで初めてdartに触る方は、パスが通ってないと思います。

pubとはdartのパッケージを管理するためのものです。pythonでいうpipのようなものだと認識しています。
このpubを通して、 `flown` をインストールします。

実行ファイルは flutter SDK の `dart-sdk` の中にあります。
好きな方法でパスを通せますが、私は `/usr/local/bin` にシンボリックリンクを貼りました。

```
$ ln -s $FLUTTER_ROOT/bin/cache/dart-sdk/bin/pub /usr/local/bin/pub
$ ln -s $FLUTTER_ROOT/bin/cache/dart-sdk/bin/dart /usr/local/bin/dart
```

次に、 pubで `flown` をインストールします。
以下のコマンドを実行します。

```
$ pub global activate flown
```

これでインストールされたので、次に `flown` をターミナルから実行できるよう、pubでインストールしたpackageがある場所にパスを通します。
今回は、 `.bashrc` に以下を追記しました。

```~/.bashrc
export PATH="$PATH":"$HOME/.pub-cache/bin"
```

bashrc 知らない方のためですが、 bashrcを書き換えた後は、 `source ~/.bashrc` で読み込むことで反映されます。

以上を行うことで、公式のドキュメントに書いてある以下のコマンドを実行でき、プロジェクトの作成ができるようになります。

```terminal
$ flown --arch vanilla --name vanilla_project
```

## Creating flutter project が長すぎて一向に作成されない

先程作成したプロジェクトをIntelliJで開こうとすると、「Creating flutter project」の画面のまま、一向に読み込まれないことがあります。
おそらく、ターミナルからdartを実行したのが原因だと考えられます。

そのようなことが置きた場合、 `killall dart` をターミナルで実行し、dartのプロセスを一度すべて止めてから行うとできるようになります。
[このissue](https://github.com/flutter/flutter-intellij/issues/1855)を参考にしました。

ちなみに、 既存のコードからプロジェクトを作成する場合、 Project from existing sources ではなく、 [Create New Project](https://flutter.io/docs/development/tools/android-studio#creating-a-new-project-from-existing-source-code) を用いるのは落とし穴です。

## 読み込んだら

読み込んだら、pubspeck.ymlのパッケージをすべてgetして~~も、ローカルパッケージに関するエラーが出るのは気持ち悪いですが~~、アプリを実行することができます。

ローカルパッケージに関する **The URI doesn't exists** というエラーが出たのですが、 flutter upgradeして、IntelliJを再起動することで解決できました。

## まとめ

flutterアプリの設計パターンが載っている [flutter_architecture_sample](https://github.com/brianegan/flutter_architecture_samples) と、そこから特定のパターンだけのプロジェクトを作成できる `flown` のインストール方法を紹介しました。

また、 creating flutter projectが終わらない時は、 `killall dart` をすることで解決されることを紹介しました。