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

class BlogItem extends StatefulWidget {

  // パラメータを受け取る
  final double catchTopPos;
  final double catchHeight;
  final double titleHeight;
  final double width;

  const BlogItem(
      {Key key,
      this.catchTopPos,
      this.catchHeight,
      this.titleHeight,
      this.width})
      : 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(
        duration: Duration(milliseconds: 300),
        child: ConstrainedBox(
          constraints: BoxConstraints.expand( // 赤枠のサイズを指定する
            width: widget.width + 30,
            height: widget.catchTopPos +
                widget.catchHeight +
                widget.titleHeight –
                50,
          ),
          child: Stack(
            children: [
              Positioned( // 赤枠内でのアイキャッチ要素位置の指定
                top: widget.catchTopPos,
                right: 0,
                child: MouseRegion(
                  onEnter: (detail) => _onEnterHandler(detail, context),
                  onExit: (detail) => _onExitHandler(detail, context),
                  child: Container( // アイキャッチ要素のサイズを指定する
                    width: widget.width,
                    height: widget.catchHeight,
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        fit: BoxFit.cover,
                        image: AssetImage(‘lib/assets/images/eyecatch.png’),
                      ),
                    ),
                  ),
                ),
              ),
              Positioned( // 赤枠内でのタイトル要素位置の指定
                top: widget.catchTopPos + widget.catchHeight – 50,
                right: 30,
                child: MouseRegion(
                  onEnter: (detail) => _onEnterHandler(detail, context),
                  onExit: (detail) => _onExitHandler(detail, context),
                  child: Container( // タイトル要素のサイズを指定する
                    width: widget.width,
                    height: widget.titleHeight,
                    color: Colors.lightBlue[300],
                    child: Center(
                      child: Text(
                        “Title”,
                        style: TextStyle(color: Colors.white, fontSize: 40),
                      ),
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

    ・
    ・
    ・

}

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  3 ? 3 : 0;
      for (int i = origin + blogItems.length; i < origin + 3; i++) {
        blogItems.add(
          SizedBox( // 全体のブログアイテム数が3で割り切れない場合、「Row」Widgetに空要素を入れる
            width: width[i] + 30,
            height: catchTopPos[i] + catchHeight[i] + titleHeight[i] – 50,
          ),
        );
      }

      Rows.add(
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: […blogItems],
        ),
      );
    }
    return Rows;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView( // 画面をスクロールできるように「SingleChildScrollView」でラップする
        child: Column( // 「Column」を利用して、ブログアイテムを3個ずつ格納した「Row」を縦に配列する
          children: […_itemList(6)],
        ),
      ),
    );
  }
}