41.【AppleMusicクローン】Dartでのenumの使い方と具体例
今回はAppleMusicクローンでコンテンツのセクション分けをすることにします。 前回の記事はこちらです。
「見つける」画面は縦長の画面でして、これをそのまま上から順番にウィジェットを乗せていくとウィジェットがごちゃごちゃしてきます。 そこでセクション単位でクラスを分割することでコードの見栄えが良くなります。
iOSでいえば、 UITableView でセクションヘッダーを導入しているのに
if indexPath.section == 0 { } else if indexPath.section == 1 {}
などとマジックナンバーで管理してしまうと、後でセクションの順番が変わるといった仕様変更が入ったときに修正が大変になります。 iOSでこのようなセクション管理をするときに使える設計はこちらが参考になります。
話しを戻します。 こういったセクション分けにおいては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, ), ); } }
こんな感じでセクションごとにウィジェットを乗せていくことにします。 ということで今回はDartnenumの使い方について学習してみました。