Flutter動画やってみよ(eBook)４

以下のYoutubeの動画を、実際になぞっていきます。

前回は、こちら。

Flutter動画やってみよ(eBook)３ - もっぺんプログラミング(´・ω・｀)

ベスト商品の掲載枠の追加

今日のベスト商品（Best of the day）を表示するエリアを追加していきます。

先程のSingleChildScrollView （商品を横スクロールさせていたWidget）の下に追加していきます。

), // ← SingleChildScrollViewの閉じカッコ
Padding(
  padding: EdgeInsets.symmetric(horizontal: 24), 
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      RichText(
        text: TextSpan(
          style: Theme.of(context).textTheme.display1,
          children: [
            TextSpan(text: "Best of the "),
            TextSpan(
              text: "day",
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
          ],
        ),
      ),
      Container(
        margin: EdgeInsets.symmetric(vertical: 20),
        width: double.infinity,
        height: 205,
        child: Stack(
          children: <Widget>[
            Positioned(
              bottom: 0, 
              left: 0,
              child: Container(
                height: 185, 
                width: double.infinity,
                decoration: BoxDecoration(
                  color: Color(0xFFEAEAEA).withOpacity(.45),
                  borderRadius: BorderRadius.circular(29),
                ),
              ),
            ),
            Positioned(
              right: 0,
              top: 0,
              child: Image.asset("assets/images/book-3.png"),
              width: size.width * .37,
            ),
          ],
        ),
      ),
    ],
  )
)

これで、こんな感じのエリアが追加されます。
(Best of the day からのエリア）

上下段レイアウトのために、Columnを追加しています。
タイトルはRichTextで表現し、本の画像を置いているグレーのエリアは、Containerを使っています。

このコンテナ内に、本の説明文・お気に入りボタン・評価を追加していきます。

まず、テキストの表示箇所をコンテナの少し内側になるように、コンテナ内にPaddingをセットします。

child: Container(
  padding: EdgeInsets.only(
    left: 24,
    top: 24,
    right: size.width * .35,
  ),

次に、コンテナのBoxDecoration の閉じタグ以降に以下を追加します。

), // ← BoxDecoration の閉じタグ
child: Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Text(
      "New York Time Best For 11th March 2020",
      style: TextStyle(
        fontSize: 9,
        color: kLightBlackColor,
      ),
    ),
    SizedBox(height: 5),
    Text(
      "How To Win \nFriends & Influence",
      //style: Theme.of(context).textTheme.title, // ← ビデオのコードはDuplicatedだったため、書き直しました。
      style: TextStyle(
      fontSize: 16,
      fontWeight: FontWeight.bold,
    ),
    Text(
      "Gary Venchuk",
      style: TextStyle(color: kLightBlackColor),
    ),
    SizedBox(height: 10),
    Row(
      children: <Widget>[],
    )
  ],
)

テキストの下にレーティングを追加します。
レーティングは、BookRating としてWigetに切り出しているので、それを使います。

説明テキストも合わせて以下のようなコードです。

Row(
  children: <Widget>[
    BookRating(score: 4.8), // ← BookRatingを追加
    SizedBox(width: 10),
    Expanded(
      child: Text(
        "When the earth was flat and everyone wanted to win the game of the best and people…",
        maxLines: 3,
        overflow: TextOverflow.ellipsis,
        style: TextStyle(
          fontSize: 10,
          color: kLightBlackColor,
        )
      )
    )
  ],
)

こんな感じになりました。
最後に、”Read”ボタンを追加します。

Positioned(
  right: 0,
  top: 0,
  child: Image.asset("assets/images/book-3.png"),
  width: size.width * .37,
),
Positioned( // ← ボタン追加
  bottom: 0,
  right: 0,
  child: SizedBox(
    height: 40,
    width: size.width * .3,
    child: TwoSideRoundedButton(
      text: "Read",
      radious: 24,
      press: () {},
    )
  )
)

最後に、コードの読みやすさのために Container を別メソッドに切り出します。
動画だと、ショートカットから「Extract Method」を選択して実行しています。

が、、、これが自分の環境だと出てこず…
手動で、メソッドに変換しました。

↓以下のような感じです。

                  ), // ← RichText の閉じタグ
                  bestOfTheDayCard(size, context), // ← もともと、Containerを記載していた箇所。
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// ↓ 切り出したメソッド。return の後ろに、Container のコードを貼り付けます。
Container bestOfTheDayCard(Size size, BuildContext context) {
  return Container(

次に、この下にオススメ欄を追加していきます。
つづきます。

たとえる技術