[Flutter] Dribbbleデザイン、そのまま作ろう その14

#挨拶

こんにちは　皆さん！Dreamwalkerです。
明けましておめでとうございます。
令和2年の初投稿になります。

ほぼ2ヶ月ぶりに書き始めることになってしまいました。泣

#:fire:今回のデザイン:fire:

今回は14番目の「DribbbleのデザインをFlutterでやってみた」になります。
## Monochrome Shop App
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137182/3c655e22-d2f1-07ca-3d28-74f626e0a45e.png)

https://dribbble.com/shots/9954517-Monochrome-Shop-App/attachments/1989500?mode=media

#:clap:結果:clap:

##一つ目のページ。
![0_Screenshot_1581338497.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137182/03d2fd9b-41be-0427-8df4-e4a974223736.png)


##二つ目のページ。
![1_Screenshot_1581338494.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137182/31a479d2-da8e-0fbe-344a-f38ff580be64.png)

##三つ目のページ。
![1_Screenshot_1581338494.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137182/31a479d2-da8e-0fbe-344a-f38ff580be64.png)

#:fire:必要なライブラリー:fire:

1．`flutter_staggered_grid_view: ^0.3.0`

#:clap:全てのコード

##main。

```dart:main.dart
import 'package:flutter/material.dart';
void main() => runApp(MonochromeShopApp());
```
##MaterialApp Importer。

```dart:home_page.dart
class MonochromeShopApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MonochromeShopHome(),
    );
  }
}
```
##一つ目のページ。

個人的にお気に入りのデザインになります。
AppBarのタイトルはイメージがないので、Widgetで作ってみました。

###ShopMainPage

```dart:main_page.dart
class MonochromeShopHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Positioned(
            top: 34,
            left: 16,
            right: 16,
            child: Container(
              height: 100,
              child: Stack(
                children: <Widget>[
                  Center(
                    child: Text(
                      "LOSER",
                      style: TextStyle(
                        fontSize: 64,
                        letterSpacing: -6,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  Center(
                    child: Text(
                      "V",
                      style: TextStyle(
                        fontSize: 84,
                        letterSpacing: -8,
                        color: Colors.red,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  )
                ],
              ),
            ),
          ),
          Positioned(
            bottom: 32,
            right: 24,
            child: GestureDetector(
              onTap: () {
                Navigator.of(context).push(MaterialPageRoute(
                    builder: (context) => WomensBlazersPage()));
              },
              child: Container(
                height: 86,
                width: 86,
                decoration:
                    BoxDecoration(shape: BoxShape.circle, border: Border.all()),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      "explore",
                      style: TextStyle(fontSize: 16),
                    ),
                    SizedBox(
                      height: 4,
                    ),
                    Icon(
                      Icons.arrow_forward,
                      size: 20,
                    ),
                  ],
                ),
              ),
            ),
          ),
          Positioned(
            left: 4,
            bottom: 4,
            child: Container(
              width: MediaQuery.of(context).size.width / 2,
              height: MediaQuery.of(context).size.height / 3,
              decoration: BoxDecoration(
                  color: Colors.black,
                  image: DecorationImage(
                      image: NetworkImage(
                          "https://cdn.pixabay.com/photo/2014/01/04/14/35/fashion-238553__340.jpg"),
                      fit: BoxFit.cover)),
            ),
          ),
          Positioned(
            right: 0,
            bottom: MediaQuery.of(context).size.height / 3.5,
            child: Container(
              width: MediaQuery.of(context).size.width / 1.4,
              height: MediaQuery.of(context).size.height / 2.8,
              decoration: BoxDecoration(
                  color: Colors.black,
                  image: DecorationImage(
                    image: NetworkImage(
                        "https://cdn.pixabay.com/photo/2016/06/17/09/54/beauty-1462986__340.jpg"),
                    fit: BoxFit.cover,
                  ),
                  border: Border.all(color: Colors.white, width: 5)),
            ),
          ),
          Positioned(
            left: 0,
            top: 136,
            child: Container(
              width: MediaQuery.of(context).size.width / 2.4,
              height: MediaQuery.of(context).size.height / 3.4,
              decoration: BoxDecoration(
                  color: Colors.black,
                  border: Border.all(color: Colors.white, width: 5),
                  image: DecorationImage(
                      colorFilter:
                          ColorFilter.mode(Colors.black, BlendMode.color),
                      image: NetworkImage(
                          "https://cdn.pixabay.com/photo/2016/03/09/10/22/two-women-1246024__340.jpg"),
                      fit: BoxFit.cover)),
            ),
          ),
          Positioned(
            left: MediaQuery.of(context).size.width / 2.4 + 16,
            top: 136,
            right: 0,
            child: Container(
              height: 120,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  Text(
                    "Men's",
                    style: TextStyle(fontSize: 18),
                  ),
                  Text(
                    "Blazers",
                    style: TextStyle(fontSize: 18),
                  )
                ],
              ),
            ),
          ),
          Positioned(
            left: 16,
            top: MediaQuery.of(context).size.height / 2,
            child: Container(
              height: 100,
              width: 100,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Text(
                    "Women's",
                    style: TextStyle(fontSize: 18),
                  ),
                  Text(
                    "Blazers",
                    style: TextStyle(fontSize: 18),
                  ),
                ],
              ),
            ),
          ),
          Positioned(
            right: 16,
            left: MediaQuery.of(context).size.width / 2 + 24,
            bottom: 120,
            child: Container(
              height: 80,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  Text(
                    "Kid's",
                    style: TextStyle(fontSize: 18),
                  ),
                  Text(
                    "Blazers",
                    style: TextStyle(fontSize: 18),
                  )
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}
```

###二つ目のページ。
GridViewが魅力的で今回のポイントになります。

```dart:entered_page.dart
import 'package:flutter/material.dart';
import 'package:flutter_notebook_4th/ep355_monochrome_shop_app/detail_page.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

class Wear {
  String img;
  String price;
  String name;

  Wear({this.img, this.price, this.name});
}

List<Wear> items = [
  Wear(
      img:
          "https://cdn.pixabay.com/photo/2017/08/06/09/51/blazer-2590798__340.jpg",
      price: "134",
      name: "Retro Blazer"),
  Wear(
      img:
          "https://cdn.pixabay.com/photo/2017/08/10/08/00/suit-2619784__340.jpg",
      price: "365",
      name: "Fashion Blazer"),
  Wear(
      img:
          "https://cdn.pixabay.com/photo/2016/07/19/10/48/girl-1527959__340.jpg",
      price: "428",
      name: "Classic Blazer"),
  Wear(
      img:
          "https://cdn.pixabay.com/photo/2016/03/23/08/34/beautiful-1274361__340.jpg",
      price: "122",
      name: "Modern Blazer"),
  Wear(
      img:
          "https://cdn.pixabay.com/photo/2017/08/06/09/51/blazer-2590798__340.jpg",
      price: "134",
      name: "Retro Blazer"),
  Wear(
      img:
          "https://cdn.pixabay.com/photo/2017/08/06/09/51/blazer-2590798__340.jpg",
      price: "134",
      name: "Retro Blazer"),
  Wear(
      img:
      "https://cdn.pixabay.com/photo/2016/07/19/10/48/girl-1527959__340.jpg",
      price: "428",
      name: "Classic Blazer"),
  Wear(
      img:
      "https://cdn.pixabay.com/photo/2016/03/23/08/34/beautiful-1274361__340.jpg",
      price: "122",
      name: "Modern Blazer"),
  Wear(
      img:
      "https://cdn.pixabay.com/photo/2016/07/19/10/48/girl-1527959__340.jpg",
      price: "428",
      name: "Classic Blazer"),
  Wear(
      img:
      "https://cdn.pixabay.com/photo/2016/03/23/08/34/beautiful-1274361__340.jpg",
      price: "122",
      name: "Modern Blazer"),
  Wear(
      img:
      "https://cdn.pixabay.com/photo/2016/07/19/10/48/girl-1527959__340.jpg",
      price: "428",
      name: "Classic Blazer"),
  Wear(
      img:
      "https://cdn.pixabay.com/photo/2016/03/23/08/34/beautiful-1274361__340.jpg",
      price: "122",
      name: "Modern Blazer"),
];

class WomensBlazersPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: <Widget>[
            Expanded(
              flex: 2,
              child: Padding(
                padding: const EdgeInsets.only(right: 16, left: 16),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Icon(
                      Icons.arrow_back,
                      color: Colors.grey.shade500,
                    ),
                    Text(
                      "Women's Blazers",
                      style: TextStyle(fontSize: 18, color: Colors.black87),
                    ),
                    Icon(
                      Icons.search,
                      color: Colors.grey.shade500,
                    ),
                  ],
                ),
              ),
            ),
            Expanded(
              flex: 13,
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 16),
                child: StaggeredGridView.countBuilder(
                  itemBuilder: (context, index) {
                    return GestureDetector(
                      onTap: (){
                        Navigator.push(context, MaterialPageRoute(
                          builder: (context)=>ItemDetailPage(
                            wear: items[index],
                          )
                        ));
                      },
                      child: Container(
                        child: Column(
                          children: <Widget>[
                            Expanded(
                              flex: 8,
                              child: Container(
                                decoration: BoxDecoration(
                                    image: DecorationImage(
                                        image: NetworkImage(items[index].img),
                                        fit: BoxFit.cover,
                                        colorFilter: ColorFilter.mode(
                                            Colors.black, BlendMode.color))),
                              ),
                            ),
                            Expanded(
                              flex: 2,
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: <Widget>[
                                  Text("\$ ${items[index].price}"),
                                  Text("${items[index].name}")
                                ],
                              ),
                            )
                          ],
                        ),
                      ),
                    );
                  },
                  itemCount: items.length,
                  crossAxisCount: 4,
                  mainAxisSpacing: 16,
                  crossAxisSpacing: 16,
                  staggeredTileBuilder: (int index) {
                    return new StaggeredTile.count(2, index.isEven ? 4 : 3);
                  },
                ),
//                child: GridView.builder(
//                  itemCount:items.length,
//                  itemBuilder: (BuildContext context, int index) {
//                    return Container(
//                      child: Column(
//                        children: <Widget>[
//                          Expanded(
//                            flex: 8,
//                            child: Container(
//                              decoration: BoxDecoration(
//                                image: DecorationImage(
//                                  image: NetworkImage(
//                                    items[index].img
//                                  ),
//                                  fit: BoxFit.cover,
//                                  colorFilter: ColorFilter.mode(Colors.black, BlendMode.color)
//                                )
//                              ),
//                            ),
//                          ),
//                          Expanded(
//                            flex: 2,
//                            child: Row(
//                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
//                              children: <Widget>[
//                                Text("\$ ${items[index].price}"),
//                                Text("${items[index].name}")
//                              ],
//                            ),
//                          )
//                        ],
//                      ),
//                    ) ;
//                  },
//                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
//                    crossAxisCount: 2,
//                    childAspectRatio: 0.55,
//                    crossAxisSpacing: 16,
//                    mainAxisSpacing: 16
//                  ),
//
//                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

class searcher extends SearchDelegate {
  @override
  List<Widget> buildActions(BuildContext context) {
    // TODO: implement buildActions
    throw UnimplementedError();
  }

  @override
  Widget buildLeading(BuildContext context) {
    // TODO: implement buildLeading
    throw UnimplementedError();
  }

  @override
  Widget buildResults(BuildContext context) {
    // TODO: implement buildResults
    throw UnimplementedError();
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    // TODO: implement buildSuggestions
    throw UnimplementedError();
  }
}



```
##三つ目のページ。

###Product Detail Page

```dart:detail_page.dart
import 'package:flutter/material.dart';
import 'package:flutter_notebook_4th/ep355_monochrome_shop_app/entered_page.dart';

class ItemDetailPage extends StatelessWidget {
  final Wear wear;

  ItemDetailPage({this.wear});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Expanded(
              flex: 2,
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: 24),
                child: Row(
                  children: <Widget>[
                    IconButton(
                      icon: Icon(Icons.clear),
                      onPressed: () {
                        Navigator.pop(context);
                      },
                    ),
                    Spacer(),
                    Text(
                      "${wear.name}",
                      style: TextStyle(fontSize: 20),
                    ),
                    Spacer(),
                  ],
                ),
              ),
            ),
            Expanded(
              flex: 6,
              child: Container(
                decoration: BoxDecoration(
                  image: DecorationImage(
                      image: NetworkImage(wear.img),
                      fit: BoxFit.cover,
                      colorFilter:
                          ColorFilter.mode(Colors.black, BlendMode.color)),
                ),
              ),
            ),
            Expanded(
              flex: 1,
              child: Padding(
                padding: const EdgeInsets.only(left: 24),
                child: Row(
                  children: <Widget>[
                    Container(
                      margin: EdgeInsets.only(right: 12),
                      height: 4,
                      width: 24,
                      decoration: BoxDecoration(
                        color: Colors.blueGrey,
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.only(right: 12),
                      height: 4,
                      width: 24,
                      decoration: BoxDecoration(
                        color: Colors.grey,
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.only(right: 12),
                      height: 4,
                      width: 24,
                      decoration: BoxDecoration(
                        color: Colors.grey,
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.only(right: 12),
                      height: 4,
                      width: 24,
                      decoration: BoxDecoration(
                        color: Colors.grey,
                      ),
                    )
                  ],
                ),
              ),
            ),
            Expanded(
              flex: 1,
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 24),
                child: Text("No matter the occasion girl, get ready to edge\n"
                    "out your suits collection and be best dressed"),
              ),
            ),
            Expanded(
              flex: 7,
              child: Column(
                children: <Widget>[
                  Expanded(
                    flex: 1,
                    child: Container(
                      child: Row(
                        children: <Widget>[
                          Expanded(
                            flex: 10,
                            child: Container(
                              padding: EdgeInsets.only(left: 40),
                              height: double.infinity,
                              color: Colors.grey.shade200,
                              child: Align(
                                  alignment: Alignment.centerLeft,
                                  child: Text(
                                    "Detail",
                                    style: TextStyle(fontSize: 20),
                                  )),
                            ),
                          ),
                          Expanded(
                            flex: 2,
                            child: Container(
                              child: Center(
                                child: Icon(
                                  Icons.card_giftcard,
                                  color: Colors.grey.shade400,
                                ),
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                  Expanded(
                    flex: 1,
                    child: Container(
                      child: Row(
                        children: <Widget>[
                          Expanded(
                            flex: 10,
                            child: Container(
                              padding: EdgeInsets.only(left: 80),
                              height: double.infinity,
                              color: Colors.grey.shade400,
                              child: Align(
                                  alignment: Alignment.centerLeft,
                                  child: Text(
                                    "Delivery",
                                    style: TextStyle(fontSize: 20),
                                  )),
                            ),
                          ),
                          Expanded(
                            flex: 2,
                            child: Container(
                              child: Center(
                                child: Icon(
                                  Icons.favorite_border,
                                  color: Colors.grey.shade400,
                                ),
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                  Expanded(
                    flex: 1,
                    child: Container(
                      child: Row(
                        children: <Widget>[
                          Expanded(
                            flex: 10,
                            child: Container(
                              padding: EdgeInsets.only(left: 120),
                              height: double.infinity,
                              color: Colors.grey.shade600,
                              child: Align(
                                  alignment: Alignment.centerLeft,
                                  child: Text(
                                    "Discount",
                                    style: TextStyle(fontSize: 20),
                                  )),
                            ),
                          ),
                          Expanded(
                            flex: 2,
                            child: Container(
                              child: Center(
                                child: Icon(
                                  Icons.share,
                                  color: Colors.grey.shade400,
                                ),
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                  Expanded(
                    flex: 1,
                    child: Container(
                      child: Row(
                        children: <Widget>[
                          Expanded(
                            flex: 10,
                            child: Container(
                              child: Row(
                                children: <Widget>[
                                  Expanded(
                                    flex: 3,
                                    child: Container(
                                      color: Colors.white,
                                      child: Center(
                                        child: Text(
                                          "\$${wear.price}",
                                          style: TextStyle(
                                            fontSize: 20,
                                            fontWeight: FontWeight.bold,
                                          ),
                                        ),
                                      ),
                                    ),
                                  ),
                                  Expanded(
                                    flex: 8,
                                    child: Container(
                                      color: Colors.black,
                                      child: Center(
                                        child: Text(
                                          "Add to Cart",
                                          style: TextStyle(
                                              color: Colors.white,
                                              fontSize: 20),
                                        ),
                                      ),
                                    ),
                                  )
                                ],
                              ),
                            ),
                          ),
                          Expanded(
                            flex: 2,
                            child: Container(
                              child: Center(
                                child: Icon(
                                  Icons.more_horiz,
                                  color: Colors.grey.shade400,
                                ),
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                  Expanded(
                    flex: 1,
                    child: Container(),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}


```




#:clap:終わりに

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