この記事では、flutterアプリの設計パターンが載っている flutter_architecture_sample の紹介と、動かすときにハマったことを取り上げます。
今、flutterアプリを作成しているのですが、オレオレな設計でコードが煩雑化してきました。
そこで、flutter_architecture_sampleから行儀の良い設計を学ぼうと、動かしてみました。
flutter_architecture_sample
flutter_architecture_sample とは、以下のようなflutter製のTodoアプリを、いろいろなパターンで設計したコードが載っているリポジトリです。
MVC(Model, View, Controller)や、 子Widgetから親Widgetの状態へアクセスする手段 であるInheritedWidget、ScopedModel、BLoCなどのパターンが載っています。
また、Firebaseやreduxを用いた例もあり、非常に勉強になります。
flutter_architecture_sample の問題点
flutter_architecure_sampleは勉強になるのですが、さまざまなパターンが1つのパッケージとしてまとまっています。
通常のアプリケーションのディレクトリ構成とは若干異なっていて、ただgit cloneして実行するだけではエラーが出てしまいます。
また、自分の学びたいパターンに関連する本質的な部分が学び辛いです。
そこで、この問題を解決する flown というdartのパッケージを紹介します。
flown
flown とは、 flutter_architecture_sampleから 特定のパターンのみをcloneできる dart製のCLI(command line interface)ツールです。
また、そのパターンのコードが example の中ではなく、通常のアプリケーションと同様、 lib に入ります。
より本質的な部分をスッキリと見ることができ、特定のパターンを学びやすいです。
以下のコードをターミナルで打つことで、 vanilla_project というディレクトリに、 flutter_architecture_sample の example/vanilla の中身を lib にもつプロジェクトが作成されます。
$ 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 に以下を追記しました。
export PATH="$PATH":"$HOME/.pub-cache/bin"
bashrc 知らない方のためですが、 bashrcを書き換えた後は、 source ~/.bashrc で読み込むことで反映されます。
以上を行うことで、公式のドキュメントに書いてある以下のコマンドを実行でき、プロジェクトの作成ができるようになります。
$ flown --arch vanilla --name vanilla_project
Creating flutter project が長すぎて一向に作成されない
先程作成したプロジェクトをIntelliJで開こうとすると、「Creating flutter project」の画面のまま、一向に読み込まれないことがあります。
おそらく、ターミナルからdartを実行したのが原因だと考えられます。
そのようなことが置きた場合、 killall dart をターミナルで実行し、dartのプロセスを一度すべて止めてから行うとできるようになります。
このissueを参考にしました。
ちなみに、 既存のコードからプロジェクトを作成する場合、 Project from existing sources ではなく、 Create New Project を用いるのは落とし穴です。
読み込んだら
読み込んだら、pubspeck.ymlのパッケージをすべてgetしても、ローカルパッケージに関するエラーが出るのは気持ち悪いですが、アプリを実行することができます。
ローカルパッケージに関する The URI doesn't exists というエラーが出たのですが、 flutter upgradeして、IntelliJを再起動することで解決できました。
まとめ
flutterアプリの設計パターンが載っている flutter_architecture_sample と、そこから特定のパターンだけのプロジェクトを作成できる flown のインストール方法を紹介しました。
また、 creating flutter projectが終わらない時は、 killall dart をすることで解決されることを紹介しました。