Flutterでpackageを作ったら、少しレベルアップした(気がする)

# はじめに

最近flutterが面白くてハマっています。ただ、まだかなり発展段階の言語なので、何か貢献出来ないかと思い、packageを作ってみたら、自分も少しレベルアップ出来たような気がするという話です。

<img src="https://raw.githubusercontent.com/frgmt/flutter-sqlite-viewer/master/src/s1.gif" height="400" alt="Viewer">

# やったこと

- flutterの学習とpackage開発経緯
- packageプロジェクトの作成
- サンプル作成やドキュメントの充実化
- packageリリース

# flutterの学習とpackage開発経緯

最近、flutterが流行りそうな予感があり、自分でも試してみようと思って手を動かしているうちに、これは楽しいぞ、とハマってきました。

その中で、ローカルDBのSQLiteを使おうと思ったところ、クライアントアプリの [DB Browser for SQLite](https://sqlitebrowser.org/) に行き着いたのですが、わざわざDBファイルを読み込みに行かないといけなく、そのDBファイル自体がどこにあるのかというところで、悪戦苦闘したというのがpackageを開発した経緯です。(大抵の場合、getDatabasesPath()のpathを見てみれば分かるという話で、分かってしまえば簡単ですが、、)

# packageプロジェクトの作成

そこで、重い腰を上げて、SQLiteの中身をアプリ上で見れるようにするpackageを作ってみるかということで、packageを作ってみました。

参考にさせて頂いたのが、[こちら](https://dev.classmethod.jp/smartphone/flutter_plugin_project1/)の記事です。ここを見れば、もう大体のことが載っています。

まず、プロジェクトを作成する際に、 `--template=plugin` というオプションを付けるということを学びました。
こちらを設定することにより、普通のプロジェクトとはディレクトリ構造が変わり、exampleというディレクトリが生成されます。そして、通常使用するlib配下にはpackageのファイルを置くことになります。

実際に作成したpackageの中身自体は、[こちら](https://github.com/frgmt/flutter-sqlite-viewer/tree/master/lib)にあるので、覗いてみてください。

# サンプル作成やドキュメントの充実化

packageを作成後は、example配下のlib下にサンプルを作成していきます。
[こちら](https://github.com/frgmt/flutter-sqlite-viewer/tree/master/example/lib)も簡易な例ではありますが、DBを呼び出して、テーブルにレコードをinsertする例を記載していますので、もし良ければ参考にしてみてください。

そして、サンプル作成後、ドキュメント作成をしたのですが、これがなかなか大変でした。

まず、LICENSEに関しては著作権表示だけあれば、あとは良かったので、MIT LICENSEを使用しました。
問題はREADMEで、なかなか英語でドキュメントを書くことがないので、なかなか大変でした。

そんな中、他の方のを参考に書いていたのですが、 `GitHubのstarの数` や `GitHubの最終更新日` なんかをsvgで書き出しているのは、とても面白いなと思いました。
また、サンプルの動画作成も色々な方法があるようですが、[こちら](https://codebass.blogspot.com/2017/12/ios.html)の記事のこのコマンドがシンプルに使いやすく良かったです。

```
$ xcrun simctl io booted recordVideo <filename>.<extension>
```

# packageリリース

flutterのpackage作成が完了したら、 `pub.dev` に載せます。

まずは、コードにエラーが無いか、 `--dry-run` オプションを付けて、確認出来ます。

```
flutter packages pub publish --dry-run
````

自分の場合、幾つかwarningが出ました。
具体的には

- CHANGELOGを書け
- authorやhomepageをpubspec.yamlに書け
- ファイルをformatしろ

という感じでした。

ファイルのフォーマットも以下のコマンドで出来ることを学びました。

```
flutter format [ファイル名]
```

そして、上記のwarningを直し、いよいよpackageの公開です。
以下のコマンドを打つと、googleアカウントを求められ、自分のメールアカウントと紐付けられました！

```
flutter packages pub publish
````

そして、出来たのが [https://pub.dev/packages/sqlite_viewer](https://pub.dev/packages/sqlite_viewer) です。
まだ、誰にも使われていないと思いますが、リリース出来たので良しとしましょう笑

# pub.devに公開する上でやった方が良さそうなこと

ここからは余談ですが、pub.devにはヘルスチェックのような機能が付いています。

こちらでは、上記に書いたpubspec.yamlのhomepageがSSLではないだとか、descriptionが短いだとかすると数値が減らされてしまいます。
また、package内で使用している他のpackageのversionが最新のものでは無かったりすると減らされてしまいます。

ですので、そのpackage自体がちゃんとメンテナンスされているのかどうかという指標となっているようですので、きちんとメンテナンスして行けたらなぁと思っております。(よく出来てるなぁ)

こちらの数値は検索時に上位に出るようになっているような気がするので、上がるように努力しておいた方が良さそうです。

<img width="692" alt="スクリーンショット 2019-12-03 11.47.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278222/81e091d4-e673-539e-6075-d62fb60cbe86.png">

# package作成後の感想

今回packageを作ってみて、知らなかったコマンドや、ドキュメントの知識が増えました。
また、ここには載せていませんが、FutureやBuildFuture周りの理解が深まったりして、ほんと作って良かったなと思ってます。

# 今回作ったpackageの使用方法

そして、最後ですが、今回作ったpackageを紹介させてください。
[SQLite Viewer](https://pub.dev/packages/sqlite_viewer)というものを作りました。

使用方法は簡単で、packageをインストール&インポートしてもらって、navigation barなどにボタンを置いてもらって、遷移するだけです。

- インストール

```
dependencies:
  sqlite_viewer: <latest version>
```

- インポート

```
import 'package:sqlite_viewer/sqlite_viewer.dart';
```

- 遷移

```
Navigator.push(context, MaterialPageRoute(builder: (_) => DatabaseList()))
```

そうすると、こんな感じで、DB一覧 -> テーブル一覧 -> データ一覧という風に見れるようになります。
<img src="https://raw.githubusercontent.com/frgmt/flutter-sqlite-viewer/master/src/s1.gif" height="400" alt="Viewer">

以上となります。
flutterでSQLiteを使用する機会があれば、利用してみてください :)