Help us understand the problem. What is going on with this article?

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

こんにちは!Flutter楽しんでますか? 
自分の周りにはFlutterの関心度が上がっています。
RNからFlutterで乗り換える人も見えますね。。

今回は9回目のDribbbleデザインをFlutterで作ってみた!になります。

:clap:今回のデザイン:clap:

image.png

https://dribbble.com/shots/7100483-Photography-App-Exploration/attachments/102771?mode=media

:clap:結果:clap:

デザイン 作った結果
image.png Screenshot_1568084105_1.png

:clap:全てのコード

main.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_notebook_second_story/generated/i18n.dart';

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

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

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          Positioned(
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
            child: Image.network(
              "https://cdn.pixabay.com/photo/2017/05/02/15/30/streets-2278471_960_720.jpg",
              fit: BoxFit.fitHeight,
            ),
          ),
          Positioned(
            left: 32,
            top: 48,
            child: Container(
              height: 38,
              width: 38,
              decoration: BoxDecoration(
                color: Colors.yellow,
              ),
              child: Center(
                child: Icon(
                  Icons.keyboard_arrow_left,
                  color: Colors.black,
                ),
              ),
            ),
          ),
          Positioned(
            right: 0,
            bottom: 0,
            child: Container(
              height: 400,
              width: MediaQuery.of(context).size.width - 48,
              child: Stack(
                children: <Widget>[
                  Positioned(
                    left: 24,
                    right: 0,
                    bottom: 0,
                    top: 16,
                    child: Container(
                      padding: EdgeInsets.all(24),
                      decoration: BoxDecoration(color: Colors.red[400]),
                      child: Column(

                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text(
                            "Summarecon Lit",
                            style: TextStyle(
                                color: Colors.white,
                                fontWeight: FontWeight.bold,
                                fontSize: 24),
                          ),
                          SizedBox(
                            height: 32,
                          ),
                          Row(
                            children: <Widget>[
                              Container(
                                height: 38,
                                width: 100,
                                decoration: BoxDecoration(
                                  color: Colors.white.withOpacity(0.1),
                                ),
                                child: Center(
                                  child: Text(
                                    "City",
                                    style: TextStyle(color: Colors.yellow[300]),
                                  ),
                                ),
                              ),
                              SizedBox(
                                width: 8,
                              ),
                              Container(
                                height: 38,
                                width: 100,
                                decoration: BoxDecoration(
                                  color: Colors.white.withOpacity(0.1),
                                ),
                                child: Center(
                                  child: Text(
                                    "Panorama",
                                    style: TextStyle(color: Colors.yellow[300]),
                                  ),
                                ),
                              ),
                            ],
                          ),
                          SizedBox(
                            height: 24,
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: <Widget>[
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: <Widget>[
                                  Text(
                                    "41+",
                                    style: TextStyle(
                                      fontSize: 28,
                                      color: Colors.white,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                  Text(
                                    "Spot Building",
                                    style: TextStyle(
                                        color: Colors.white.withOpacity(0.8)),
                                  )
                                ],
                              ),
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: <Widget>[
                                  Text(
                                    "10+",
                                    style: TextStyle(
                                      fontSize: 28,
                                      color: Colors.white,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                  Text(
                                    "Spot Popular",
                                    style: TextStyle(
                                        color: Colors.white.withOpacity(0.8)),
                                  )
                                ],
                              ),
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: <Widget>[
                                  Text(
                                    "5+",
                                    style: TextStyle(
                                      fontSize: 28,
                                      color: Colors.white,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                  Text(
                                    "Culinary Spot",
                                    style: TextStyle(
                                        color: Colors.white.withOpacity(0.8)),
                                  )
                                ],
                              )
                            ],
                          ),
                          SizedBox(height: 48,),
                          Text(
                              "Lorem ipsum dolor sit amet, consectetur adipisicing elit, "
                                  "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
                                  " e velit esse cillum dolore eu fugiat nulla pariatur. Excepteur",
                          style: TextStyle(
                            color: Colors.white.withOpacity(0.5)
                          ),),
                          SizedBox(height: 16,),
                          Text(
                            "Detail",
                            style: TextStyle(
                              color: Colors.,
                              fontWeight: FontWeight.bold
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  Positioned(
                    top: 16,
                    right: 16,
                    child: Container(
                      height: 50,
                      width: 58,
                      decoration: BoxDecoration(
                          color: Colors.transparent,
                          border: Border.all(color: Colors.grey, width: 0.5)),
                    ),
                  ),
                  Positioned(
                    top: 0,
                    right: 24,
                    child: Container(
                      height: 58,
                      width: 58,
                      decoration: BoxDecoration(color: Colors.yellow),
                      child: Center(
                        child: Icon(
                          Icons.location_searching,
                          color: Colors.black,
                        ),
                      ),
                    ),
                  ),
                  Positioned(
                    left: 24,
                    bottom: 0,
                    right: 0,
                    child: Container(
                      height: 160,
                      child: Row(
                        children: <Widget>[
                          Expanded(
                            flex: 5,
                            child: Container(
                              color: Colors.white.withOpacity(0.2),
                            ),
                          ),
                          Expanded(
                            flex: 4,
                            child: Container(
                              color: Colors.white.withOpacity(0.1),
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                  Positioned(
                    top: 84,
                    left: 0,
                    child: Container(
                      height: 1,
                      width: 58,
                      color: Colors.white,
                    ),
                  ),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}

:clap:終わりに

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away