🦋

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

commits4 min read

この記事は、Flutterをほぼ初めて触った人の感想記事です。

どうも、shota1995mです。

今回は、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

ログインするとコメントできます