Flutter:SQLiteでBLoCデザインパターンを使用するTodoアプリ

Flutterプロジェクトを構造化してコードのパフォーマンスを向上させたり、新しい変更に採用できるように構造化したり、再利用できるようにするためのエンジニアリングデザインパターンが数多く登場しています。この記事では、Flutterを使用した従来の Todo アプリの作成方法を紹介します。 SQLiteを使用して、ローカルデータベースストレージ上のデータと反応的にやり取りします。完全なプロジェクトについては、ここでプロジェクトgitリポジトリを見つけることができます。

このアプリは、次のようなさまざまなアーキテクチャデザインパターンのプラクティスをカバーします。

前提条件:

この記事は、Flutterの基本などの詳細をすべて網羅しているわけではないため、 長く、Flutterフレームワークにかなり精通している中級開発者を対象としています。またはDart構文&セマンティクス。

Todoアプリ

私たちの目標は、言及されたデザインパターンをカバーするTodoアイテムに対してCRUD(作成、読み取り、更新、削除)操作を実行できるシングルページアプリを作成することです。

には次の能力があります:

フラッタープロジェクト

Flutterプロジェクトの作成を開始し、名前を付けます( react_todo_appという名前を付けましたが、dartパッケージをインポートするときは、コードをコピーする場合は、reactive_todo_appではなくプロジェクト名を使用するようにしてください)。

pubspec.yamlファイル(メインプロジェクトフォルダーの下にあります)に移動し、依存関係の下に2つのパッケージ(sqflite& path_provider)を追加します。 sqflite v1.1.0&があるかのように、パッケージのバージョンが異なる場合があることに注意してください。 path_providerv0.5.0。

プロジェクト構造(パッケージとファイル)

図のように lib ディレクトリ/フォルダの下にプロジェクトパッケージを作成し、それに応じてその兄弟のdartファイルを追加します。

Todo Model / POJO(todo.dart)

Todoモデルには、次の3つのフィールドがあります。 id (データベースによって自動生成)、 説明 Todo のテキスト本文)、および isDone (アイテムが完了したかどうかを示す)。 Todo インスタンスを sqflite アダプターが保存するために使用するJSON形式に変換するために、 toDatabaseJson()メソッドを追加します。テーブルレコードの形式のデータベースについては、次の database.dart クラスでデモンストレーションします。逆に、ファクトリメソッド fromDatabaseJson(…。)は、データベースからフェッチされた sqflite の結果(タイプJSON)を Todo モデルインスタンスに変換します。

データベース(database.dart)の作成

database.dart の目的は、データベーススキーマの作成を管理し、 TodoDao のデータベースインスタンスを非同期に 公開することです。強い>呼び出す。クラスの上位ボイラープレートコード全体は、ほとんどの場合、アプリのデータベースインスタンスを設定しています。これらの行の最も重要な部分は、データベースの作成を非同期的に行うasync、awaitキーワードの使用です。ダーツで行われる異常な操作では、クラスのFutureタイプを Future< T>、、この場合は Future< Database> データベースゲッターに返す必要があります。 i nitDB(…。) の場合、これは、database.executeメソッドを使用してテーブルスキーマを初めて作成し、モデルメンバーごとにSQLを使用してTodoテーブルを作成する場所です( id、description、isDone)。 SQLITE には、 Todo メンバー isDone bool / boolean タイプがないことに注意してください。>代わりに、ブール値をデータベースに格納するための代替パスを使用する必要があります。したがって、整数型を使用します。ここで、 0 isDone False &として示します。 1 は、 isDone True

として示します。

データアクセスオブジェクト(todo_dao.dart)

TodoDao は、 Todo モデルのすべてのローカルデータベース Create Read Update Delete (CRUD)操作の管理に専念しています。 非同期。これは、 TodoRepository &間の主要なコミュニケーターになります。次の方法による DatabaseProvider (database.dart):

TodoRepository(todo_repository.dart)

BLoC &などの多くのアーキテクチャデザインパターンで MVVM リポジトリの概念の責任は、異なるデータソースプロバイダー間のCRUD操作を調整できるプロキシブリッジとして機能することです。このプロジェクトスコープでは、現在、 TodoDao メソッドを呼び出しているだけの上記のスニペットに示されているように、 TodoDao を使用してローカルデータベースである1つのデータソースを使用しています。私たちのプロジェクトにはそれほど価値はありませんが、将来的にはビジネスの変更が必要になり、バックエンドサービスから Todos データを取得するために Todo アプリが必要になることを想像してみてください( TodoWebService など)、ローカルデータベースと同期して、ユーザーエクスペリエンス(UX)を向上させるオフラインアプリサポートを提供するため、ここに TodoWebService クラスを含めるだけです。ここで、ローカルデータベース( TaskDao )とさまざまなデータソースのAPIソースの間でデータ同期メカニズムを実行します。

ビジネスロジックコンポーネント(todo_bloc.dart)

TodoBloc()は、一連/複数の非同期イベント Todo データを管理する主要なリアクティブクラス/コンポーネントです。>(ストリームと呼ばれます)。 イベントは、データ状態から新しいデータ状態への移行です。たとえば、ストリームに7つの Todo アイテムがあるとします。 UIでユーザーに表示するために、UIを介して、ユーザーは1つの Todo アイテムを削除して6つの Todo アイテムにすることにしました。まとめ

TodoBloc のスーパーバイザー/管理者メンバーは _todoControllerです。詳述すると、_todoControllerは

HomePage()—ユーザーインターフェイス(home_page.dart)

HomePage()画面は StatelessWidget であり、CRUDを実行するためにユーザーの入力/出力を受け入れることが期待される Todo カードのリストが含まれていますUIレベルでの操作。 コードの重要な部分のみを示します。ほとんどのコードは主にUIデザイン用であるため、home_page.dartの完全な実装を参照できます。以下では、 Todo のデータストリームを取得するために言及された TodoBloc()の初期化に焦点を当てます。 getTodoWidget()に焦点を当てる2番目のポイント。これがリアクティブUIコンポーネントの始まりです。

ストリームを介してUIREADを実行する

最初の getTodoWidget()は、 StreamBuilder ウィジェットを構築します。このウィジェットはストリームからのデータに基づいて残りのUIコンポーネントを構築します。構築した TodoBloc (todo_bloc.dart)。 StreamBuilder は、 todoBloc.todos ストリームを順番にサブスクライブ/監視/リッスンし、から通知を受け取ります。 TodoBloc Todos ストリームを変更するイベントが発生すると、リストビューの Todos の数などのUIの値が更新されます。プロジェクトのストリームは、データの状態を変更するイベント(の削除など)の影響を受ける可能性のある Todo オブジェクト(慣例によりスナップショットと呼ばれます)のリストです。 strong> Todo アイテム、 Todo のリストの再作成、リストの並べ替えなど)。

UIの実行DELETE&更新

UITodo検索の実行

todoBloc.getTodo(query)

を使用して、クエリTodoの説明を検索できます。

アプリのエントリポイント(main.dart)

最後に、 MyApp は標準のウィジェットです。特別なことは何もありません。 HomePage()以前に確認した唯一のページが読み込まれます。

この記事の結論です。FlutterプロジェクトのこれらのBLoCデザインパターンの概念の一部が何らかの形で明らかになることを願っています。フィードバックや質問を共有してください。できる限り返信します。