今回のデザイン

https://dribbble.com/shots/9110398-Gift-Shop/attachments/1183035?mode=media

結果

一つ目のページ。

　二つ目のページ。

必要なライブラリー

1．なし

全てのコード

main。

main.dart

import 'package:flutter/material.dart';
void main() => runApp(GiftShopApp());

MaterialApp Importer。

home_page.dart

import 'package:flutter/material.dart';
import '../gift_app/main_page.dart';

class GiftShopApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ShopMainPage(),
    );
  }
}

一つ目のページ。

ShopMainPage

BottomNavigationBarがあるので、IndexedStackを使ってインプリメントしてみました。

main_page.dart

import 'package:flutter/material.dart';
import '/gift_app/main_cart_page.dart';
import '/gift_app/main_home_page.dart';

class ShopMainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<ShopMainPage> {
  int pageIndex = 0;

  final _page = [
    MainHomePage(),
    MainCartPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: pageIndex,
        children: _page,
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: pageIndex,
        type: BottomNavigationBarType.fixed,
        selectedItemColor: Colors.black,
        unselectedItemColor: Colors.grey,
        onTap: (newValue) {
          setState(() {
            pageIndex = newValue;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(
              Icons.home,
            ),
            title: Text("Home"),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.add_shopping_cart,
            ),
            title: Text("Cart"),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.archive,
            ),
            title: Text("Archive"),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.share,
            ),
            title: Text("Share"),
          )
        ],
      ),
    );
  }
}

Main Home Page Widget

main_home_page.dart


import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import '/gift_app/dad_gift_card.dart';
import '/gift_app/filter_icon.dart';
import '/gift_app/moms_gift_card.dart';
import '/gift_app/top_menu_io.dart';

class MainHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Positioned(
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          child: Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                  image: NetworkImage(
                      "https://cdn.pixabay.com/photo/2019/12/14/20/03/christmas-balls-4695657_960_720.jpg"),
                  fit: BoxFit.cover,
                  colorFilter: ColorFilter.mode(
                      Colors.black.withOpacity(0.6), BlendMode.darken)),
            ),
            child: SingleChildScrollView(
              child: Column(
                children: <Widget>[
                  Container(
                    height: MediaQuery.of(context).size.height / 7,
                    child: Center(
                      child: Text(
                        "Christmas Gifts",
                        style: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.w600,
                          fontSize: 24,
                        ),
                      ),
                    ),
                  ),
                  Container(
                      padding: EdgeInsets.only(left: 24),
                      height: MediaQuery.of(context).size.height / 8,
                      child: ListView(
                        scrollDirection: Axis.horizontal,
                        children: <Widget>[
                          TopBarItem(
                            isSelected: true,
                          ),
                          TopBarItem(
                            isSelected: false,
                          ),
                          TopBarItem(
                            isSelected: false,
                          ),
                          TopBarItem(
                            isSelected: false,
                          ),
                          TopBarItem(
                            isSelected: false,
                          ),
                        ],
                      )),
                  Container(
                      padding: EdgeInsets.only(left: 24, top: 24),
                      height: MediaQuery.of(context).size.height / 2,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text(
                            "Mom Gifts",
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 24,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          SizedBox(
                            height: 8,
                          ),
                          Padding(
                            padding: const EdgeInsets.only(right: 24),
                            child: Row(
                              children: <Widget>[
                                Text(
                                  "Filters:",
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 22,
                                  ),
                                ),
                                SizedBox(
                                  width: 9,
                                ),
                                Text(
                                  "Soup; Cream; Cleanser;",
                                  style: TextStyle(
                                    fontSize: 16,
                                    color: Colors.white,
                                  ),
                                ),
                                Spacer(),
                                FilterIcons(),
                              ],
                            ),
                          ),
                          Container(
                              padding: EdgeInsets.only(top: 6),
                              height: MediaQuery.of(context).size.height / 2.7,
                              child: ListView(
                                scrollDirection: Axis.horizontal,
                                children: <Widget>[
                                  MomsGiftCard(
                                    title: "Soup",
                                    price: "23.54",
                                    imgPath: "https://cdn.pixabay.com/photo/2016/02/19/10/40/soap-1209344__340.jpg",
                                  ),
                                  MomsGiftCard(
                                    title: "Cleanser",
                                    price: "43.90",
                                    imgPath: "https://cdn.pixabay.com/photo/2016/02/19/10/40/soap-1209344__340.jpg",
                                  ),
                                  MomsGiftCard(
                                    title: "Shower?",
                                    price: "99.99",
                                    imgPath: "https://cdn.pixabay.com/photo/2016/02/19/10/40/soap-1209344__340.jpg",
                                  ),
                                ],
                              ))
                        ],
                      )),
                  Container(
                      padding: EdgeInsets.only(left: 24, top: 24),
                      height: MediaQuery.of(context).size.height / 2,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text(
                            "Dad Gifts",
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 24,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          SizedBox(
                            height: 8,
                          ),
                          Padding(
                            padding: const EdgeInsets.only(right: 24),
                            child: Row(
                              children: <Widget>[
                                Text(
                                  "Filters:",
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 22,
                                  ),
                                ),
                                SizedBox(
                                  width: 9,
                                ),
                                Text(
                                  "Sweater; Hoodie; Gel; Hat;",
                                  style: TextStyle(
                                    fontSize: 16,
                                    color: Colors.white,
                                  ),
                                ),
                                Spacer(),
                                FilterIcons(),
                              ],
                            ),
                          ),
                          Container(
                              padding: EdgeInsets.only(top: 6),
                              height: MediaQuery.of(context).size.height / 2.7,
                              child: ListView(
                                scrollDirection: Axis.horizontal,
                                children: <Widget>[
                                  DadGiftCard(
                                    title: "Sweater",
                                    price: "23.54",
                                    imgPath: "https://cdn.pixabay.com/photo/2016/03/27/19/31/fashion-1283863__340.jpg",
                                  ),
                                  DadGiftCard(
                                    title: "Hoodie",
                                    price: "43.90",
                                    imgPath: "https://cdn.pixabay.com/photo/2015/03/26/10/10/surfer-691031__340.jpg",
                                  ),
                                  DadGiftCard(
                                    title: "Gel",
                                    price: "99.99",
                                    imgPath: "https://cdn.pixabay.com/photo/2016/03/27/19/31/fashion-1283863__340.jpg",
                                  ),
                                ],
                              ))
                        ],
                      )),
                ],
              ),
            ),
          ),
        )
      ],
    );
  }
}

二つ目のページ。

Product Detail Page

ユーザーから選択してもらうデータをDetailsページにあげます。
StatefulWidgetをして作りましたが、
状態管理が必要ないならStatelessWidgetにしても問題ないです。

product_detail_page.dart

import 'package:flutter/material.dart';
import '/gift_app/dad_gift_card.dart';

class ProductDetailPage extends StatefulWidget {
  final String title;
  final String product;
  final String price;
  final String imgPath;

  ProductDetailPage({this.title, this.product, this.price, this.imgPath});

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

class _ProductDetailPageState extends State<ProductDetailPage> {
  int pageIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Positioned(
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
            child: Container(
              decoration: BoxDecoration(
                  image: DecorationImage(
                image: NetworkImage(
                  "https://cdn.pixabay.com/photo/2019/12/16/07/41/winter-4698763__340.jpg",
                ),
                colorFilter: ColorFilter.mode(
                  Colors.black.withOpacity(0.65),
                  BlendMode.darken,
                ),
                fit: BoxFit.cover,
              )),
            ),
          ),
          Positioned(
            left: 0,
            right: 0,
            bottom: 0,
            top: 32,
            child: SingleChildScrollView(
              child: Column(
                children: <Widget>[
                  Container(
                    height: MediaQuery.of(context).size.height / 8,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        Text(
                          widget.title,
                          style: TextStyle(color: Colors.grey),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(right: 48),
                          child: Row(
                            children: <Widget>[
                              IconButton(
                                icon: Icon(Icons.arrow_back),
                                color: Colors.white,
                                onPressed: () {
                                  Navigator.of(context).pop();
                                },
                              ),
                              Spacer(),
                              Text(
                                "Gel Description",
                                style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 21,
                                    fontWeight: FontWeight.w700),
                              ),
                              Spacer()
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.symmetric(horizontal: 24),
                    height: MediaQuery.of(context).size.height / 2.7,
                    child: Column(
                      children: <Widget>[
                        Expanded(
                          flex: 10,
                          child: Row(
                            children: <Widget>[
                              Expanded(
                                flex: 4,
                                child: Container(
                                  margin:
                                      EdgeInsets.only(right: 12, bottom: 12),
                                  decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(16),
                                      image: DecorationImage(
                                        image: NetworkImage(widget.imgPath),
                                        fit: BoxFit.cover,
                                      )),
                                ),
                              ),
                              Expanded(
                                flex: 5,
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: <Widget>[
                                    Text(
                                      "Honest Beauty",
                                      style: TextStyle(
                                          color: Colors.white, fontSize: 16),
                                    ),
                                    SizedBox(
                                      height: 8,
                                    ),
                                    Text(
                                      widget.product,
                                      style: TextStyle(
                                          color: Colors.white, fontSize: 20),
                                    ),
                                    SizedBox(
                                      height: 16,
                                    ),
                                    Padding(
                                      padding: const EdgeInsets.only(right: 16),
                                      child: Text(
                                        "A unique cleansing gel that removes impurities and unclogs pores for a brighter skin appearance",
                                        style: TextStyle(
                                            color:
                                                Colors.white.withOpacity(0.8),
                                            letterSpacing: 1.5,
                                            fontWeight: FontWeight.w300,
                                            fontSize: 13,
                                            wordSpacing: 1),
                                      ),
                                    ),
                                    Spacer(),
                                    Padding(
                                      padding:
                                          const EdgeInsets.only(bottom: 16),
                                      child: Row(
                                        children: <Widget>[
                                          Expanded(
                                            flex: 1,
                                            child: Container(
                                              height: 38,
                                              margin:
                                                  EdgeInsets.only(right: 16),
                                              padding: EdgeInsets.all(3),
                                              decoration: BoxDecoration(
                                                  borderRadius:
                                                      BorderRadius.circular(12),
                                                  border: Border.all(
                                                    color: Colors.white,
                                                  )),
                                              child: Container(
                                                decoration: BoxDecoration(
                                                    color: Colors.white,
                                                    borderRadius:
                                                        BorderRadius.circular(
                                                            8)),
                                                padding: EdgeInsets.all(4),
                                                child: Row(
                                                  children: <Widget>[
                                                    Text(
                                                      "QTY",
                                                      style: TextStyle(
                                                        color: Colors.black,
                                                        fontWeight:
                                                            FontWeight.bold,
                                                      ),
                                                    ),
                                                    Spacer(),
                                                    Text(
                                                      "1",
                                                      style: TextStyle(
                                                        color: Colors.black,
                                                        fontWeight:
                                                            FontWeight.bold,
                                                      ),
                                                    ),
                                                    Icon(
                                                      Icons.keyboard_arrow_down,
                                                      size: 14,
                                                    )
                                                  ],
                                                ),
                                              ),
                                            ),
                                          ),
                                          Expanded(
                                            flex: 1,
                                            child: Container(
                                              height: 38,
                                              margin:
                                                  EdgeInsets.only(right: 16),
                                              padding: EdgeInsets.all(3),
                                              decoration: BoxDecoration(
                                                  borderRadius:
                                                      BorderRadius.circular(12),
                                                  border: Border.all(
                                                    color: Colors.white,
                                                  )),
                                              child: Container(
                                                  decoration: BoxDecoration(
                                                      color: Colors.white,
                                                      borderRadius:
                                                          BorderRadius.circular(
                                                              8)),
                                                  padding: EdgeInsets.all(4),
                                                  child: Center(
                                                    child: Text(
                                                      "Wish List",
                                                      style: TextStyle(
                                                          fontWeight:
                                                              FontWeight.bold),
                                                    ),
                                                  )),
                                            ),
                                          ),
                                        ],
                                      ),
                                    )
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                        Expanded(
                          flex: 3,
                          child: Container(
                            margin: EdgeInsets.symmetric(vertical: 8),
                            decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.circular(16)),
                            child: Center(
                              child: Text(
                                "Purchase for \$${widget.price}",
                                style: TextStyle(
                                    fontSize: 20, fontWeight: FontWeight.w500),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    padding: EdgeInsets.only(left: 24, top: 8),
                    height: MediaQuery.of(context).size.height / 2.5,
                    width: MediaQuery.of(context).size.width,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisSize: MainAxisSize.max,
                      children: <Widget>[
                        Text(
                          "Compatible with:",
                          style: TextStyle(color: Colors.white, fontSize: 22),
                        ),
                        Container(
                          height: MediaQuery.of(context).size.height / 3,
                          margin: EdgeInsets.only(top: 8),
                          child: ListView(
                            scrollDirection: Axis.horizontal,
                            children: <Widget>[
                              DadGiftCard(
                                title: "Towel",
                                price: "11.45",
                                imgPath:
                                    "https://cdn.pixabay.com/photo/2018/01/07/04/21/lavender-3066531__340.jpg",
                              ),
                              DadGiftCard(
                                title: "Cream",
                                price: "68.80",
                                imgPath:
                                    "https://cdn.pixabay.com/photo/2018/06/25/13/00/cream-3496778__340.jpg",
                              ),
                              DadGiftCard(
                                title: "Balm",
                                price: "11.45",
                                imgPath:
                                    "https://cdn.pixabay.com/photo/2018/01/07/04/21/lavender-3066531__340.jpg",
                              ),
                            ],
                          ),
                        )
                      ],
                    ),
                  )
                ],
              ),
            ),
          )
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: pageIndex,
        type: BottomNavigationBarType.fixed,
        selectedItemColor: Colors.black,
        unselectedItemColor: Colors.grey,
        onTap: (newValue) {
          setState(() {
            pageIndex = newValue;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(
              Icons.home,
            ),
            title: Text("Home"),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.add_shopping_cart,
            ),
            title: Text("Cart"),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.archive,
            ),
            title: Text("Archive"),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.share,
            ),
            title: Text("Share"),
          )
        ],
      ),
    );
  }
}

終わりに

今回も読んでくださってありがとうございます。