あおぶろ

スマホアプリ開発のこととか

Flutterでメモ帳アプリを作ったときの話

もうだいぶ前ですが、今年の初めにFlutterで簡単なアプリを作りました。

今更ですが、今回はそのときのことについてまとめたいと思います。

作ったアプリ

f:id:aoshima214:20211028194634p:plain:w500

iOS

‎「Color Folder - カラフルなメモ帳アプリ」をApp Storeで

Android

Color Folder - カラフルなメモ帳アプリ - Apps on Google Play

書いたコード

github.com

主な機能

色分けしたフォルダーでメモを管理します。

f:id:aoshima214:20211028194917g:plain:w250

僕はあんまりスマホでたくさんメモとるタイプではなく、文字をちょっと書ければ何でもいいと思ってます。
機能はシンプルでいいから、コントラストがはっきりした、目が泳がないメモ帳を作ろう!というのがコンセプトです。

インストール数はお察しですが、個人的にはわりと気に入って使ってます笑

作ろうと思ったきっかけ

  • 2021年に入って、そろそろFlutterのこと全く知らないのはまずくないか、という気になる
  • とりあえず簡単なアプリ作ってみるか!
  • アプリの題材何も思いつかないしメモ帳でいいか!

開発期間

2021/01/24 〜 03/02
(初コミット から リリースボタンを押すまで)

大体100時間くらいかかりました。

学習方法

Youtube

www.youtube.com

KBOY氏が運営するFlutter大学の動画です。
わかりやすい!

Flutter documentation

flutter.dev

整いすぎている公式ドキュメント

Widget of the Week

www.youtube.com

最初はぼーっと流し見して、どんなものがあるか何となく頭に入れておきました。
こういうレイアウトはどうやって組むんだ?と詰まったら、関係ありそうな動画を何回か見直しました。

使ったライブラリ

名前 説明
firebase_crashlytics クラッシュレポートの収集
sqflite ローカルデータベース
flutter_hooks 状態管理
hooks_riverpod 状態管理
fluttertoast トーストでメッセージを表示
短いエラーメッセージを表示するのに使用
flutter_colorpicker 高機能なカラーピッカー
アプリのテーマカラーを選択するのに使用
flex_color_picker シンプルなUIのカラーピッカー
フォルダーの色を選択するのに使用
shared_preferences ローカルファイルにデータを保存
設定内容を保存するのに使用
dynamic_theme themeを動的に変更する
アプリのテーマカラーを変更するのに使用
launch_review アプリからストアのレビューページに遷移させる
webview_flutter FlutterでWebViewを使う
プライバシーポリシーのWebページを表示するのに使用

反省点

状態管理のライブラリについて

結論から言うと、状態管理のライブラリの理解が浅くてめちゃめちゃになりました。

アプリを作り始める前、Flutterのアーキテクチャの解説記事を何個か読んでみて、

  • どうやらFlutterは状態管理のライブラリを使うのが一般的らしい
  • Providerとか、それを改良したRiverpodなるものがあるらしい
  • 使うと何がいいのかはよくわからんがとりあえず使ってみるか

という流れでとりあえずRiverpodを入れました。

さっぱり分からない

なにがわからないかわからない

  • ここの意味が分からないな...調べるか...この記事はProvider? Riverpod?
  • Hooksってなんだよ
  • StatefullWidgetに比べて何がいいのか

根性で実装した結果

f:id:aoshima214:20211028225202g:plain
↑項目をいじると画面全体が再描画される設定画面の爆誕

どうすればよかったか

  • 一度に色々やろうとしない
  • 最初は「StatefullWidgetでできることを覚える」だけでもよかった
  • 使うなら、ある程度インプットに時間をかける

あれから日本語でRiverpod等の体系的な解説記事を書いてくださる方も増えたので、次はそれを熟読して挑みます!

次やりたいこと

CI/CDとか

楽しそう
codemagic.io

FireStore

次はバックエンドもあるアプリ作りたい firebase.google.com

感想

2022年はAndroid、Flutter、Firebaseの3本立てで頑張ります