TL;DR;
この記事を読めば,Flutterアプリ界隈で人気なローカルデータベースORMである,Driftの最新事情と,アプリ実装に関する実践的な知識,サンプルが手に入ります!
実際に,Driftを用いて,アプリ内で入力される日記の内容を記録し,その記録をロードできるようにする過程を行いました.
また,設計過程では,MVVMモデルおよび,リポジトリーパターンを用いてデバッグしやすい実践的なコードの生成を心がけ,かつディレクトリ構造では責務を確実に分離させるためのアトミックな構成を心がけました.
本記事では,作成するアプリの概要をお伝えし,次回以降で,各ファイルやライブラリの使用方法について話します.
次回
実際に作るもの
このアプリでは,Editorページから,日記を作成し,保存します.
その日記では,画像と無制限のタイトル,無制限の本文をテキストで保存します.
保存ボタンを押すと,決められたルールに従い,正常な日記データのみを保存し,それ以外の場合は,エラーをスナックバーで出力し,ユーザーに知らせます.
Homeページでは,保存している日記の全てをダイジェストで閲覧することができます.
各日記をタップすると,各日記の全体を表示するモーダル画面がフルスクリーンで遷移し,詳細を表示します.
この映像は,Galaxy S25の実機で撮影されました.
開発リポジトリ
このリポジトリには,開発全体のコードおよび,テストコードなどがすべて入っております.
このリポジトリをクローンし,ローカル環境のFlutterでdependenciesを解決することで,皆様の環境でも起動することができます.
起動方法
まずご自身のコンピュータにFlutterのランタイムがインストールされているか確認してください
また,iOSまたは,Androidのエミュレータ,Androidの実機などが用意できているか確認してください
(本アプリは,WebやMacOS, Windowsでは動作しません)
また,GitHubがインストールされているか確認してください
次に,以下のコードをコマンドラインで実行してください
git clone https://github.com/ShuMasui/flutter_diary.git
次に,コードがクローンされたディレクトリに入り,flutter_diaryディレクトリが直下になるようにしてください
cd {それぞれのディレクトリ}/flutter_diary
次に,以下のコマンドを入力し,依存関係を解決してください.
flutter pub get
以上がすべて成功した場合,最後に,以下のコマンドを入力しエミュレーターを起動してください
flutter devices
flutter run -d {flutter devicesコマンドで表示されたdevice-id}
使用パッケージ
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.8
drift:
drift_flutter:
freezed_annotation:
flutter_riverpod:
riverpod_annotation:
image_picker:
json_annotation:
flutter_svg:
path_provider: ^2.1.5
path: ^1.9.1
go_router: ^17.2.3
dev_dependencies:
flutter_test:
sdk: flutter
build_runner:
drift_dev:
freezed:
riverpod_generator:
json_serializable:
Riverpod
Riverpodには次の4つのパッケージが必要です.
dependencies:
flutter_riverpod:
riverpod_annotation:
dev_dependencies:
riverpod_generator:
build_runner:
freezed
Freezedには次の5つのパッケージが必要です.
dependencies:
freezed_annotation:
json_annotaion:
dev_dependencies:
freezed:
json_serializable:
build_runner:
Drift
Freezedには次の6つのパッケージが必要です.
dependencies:
drift:
drift_flutter:
path_provider:
path:
dev_dependencies:
drift_dev:
build_runner:
その他
このアプリを動かす上では,以下のパッケージが必要です.
dependencies:
image_picker:
flutter_svg:
go_router:
ファイル構成
.
├── app.dart
├── core
│ ├── database.dart
│ ├── database.steps.dart
│ ├── db_impl.dart
│ ├── db_repo.dart
│ ├── diary.dart
│ ├── providers.dart
│ ├── router.dart
│ └── tables.dart
├── feature
│ ├── btm_nav_bar.dart
│ ├── editor
│ │ ├── notifier.dart
│ │ └── screen.dart
│ └── home
│ ├── modal.dart
│ ├── notifier.dart
│ └── screen.dart
└── main.dart
(自動生成のファイルは除外しています)
主に,coreディレクトリに,主要機能のコードが入っており,featureディレクトリに,各画面の機能とボトムナビゲーションバーが入っています.
main.dartがアプリケーションのエントリーポイントとなっていますが,実質的なエントリーポイントはapp.dartに移っています(依存性注入処理や,初期化処理のため).
おわりに
次回の記事では,Driftの操作方法について,公式チュートリアルおよびドキュメントと睨めっこしながら,辿り着いた結論についてお話しさせていただきます!
ぜひお読みください!
次回
