46.【AppleMusicクローン】トラック更新のデザインを組み立てる

本日はApple Music クローンのセクション6のデザインを作っていきます。 とても簡単にできます。

トラック更新

ブログ執筆時点の今は実はセクション7まで仕上がっていますので今後それらをまとめていく予定です。 「トラック更新」のデザインは

• 「トラック更新」と「すべて見る」のセクションヘッダー
• 正方形の画像 x 1
• 太文字テキスト x 1
• 細文字テキスト x 1

で構成されています。

セクションヘッダーは今までのヘッダーを使い回すことができます。 それ以下の画像とテキスト2つのサイズを調整することが課題になります。

使ったウィジェットを一番下の階層から順に説明すると

(下の階層)

• Column : 縦に並べるため
• SizedBox < PageView.builder : child の高さ調整
• Padding < Column
• Container (BoxDecoration) : 正方形の画像
• Align < Padding < Text
• Align < Padding < Text

(上の階層)

の乗せ方にしました。 この箇条書きの書き方はFlutterのレイアウトの設計をイメージするのに最適かもしれないことに気づきました。 非常に分かりやすいですね。

ソースコード

それではソースコードを載せることにします。 今回は SixthSectionItem クラスと SixthSectionColumnItem クラスを追加しています。

sixth_section_item.dart

import 'package:apple_music_clone/widgets/sections/sixth_section_column_item.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';

class SixthSectionItem extends StatelessWidget {
  final int itemCount;

  SixthSectionItem({@required this.itemCount});

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        SizedBox(
          height: 430.0,
          child: PageView.builder(
            itemCount: itemCount,
            controller: PageController(viewportFraction: 0.9),
            itemBuilder: (BuildContext context, int itemIndex) {
              return _buildTopSectionItem();
            },
          ),
        )
      ],
    );
  }

  Widget _buildTopSectionItem() {
    final verticalPadding = const EdgeInsets.symmetric(vertical: 1.0);
    final horizontalPadding = const EdgeInsets.symmetric(horizontal: 5.0);
    return Padding(
      padding: horizontalPadding,
      child: SixthSectionColumnItem(verticalPadding),
    );
  }
}

sixth_section_column_item.dart

import 'package:apple_music_clone/utils/hex_color.dart';
import 'package:flutter/material.dart';

class SixthSectionColumnItem extends StatelessWidget {
  final verticalPadding;

  SixthSectionColumnItem(this.verticalPadding);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(5.0)),
          ),
          child: Image.asset('assets/images/image10.png'),
        ),
        Align(
          alignment: Alignment.centerLeft,
          child: Padding(
            padding: verticalPadding,
            child: Text('失恋J-Pop',
                style: TextStyle(
                    color: HexColor('#151515'),
                    fontSize: 20,
                    fontWeight: FontWeight.w500)),
          ),
        ),
        Align(
          alignment: Alignment.centerLeft,
          child: Padding(
            padding: verticalPadding,
            child: Text('泣きたいときには泣いていい。そっとあなたに寄り添う失恋の処方箋。',
                style: TextStyle(
                    color: HexColor('#9D9D9D'),
                    fontSize: 13.5,
                    fontWeight: FontWeight.w500)),
          ),
        )
      ],
    );
  }
}

image10.png

高さや 各item の index などの細かい設計は省略しています。(考えるのを止めました。。。) これをいつものようにContentSliverListに追加すれば表示されます。

 else if (index == _sectionToInt(Section.Update)) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                SectionHeaderItem(
                    title: 'トラック更新',
                    isVisible: true
                ),
                SixthSectionItem(
                  itemCount: 20,
                ),
              ],
            );
          }

スクリーンショット

これでビルドするとスクリーンショットの画像のデザインが出来上がります。 デザインだけですがこれだけウィジェットを組み立てていくと、Flutter でのレイアウトの組み立てに慣れてきました。 Flutter はウィジェットの組み立ては楽にできますが部品毎の感覚調整が非常にセンシティブで大変というのが今の感想です。

iOSアプリ開発の時のようにUITableViewとUITableViewCellをゴリゴリ組み合わせたり、 Cellの高さを微調整するときにハマるようなことはないのでそういうところでのヘイトは感じられませんでした。

次回はこの辺りのFlutterの所感について気づいたことをまとめられたらなと思います。