📱[Flutter]エンジニア１年目の初心者が約１か月でリリースしたモバイルアプリの制作過程

自己紹介

大学を卒業して今年１年目のエンジニアです。情報系の学部ではないですが情報系のサークルで約１年ほどReactNativeを触っていました。現在は趣味でBlenderで3Dモデリングをしてみたり、フロントエンドをメインに触ってます。以前からFlutterでのモバイルアプリ開発に興味があったのでAndroidアプリのリリースにチャレンジしてみました。今回の記事がZenn初投稿です！よろしくお願いします！

モバイルアプリの紹介

私が開発したのは「スマホフレームApp」です。これはスマホやタブレットのフレーム（ベゼル）に好きな画像を組み込んだイメージ画像を制作できるモバイルアプリです。

スマホフレームAppの特徴はユーザーが選んだ画像のサイズにスマホのフレームを調整して合わせる事ができる点です。スマホフレームの縦・横のサイズを調整できるスライダーを設置しています。初回のリリースだけで開発を終了せず、今後もよりよりUI・UXを目指してアップデートをしていく予定です。

• 📱Androidアプリはこちらからダウンロード可能です：for Android

本モバイルアプリ開発のきっかけ

休日にblenderでスマホのモデリングにチャレンジしていました。その時作成したスマホの3Dモデルは以下の動画でご紹介しています。
この3Dモデルの画面が水色一色で寂しかったのでスマホの画面画像をblenderではめ込んでみました。これをきっかけに「スマホのフレーム（ベゼル）に画像を埋め込めるモバイルアプリ」という発想につながりました。
以上のことから以前から興味のあったFlutterでこのモバイルアプリの開発を始めました。
https://youtu.be/bZWRqf4tqU0

開発期間

開発期間は約１カ月（１カ月と数日）です。開発を始める前は開発期間は２か月程を想定していましたが、開発を始めてみると思いのほかモチベーションが続き、ほぼ毎日開発を進める事が出来ました。

１日の作業時間は平日が２～３時間前後、土日は半日～程です。結果として１か月と数日でモバイルアプリのリリースまで行う事が出来ました。リリース作業には思いのほか時間がかかりました。。

開発環境

• WindowsノートPC
• android端末（テスト用）
• Flutter 3.10.0
• Dart
• Visual Studio Code（エディタ）
• GitHub（branch作成・バージョン管理のため）

Flutter

https://flutter.dev/

Dart

https://dart.dev/

Flutterを選んだ理由

何か深い理由があったわけではないですが、Flutterでモバイルアプリを開発できると聞いたことがあり触ったことがなかったので、好奇心でこの機会に触ってみようと考えました！
また、ReactNativeと同様にクロスプラットフォームでの開発を行える点がFlutterの魅力の一つだと思います。

使用したライブラリ

1. アイコン：cupertino_icons,flutter_launcher_icons
2. 保存：path_provider, shared_preferences
3. スクリーンショット：screenshot
4. ダイアログ：awesome_dialog
5. アニメーション：flutter_animate
6. ボトムナビゲーション：curved_navigation_bar
7. スプラッシュ画面：flutter_native_splash
8. フリップカード：flip_card
9. webブラウザ：url_launcher
10. 画像：image_picker, image_gallery_saver
11. 日付：intl

できるだけモダンなUIのモバイルアプリを開発したかったのでアニメーションを多用しました。
awesome_dialogではアニメーション付きで見た目のよいダイアログを作成できました。

開発で苦労した部分

開発で特に苦労したのは２点です。１点目は「画面上で画像のタップ移動操作の実装」です。具体的には以下のgif画像のようにタップした画像を画面上の好きな位置へ移動する機能の実装です。タッチイベントの実装についてはGestureDetectorで実装できました。
２点目は「画像に画像を重ねて表示する方法」についてです。これはStackでWidgetを重ねる事で実装する事ができました。

工夫した点

工夫した点はアニメーションの実装です。画面遷移をした際にUIがフェードインでふわっと表示される仕様を実装したかったので、flutter_animateパッケージを利用しました。アニメーション処理を実装した画面は以下のGIF画像の通りです。

ダイアログに関してもアニメーション付きのパッケージ（awesome_dialog）を使用しました。以下のGIF画像のようにモダンなアニメーションを表示できました。本アプリ内において画像の保存・削除時は、このダイアログを統一して使用しています。

今後の改良（アップデート）予定

• フレーム端末画像の追加：現状は黒・赤・青の３種類しかフレームがないので、フレーム端末画像の種類を追加予定です。

• チュートリアルの実装：現状では本アプリの使用方法の説明がないのでtutorial_coach_markパッケージやintroduction_screenなどのいずれかを使用しチュートリアルを実装予定です。

• 画像保存リスト一覧を新しい順に表示：現状はホーム画面で、アプリ内に保存した画像リストを古い順に上から表示している状況です。上から新しい順になっていた方がUX的に良いと思うのでこの点を実装予定です。

最後に

ここまで本記事をお読みいただきありがとうございます。マニアックな分野かもしれませんがこれからスマホフレームに組み込んだ画像を作成したい方、モックアップを作成したい方はぜひ試して頂ければ嬉しいです。

・📱Androidアプリはこちらからダウンロード可能です：for Android