41.【AppleMusicクローン】Dartでのenumの使い方と具体例

今回はAppleMusicクローンでコンテンツのセクション分けをすることにします。
前回の記事はこちらです。

https://tamappe.com/2020/04/03/2020-04-03-200000

前回のAppleMusicクローンアプリの続きです。前回はmain.dartにレイアウトをただ並べて行きました。その結果、一つのクラスでいろいろなクラスがごちゃまぜになりました。今回はこのまま次の行の横スクロールを実装していくとメンテナンスが大変になることを想定してレイアウトの分離を行います。前回はヘッダーとListViewを作成しましたので「ヘッダー」部分と「ListView」部分を分けたいと思います。 custom_sliver_appbar.dart (ヘッダー) custom_sliver_list.dart (ListView)の命名でクラスを作成します。ヘッダー部分のソースコ…

「見つける」画面は縦長の画面でして、これをそのまま上から順番にウィジェットを乗せていくとウィジェットがごちゃごちゃしてきます。
そこでセクション単位でクラスを分割することでコードの見栄えが良くなります。

iOSでいえば、 UITableView でセクションヘッダーを導入しているのに

if indexPath.section == 0 { } 
else if indexPath.section == 1 {}

などとマジックナンバーで管理してしまうと、後でセクションの順番が変わるといった仕様変更が入ったときに修正が大変になります。
iOSでこのようなセクション管理をするときに使える設計はこちらが参考になります。

Qiita

俺の考えた最強のNSIndexPathのenum管理法 – Qiita

https://qiita.com/noppefoxwolf/items/4f54b10db68597055854

作ってみたらわりといい感じだったので共有やりたいこと1.セクション名、セル名をenumで完全に管理する2.switchやifをネストさせず、また数値を使わずにenumで分岐したい3.UITableViewで使うのでセクシ…

話しを戻します。
こういったセクション分けにおいてはenumで管理するのが見栄えが良いのでDartのenumを導入することにします。

見つけるタブをよく観察するとセパレーターの線が見えます。
今回はこれをもとにセクション分けします。

今回、私はソースコードで次のように定義しました。

enum Section {
  Top,
  Relax,
  ActivityMood,
  ShortMovie,
  Daily,
  Update,
  Attention,
  New,
  Now,
  Others,
  Favorite,
  Must,
  BestInterview,
  ComingSoon
}

このように定義すると、例えば、Topのセクションを使いたい場合には

print(Section.Top.index);

のように書けば、

# 実行結果
flutter: 0

と出力されます。

また、enumの中にある値をリストみたいに取り出すこともできます。

print(Section.values);

とすると、出力結果は

# 実行結果
flutter: [Section.Top, Section.Relax, Section.ActivityMood, Section.ShortMovie, Section.Daily, Section.Update, Section.Attention, Section.New, Section.Now, Section.Others, Section.Favorite, Section.Must, Section.BestInterview, Section.ComingSoon]

このようになります。

これで前回作成したContentSliverList を次のように書くといい感じに整理できます。

content_sliver_list.dart

class ContentSliverList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          if (index == Section.Top.index) {
            /// Top セクションのウィジェットを乗せる
          } else {
            return Padding(
              padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
              child: Divider(
                color: Colors.black,
              ),
            );
          }
        },
        childCount: 20,
      ),
    );
  }
}

こんな感じでセクションごとにウィジェットを乗せていくことにします。
ということで今回はDartでのenumの使い方について学習してみました。