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

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の設定
      ));

    ・
    ・
    ・

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

    ・
    ・
    ・