Zenn
🦋

Flutterを使って１週間でアプリ作ってみた!

2022/01/01に公開
Flutter
app
tech

どうも、nano72mknです。

今回は、Flutter を使ってアプリを作ってみました！

ReactNative の開発体験はとても素敵なもので、Flutter に挑戦しようと思っても RN の誘惑に負けて手を出せずにいました。
Cordova から始まり、Native(Swift)をさわり、ReactNative(Expo)をやってきて、とうとう Flutter に挑戦です！

アプリエンジニアの歴史にFlutterをぶち込んでやります！！

なにつくったの？？

去年、1 年間何してきたかなと思って振り返ると、記憶がほぼありませんでした。
改善方法を考えた結果、日記をつけられるアプリを作ろう！そうすれば何してたか思い出せるじゃん！！
でも、書くのめんどくさいしな...

ということで、作りました。

One Line Diary

「え！たった一行でいいの！」
そうです。たった一行、今日あったことを書くだけ。
それだけで立派な日記なのです。
めんどくさがりな君でも、続けられるかも？

すばらしいキャッチフレーズで、どんなアプリなのか伝わったと思います。

（普通の日記アプリでいいじゃんは禁句です）

使用技術

  • Flutter
  • FireBase
    • Authentication
    • Cloud Firestore

のみのシンプル設計。

Flutter を把握する

まとめると、公式サイトみて想像して、ドキュメントをみて妄想してみたらできること把握できました。
見づらいメニューでしたけど、内容はわかりやすくて把握しやすかったです。

（※個人的感想を含みます）

公式サイトを見てモチベーションをあげる

一番大事なこと、それはモチベーションを上げること。
ここでブーストしないと、リリースまでいけないです。（体験談）
「え、Fast って書いてある！早いのやばい！」くらいの気持ちで上げていきます。
公式サイトには、いいことしか書かれていないのでモチベを上げるのには最適です。

https://flutter.dev/

ドキュメントを読んでみる

モチベーションが上がったままドキュメントを読みましょう。
流し読みで問題ないです。ドキュメントなんて覚えている人はいません。
何ができるかを悟るのです。

https://docs.flutter.dev/

GitHub の検索

使いたい Widget とか GitHub で検索するのです。
たくさんのサンプルを確認することが出ます。

Flutter のつらみ

初心者ならではなので、慣れれば問題ないレベルです。

dart がわからん

時間と開発数が解決する問題。
JavaScript の雰囲気を出していますが、（使ったことないけど）Java みも感じる。
親近感湧くけど、壁貼られてる。そんな感じです。

階層深くなりがち

ものによりますが、Paddingをつけるだけでも階層が深くなり、見えにくくなってしまいました。

イメージです
Padding(
  padding: const EdgeInsets.only(top: 4.0, left: 20.0),
  child: const Text('hoge'),
)

こんな感じで、Padding以外にもあり、組み合わせると結構深くなりがちでした。
これは、組み合わせ方を調べていくと解決するかもしれないですが、なりがちという状況は変わらなそうだと思いました。

OTA アップデートができない

ちょっとした文字の変更にも申請を通す必要があるのは、なかなかにめんどくさい。
今後対応されたりなんかしちゃったり????

Flutter のよきとこ

デザインしなくても良い

デフォルトでマテリアル UI が反映されるので、
まるにプラスアイコンがついたボタンを画面右下に表示する場合は、

floatingActionButton: FloatingActionButton(
  onPressed: () {},
  tooltip: 'Increment',
  child: const Icon(Icons.add),
),

これだけで実装できます。

他にもボタンや input など、ほとんど Style が付いているので、
デザインを考えずに簡単に実装できます。

デザインが苦手な人は Flutter おすすめです。

FireBase 連携楽

FlutterFireというものがあり、
flutterfire configureとコマンドを打てば、Firebase 連携ができてしまう優れもの。

Google が開発してるんだし、Flutter は Firebase 連携楽なんだろうなと思っていましたが、
想像よりも楽でびっくりしました。

さらに、FlutterFire UIというもので、ログインページなども簡単に生成できてしまう！！
これのおかげで、1 週間で完成までいけました。
最高！

アイコン設定楽

React Native ではジェネレータを自作し、アイコン設定は一瞬だったので、
Flutter でアイコン設定をしないとと気づいた時は絶望していました。（アイコン数多くて辛い！！）

でも、やはり Flutter にも神はいました。flutter_launcher_iconsを追加すれば、

$ flutter pub run flutter_launcher_icons:main

これだけで、アイコン設定終わる！！
最高！！ありがとう！！

型

型が最強でした。
この Widget は何をされている方なの？
と聞くと、すぐに答えてくれるので、できること・できないことがはっきりしていて開発が楽でした。

アプリ申請までのスケジュール感

  • 12/25
    • 公式サイト/ドキュメントを見る
    • Flutter インストール
  • 12/26
    • Firebase 入れてみる
    • めちゃめちゃエラーでる
    • 初期化して Flutterfire を試したら成功
  • 12/27
    • ログイン画面ついか
  • 12/28
    • 日記保存の実装
  • 12/29
    • 実機テスト
  • 12/30
    • アイコン追加
  • 12/31
    • Apple に申請

まとめ

Flutter 思ってたよりも簡単でした。
おそらく、これで簡単というと怒られそうですが、でもとっつきやすく入門しやすいと思いました。

Flutter が原因のつまづきはdartがわからんくらいで、エラーで永遠にハマることもなくすんなり開発できてしまったので、
個人開発やる時は Flutter で作っていこうかなと思っています。

この記事は、開発中に書いたスクラップを元に作成しました。
興味がある方は見てみてください！

12/31 に Apple さんに申請をしました 🎉
リリースされるのが待ちどうしいですね！（自分だけ）

おまけ

Flutter をやりたい理由のひとつに、ReactNative と Flutter どちらを選択するのが良いのか判断したいという気持ちがありました。
すこし触った感じ、開発体験に関しては、好きな方でいいやというくらい差がありませんでした。

ReactNative と Flutter どっち使おうか悩んだら下記のフローチャートで判断しようかなと思います。

Expo を使用する場合は、RN が一歩リードという感じ。

GitHubで編集を提案

Discussion