コンサルティング事業 2021.01.29

Flutter × UI #10 ~ agexコーポレートサイトをトレースしてみた (ブログリスト編 part2) ~

ブログアイテムの表示にランダムなディレイを入れる

前回までのお話
○ ヘッダー編
Flutter × UI #01 ~ agexコーポレートサイトをトレースしてみた (ヘッダー編) ~

○ スライダー編
Flutter × UI #02 ~ agexコーポレートサイトをトレースしてみた (スライダー編 part1) ~
Flutter × UI #03 ~ agexコーポレートサイトをトレースしてみた (スライダー編 part2) ~
Flutter × UI #04 ~ agexコーポレートサイトをトレースしてみた (スライダー編 part3) ~
Flutter × UI #05 ~ agexコーポレートサイトをトレースしてみた (スライダー編 part4) ~
Flutter × UI #06 ~ agexコーポレートサイトをトレースしてみた (スライダー編 part5) ~

○ ブログアイテム編
Flutter × UI #07 ~ agexコーポレートサイトをトレースしてみた (ブログアイテム編 part1) ~
Flutter × UI #08 ~ agexコーポレートサイトをトレースしてみた (ブログアイテム編 part2) ~

○ ブログリスト編
Flutter × UI #09 ~ agexコーポレートサイトをトレースしてみた (ブログリスト編 part1) ~

今回のおはなし
今回は、弊社HPの「ブログリスト」をFlutterでトレースした際のおはなし part2です。

[ここまでの成果]
ブログアイテムの形は6パターンの繰り返しになっている
・同一列のブログアイテムの表示ディレイはランダムになっている
・スクロール位置に応じて、ブログアイテムが表示される

再現してみる
今回からは、「ブログリスト編 part1」で作成したブログリスト基本形に対し、ブログアイテムの表示タイミングに変化を加えていきます。

同一列のブログアイテムの表示ディレイはランダムになっている
「ブログリスト」を分析してみると、同一列のブログアイテムの表示はランダムでディレイが入っていることが分かります

現在、ブログアイテムは「ZoomIn」Widgetを利用して作っていますが(「ブログアイテム編」参考)、この「ZoomIn」Widgetは「delay」プロパティを持っており、ここで表示時のディレイを設定することができます。

class BlogItem extends StatefulWidget {
  final double catchTopPos;
  final double catchHeight;
  final double titleHeight;
  final double width;
  // delayを受け取るプロパティを追加
  final int delay;

  const BlogItem({Key key,
    this.catchTopPos,
    this.catchHeight,
    this.titleHeight,
    this.width,
    this.delay})
      : super(key: key);

  @override
  _BlogItemState createState() => _BlogItemState();
}

class _BlogItemState extends State with TickerProviderStateMixin {

    ・
    ・
    ・

  @override
  Widget build(BuildContext context) {
    return Transform.scale(
      scale: zoomAnimation.value,
      child: ZoomIn(
        delay: Duration(milliseconds: widget.delay), // delayを設定
        duration: Duration(milliseconds: 300),
        child: ConstrainedBox(

    ・
    ・
    ・

}

調整した「ブログアイテム」要素を利用して、「ブログリスト」側でディレイを設定します。

まずは固定値を設定し、左側のアイテムから順に表示されるようにします。

class BlogList extends StatelessWidget {
  BlogList({Key key}) : super(key: key);

  // 「Row」要素を作成するメソッド。引数で要素の個数を受け取る
  List _itemList(int itemCount) {
    // 各ブログアイテムパターンのパラメータ
    final List catchTopPos = [50, 150, 100, 150, 50, 100];
    final List catchHeight = [300, 270, 330, 270, 300, 300];
    final List titleHeight = [280, 250, 310, 250, 280, 280];
    final List width = [420, 270, 330, 270, 420, 330];

    List blogItems = [];
    List Rows = [];
    for (int i = 0; i < itemCount; i++) {
      blogItems.add(BlogItem(
        catchTopPos: catchTopPos[i % 6],
        catchHeight: catchHeight[i % 6],
        titleHeight: titleHeight[i % 6],
        width: width[i % 6],
        delay: 100 * (i % 3), // delayの設定
      ));

    ・
    ・
    ・

これで、以下のようにブログアイテムの表示にディレイをつけることができます。

このままだと、ブログアイテムの表示は毎回左側のアイテムから順に表示されるような動きになってしまうので、ここに表示順序のランダム性を持たせることにします。

上記で実装したdelayの算出を少し変更し、「ランダム値」を用いて表示ディレイ値を変化させるようにします。

class BlogList extends StatelessWidget {
  BlogList({Key key}) : super(key: key);

  // 「Row」要素を作成するメソッド。引数で要素の個数を受け取る
  List _itemList(int itemCount) {
    // 各ブログアイテムパターンのパラメータ
    final List catchTopPos = [50, 150, 100, 150, 50, 100];
    final List catchHeight = [300, 270, 330, 270, 300, 300];
    final List titleHeight = [280, 250, 310, 250, 280, 280];
    final List width = [420, 270, 330, 270, 420, 330];

    List blogItems = [];
    List Rows = [];
    // ランダム値の生成
    int random = Random().nextInt(2);

    for (int i = 0; i < itemCount; i++) {
      blogItems.add(BlogItem(
        catchTopPos: catchTopPos[i % 6],
        catchHeight: catchHeight[i % 6],
        titleHeight: titleHeight[i % 6],
        width: width[i % 6],
        delay: 100 * ((random + i) % 3), // delayの設定
      ));

      if (blogItems.length % 3 == 0) {
        Rows.add(
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: […blogItems],
          ),
        );
        blogItems = [];
        // ブログリスト一列ごとにランダム値を再生成
        random = Random().nextInt(2);
      }
    }

    ・
    ・
    ・

これにより、以下のように画面表示ごとのブログアイテム表示ディレイにランダム性をもたせることができます。

[ここまでの成果]
ブログアイテムの形は6パターンの繰り返しになっている
同一列のブログアイテムの表示ディレイはランダムになっている
・スクロール位置に応じて、ブログアイテムが表示される

今回はここまでにします。
ほんのちょっと手を加えるだけで、ブログアイテムに表示ディレイを加えることができました!

次回は「スクロール位置に応じて、ブログアイテムが表示される」について実装していきたいと思います。ブログリストの課題が残り1つとなりましたが、なかなか難しそうな課題なので、引き続き丁寧に実装を進められればと思います!

今日の一言
Flutter × UIシリーズ、やっと#10到達しました!
これからも楽しみながら、ぼちぼち更新していきたいなと思います!

お知らせ

agexアドベントカレンダーやってます!(1月ですが)
他にもいろいろな記事が投稿されていますので、ぜひご覧ください!

agexアドベントカレンダー 2021 January(コンサルティング事業部)

この記事をシェアする
事業について詳しく知る

コンサルティング事業について詳しく知りたい方はこちら

RECOMMEND

おすすめ記事