こんにちは！、6回目のDribbbleそのままデザインになります。
これ見て少しでも、役に立たら、嬉しいです。
動画。

今回作ってみるデザイン。

この中で真ん中のデザインを作ってみたいと思います！
作ってみた結果。

お先に作ってみた結果を見てみましょう
こんな感じになります。どうですか？笑
コードはこちら。

social.dart

import 'package:flutter/material.dart';
import 'package:flutter_notebook_second_story/note_utils/note_image.dart';
import 'package:video_player/video_player.dart';
class SocialVideoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  VideoPlayerController _controller;
  Future<void> _initializeVideoPlayerFuture;
  @override
  void initState() {
    // TODO: implement initState

    _controller = VideoPlayerController.network(
      'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4',
    )..addListener((){

    });
    _initializeVideoPlayerFuture = _controller.initialize().then((_){
      _controller.play();
    });
    super.initState();
  }
  @override
  void dispose() {
    // TODO: implement dispose
    _controller.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(),
            height: 180,
            child: Row(

              children: <Widget>[
                Expanded(
                  flex: 2,
                  child: IconButton(
                      padding: EdgeInsets.zero,
                      icon: Icon(Icons.menu),
                      iconSize: 38,
                      color: Colors.blue,
                      onPressed: () {}),
                ),
                Expanded(
                  flex: 8,
                    child: Container(
                      padding: EdgeInsets.only(top: 72),
                      color: Color(0xfff6f5fa),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text("My Favourites",style: TextStyle(
                            fontSize: 28,
                            fontWeight: FontWeight.w500,
                          ),),
                          SizedBox(height: 24,),
                          Container(
                            height: 32,
                            decoration: BoxDecoration(

                            ),
                            child: Center(
                              child: Stack(
                                children: <Widget>[
                                  Positioned(
                                    left: 0,
                                    right: 0,
                                    top: 16,
                                    child: Container(
                                      height: 1,
                                      decoration: BoxDecoration(
                                        color: Colors.grey,
                                      ),
                                    ),
                                  ),
                                  Positioned(
                                    left: 0,
                                    top: 9,
                                    child: Container(
                                      height: 16,
                                      width: 16,
                                      decoration: BoxDecoration(
                                        shape: BoxShape.circle,
                                        color: Colors.white,
                                        border: Border.all(
                                          color: Colors.blue,
                                          width: 4
                                        )
                                      ),
                                    ),
                                  ),
                                  Positioned(
                                    left: 24,
                                    top: 9,
                                    child: Container(
                                      height: 16,
                                      width: 16,
                                      decoration: BoxDecoration(
                                          shape: BoxShape.circle,
                                          color: Colors.white,
                                          border: Border.all(
                                              color: Colors.indigo,
                                              width: 4
                                          )
                                      ),
                                    ),
                                  ),
                                  Positioned(
                                    left: 48,
                                    top: 14,
                                    child: Container(
                                      height: 5,
                                      width: 160,
                                      decoration: BoxDecoration(
                                        color: Colors.lightBlue,
                                        borderRadius: BorderRadius.circular(8)
                                      ),
                                    ),
                                  ),
                                  Positioned(
                                    right: 24,
                                    top: 9,
                                    child: Container(
                                      height: 16,
                                      width: 16,
                                      decoration: BoxDecoration(
                                          shape: BoxShape.circle,
                                          color: Colors.white,
                                          border: Border.all(
                                              color: Colors.indigo,
                                              width: 4
                                          )
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          )
                        ],
                      ),
                    ),

                )
              ],
            ),
          ),
          Container(
            height: MediaQuery.of(context).size.height - 180,
            child: ListView(
              shrinkWrap: true,
              scrollDirection: Axis.vertical,
              physics: BouncingScrollPhysics(),
              children: <Widget>[
                Card(buttonColor: Colors.indigo,),
                Card(buttonColor: Colors.lightBlueAccent,),
                Card(buttonColor: Colors.indigo,),
              ],
            ),
          )
        ],
      ),
    );
  }
}
class Card extends StatelessWidget {
  final Color buttonColor;
  Card({@required this.buttonColor});

  @override
  Widget build(BuildContext context) {
    return Container(
      height:  (MediaQuery.of(context).size.height - 180) / 1.8,
      decoration: BoxDecoration(
        color: Colors.white
      ),
      child: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          Row(
            children: <Widget>[
              Expanded(
                flex: 2,
                child: Column(
                  children: <Widget>[
                    Container(
                      height: 90,
                      width: double.infinity,
                      decoration: BoxDecoration(
                        color: Color(0xfff6f5fa),
                      ),
                      child: Column(
                        mainAxisSize: MainAxisSize.max,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Text("246", style: TextStyle(
                            color: Colors.grey,
                            fontSize: 18
                          ),),
                          Text("likes",
                            style: TextStyle(
                                color: Colors.grey,
                                fontSize: 12
                            ),)
                        ],
                      ),
                    ),
                    Spacer(),
                    Container(
                      height: 84,
                      decoration: BoxDecoration(
                          color: Colors.white
                      ),
                      child: Center(
                        child: Container(
                          height: 38,
                          width: 38,
                          decoration: BoxDecoration(
                            border: Border.all(),
                            shape: BoxShape.circle
                          ),
                          child: Padding(
                            padding: const EdgeInsets.all(3.0),
                            child: CircleAvatar(
                              radius: 16,
                              backgroundImage: NetworkImage(dreamwalkerImg),
                            ),
                          ),
                        ),
                      ),
                    )
                  ],
                ),
              ),
              Expanded(
                flex: 8,
                child: Column(
                  children: <Widget>[
                    Expanded(
                      flex: 8,
                      child: Container(
                        decoration: BoxDecoration(
                          image: DecorationImage(image:
                          NetworkImage("https://cdn.pixabay.com/photo/2018/06/13/18/20/wave-3473335_960_720.jpg"),
                          fit: BoxFit.cover)
                        ),
                      ),
                    ),
                    Expanded(
                      flex: 3,
                      child: Container(
                        color: Color(0xfff6f5fa),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Padding(
                              padding: const EdgeInsets.only(right: 24),
                              child: Row(
                                children: <Widget>[
                                  Text("The coral beaches of Australia",
                                  style: TextStyle(
                                    fontSize: 14
                                  ),),
                                  Spacer(),
                                  IconButton(
                                    padding: EdgeInsets.zero,
                                    iconSize: 18,
                                    icon: Icon(Icons.more_vert,
                                    color: Colors.grey,),
                                    onPressed: (){},
                                  )
                                ],
                              ),
                            ),
                            Text("Dreamwalker 77K views",
                            style: TextStyle(
                              color: Colors.grey,
                              fontSize: 14
                            ),)
                          ],
                        ),
                      ),
                    ),

                  ],
                ),
              )
            ],
          ),
          Positioned(
            left: 46,
            top: 124,
            child: Container(
              height: 68,
              width: 68,
              decoration: BoxDecoration(
                color: buttonColor,
                border: Border.all(
                  color: Colors.white,
                  width: 5
                )
              ),
              child: Center(
                child: Icon(Icons.play_arrow,
                color: Colors.white,
                size: 32,),
              ),
            ),
          )
        ],
      ),
    );
  }
}
終わりに。。

6回目も無事に作ってみました。いかがでしたか
読んでいただきありがとうございます。