開発

【Flutter】開発時のクラス構成について(機能Widgetクラスと親Widgetクラスと制御クラス)

こんにちは。スマホアプリをメインに開発しているロッキーカナイです。

前回は、社内でFlutterを勉強している方から「機能単位でWidgetクラスを作ったが、親クラスとの連携や制御方法が分からない」と質問を貰ったので、説明の記事を書きました。

【Flutter】開発時のクラス構成について(機能単位のWidgetクラスと親Widgetクラスの制御)

実は、上記の質問の回答としては、今回紹介する、機能Widgetを制御する制御クラスを使ってそこで制御をしてみようと回答しました。今回はその内容を紹介いたします。

前回と同じアプリを使いますので、仕様のおさらいです。

アプリ仕様

  1. 「季節」のスライド項目と「日中、夜」のセグメンとを切り替えると、該当の画像が表示されるアプリ

 

旧アプリのクラス構成

  1. 親クラス(メイン)はMainViewWidgetで以下の子クラスを保持している。
  2. 子クラスはCategorySlideWidgetで季節カテゴリをスライドで表示し選択できる。
  3. もう一つの子クラスはSegmentWidgetで、セグメント切り替えで「日中、夜」を選択できる。

 

新アプリのクラス構成

  1. 親クラス(メイン)はMainViewWidgetで以下の制御クラスを保持しており、制御クラスからの指示で画面の更新を行う。
  2. 制御クラスはMainManagerで以下のクラスを制御する。
  3. CategorySlideWidgetで季節カテゴリをスライドで表示し選択できる。
  4. SegmentWidgetで、セグメント切り替えで「日中、夜」を選択できる。

 

制御クラス

制御クラスとは??となってしまうかと思いますが、前回に出てきた親クラスMainViewWidgetの機能面を制御するクラスを新規で作ってそこで色々やってもらう。そして親Widgetは管理クラスで保持しているものを表示するだけといった内容です。

よくMVCといわれるデザインパターンを思い浮かべてもらうと分かりやすいのですが、今回の親WidgetのMainViewWidgetはMVCでいうところのViewになり、管理クラスのMainManagerはMVCでいうところのController(とModel)です。

 

CategorySlideWidgetとSegmentWidgetの実装

前回とソースコードは同じですが、記載します。

 

CategorySlideWidget.dart

 

SegmentWidget.dart

 

制御クラスの実装

MainManager.dart

前回では、MainViewWidgetで行なっていたCategorySlideWidgetやSegmentWidgetの制御はMainManagerへ移動してます。

これで仕様面の機能はこのMainManagerで行うことが出来ました。

 

親クラスの実装

MainViewWidget.dart

MainViewWidgetでは、MainManagerからWidgetを返してもらって表示するだけになりました。Viewとして画面の表示のみ担当しているイメージです。

動作も前回と同様の動きになりました。

 

まとめ

この記事を書くきっかけとなった質問の回答として、「制御クラスを作ってそこで制御しよう」と言ったのは以下の理由からです。

「親Widget」 – 「制御クラス」 – 「各機能パーツ」

といった、それぞれの担当にわりふった仕事を実装することで、コードが見やすくなり、不具合が減る。よって、手直しが少なくなるので工数が削減できる、クオリティの高いものができる、などメリットが多いことからです。

よくiOS界隈で処理がViewControllerに集中しすぎていて肥大化すると言った話が出ますが、Flutterも同様で、前回の様に親Widgetに処理を持たせすぎると肥大化します。なので制御クラスで処理を一括してあげる(又は、制御を細分化して別クラス、複数管理クラスにする)などで回避できますし、コードがすっきりします。

Flutterだけでなく、すべてのコーディングに通ずるものと私は思ってます。

次回はなにを書こうかな。

ABOUT ME
ロッキーカナイ
ロッキーカナイ
iOSをメインに、SwiftやObjective-C言語の開発をしてます。趣味は猫と戯れる事、PHPを使ったサイト作成やAndroidの開発もしております。ちなみに名前のロッキーカナイはよく昼飯を食べる所w