リバース・エンジニアリング

Flultterとテックブログと時々iOS

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

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

blog.tamappe.com

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

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

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

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

qiita.com

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

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

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

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,
      ),
    );
  }
}

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