コンサルティング事業 2021.01.18

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

「Stack」「Positioned」「Container」Widgetの組み合わせで、少し複雑なWidgetを作成する

前回までのおはなし

○ ヘッダー編
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) ~

今回のおはなし
今回は、弊社HPの「ブログアイテム」をFlutterでトレースした際のおはなし part1です。

分析してみる
いつものように、まずはトレース対象となる「ブログアイテム」の分析を行います。


この「ブログアイテム」を分析してみると、おおまかに下記の要素の組み合わせでブログアイテムが作られていることが分かります。

・ アイキャッチ画像がブログアイテム上部に配置される(以降、アイキャッチ要素)
・ アイキャッチ画像下部に、やや左側にずれる形でタイトルを含む矩形要素が配置される(以降、タイトル要素)
・ ブログアイテムは、表示時ズームインアニメーションで表示される
・ ブログアイテムは、マウスホバー時にアイテム全体がややズームされる

ブログアイテム自体の要素は、大まかにこれぐらいでしょうか。なんと5個のみです。
「スライダー」では、分析段階で要素が15個出てきていたので、少し勇気が湧いてきます。

再現してみる
では早速、再現していくことにします。
まずはアニメーションが含まれていない要素から実装を進めます。

アイキャッチ画像がアイテム上部に配置される
アイキャッチ画像下部に、やや左側にずれる形でタイトルを含む矩形要素が配置される
ここでの方針は、
「Stack」Widgetを用いて、アイキャッチ要素 / タイトル要素を「Positioned」Widgetで配置・重ね合わせを行うことにします。

まずはアイキャッチ要素を作成します。
ここは、スライダーのアイテムにも利用した「Container」Widgetを利用して実装していきます。

Container(
  width: /* 横幅 */,
  height: /* 縦幅 */,
  decoration: BoxDecoration(
    image: DecorationImage(
      fit: BoxFit.cover,
      image: AssetImage(/* 画像のパス */), // アイキャッチ画像を設定する
    ),
  ),
),

タイトル要素も同様に「Container」Widgetを利用して実装します。

Container(
  width: /* 横幅 */,
  height: /* 縦幅 */,
  color: Colors.lightBlue[300], // 分かりやすくするために色をつけておく
),

これらの「Container」WidgetをStack上に「Positioned」Widgetを使用して配置すると、下記のようにブログアイテムの基本的な形を作ることができます。(この時点では、各Widgetのサイズ・位置については固定値で仮指定しています)

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ConstrainedBox(
        constraints: const BoxConstraints.expand(
          width: 370,
          height: 380,
        ),
        child: Container(
          color: Colors.blueAccent,
          child: Stack(
            children: [
              Positioned(
                left: 70,
                top: 0,
                child: Container(
                  width: 300,
                  height: 250,
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      fit: BoxFit.cover,
                      image: AssetImage(‘lib/assets/images/eyecatch.png’),
                    ),
                  ),
                ),
              ),
              Positioned(
                left: 0,
                top: 180,
                child: Container(
                  width: 300,
                  height: 200,
                  color: Colors.lightBlue[300],
                  child: Center(
                    child: Text(
                      “Title”,
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 40
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

上記の実装で、できあがったものがこちら!!

(アイキャッチ画像は、単色では画像っぽさが出ないのでグラデーションを付けてみました)

このように、今までの記事で紹介した単純なWidgetの組み合わせで、ブログアイテムのおおまかな基本形を作成することができました。

今回はここまでとします。いままでの記事ではアニメーションをごりごり実装していたので、少し味気のない回になってしまいました。。Flutterでアニメーション無しの要素を作るのはこんなに簡単!!ということが少しでも伝わればうれしく思います。。!

次回は今回作成したブログアイテムにアニメーションをつけていきたいと思います。

[ここまでの成果]
アイキャッチ画像がブログアイテム上部に配置される(以降、アイキャッチ要素)
アイキャッチ画像下部に、やや左側にずれる形でタイトルを含む矩形要素が配置される(以降、タイトル要素)
・ ブログアイテムは、表示時ズームインアニメーションで表示される
・ ブログアイテムは、マウスホバー時にアイテム全体がややズームされる

今日の一言
ブログ1記事で紹介するちょうど良い分量を模索中。

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

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

RECOMMEND

おすすめ記事