main.dart

// Copyright (c) 2019, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {

  Widget build(BuildContext context) {
  List<int> images = [1, 2, 3, 4, 5, 6, 7, 8];
    return Scaffold(
      body: Stack(
        children: <Widget>[
          GradientBack(),
          Container(
           margin: EdgeInsets.only(top: MediaQuery.of(context).size.height/2.4),
           width: double.infinity,
           height: double.infinity,
           decoration: BoxDecoration(
             borderRadius: BorderRadius.only(
               topLeft: Radius.circular(20),
               topRight: Radius.circular(20)
             ),
             color: Colors.white
           ),
            child: Wrap(
             children: <Widget>[
               for (var item in images) Card(number: item)
             ],
           ),
          )
        ]
      )
       // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
  
}

class GradientBack extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<int> images = [1, 2, 3, 4, 5, 6];
    return Container(
      height: MediaQuery.of(context).size.height * 4 / 7,
      width: double.infinity,
      decoration: BoxDecoration(
          gradient: LinearGradient(
              colors: [Color(0xFFA177FF), Color(0xFF5C64F4)],
//               begin: FractionalOffset(0.0, 0.0),
//               end: FractionalOffset(1.0, 0.0),
//               stops: [0.0, 1.5],
//               tileMode: TileMode.clamp,
          ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            margin: EdgeInsets.only(top: 40.0, left: 20.0),
            child: Text("< Feed",
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 15.0,
                    fontFamily: "Lato",
                    fontWeight: FontWeight.w400)),
          ),
          Perfil(),
          Container(
            height: 40.0,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Expanded(
                  child: ListTile(
                    title: Text(
                      "227",
                      textAlign: TextAlign.center,
                      style: TextStyle(
                          fontWeight: FontWeight.bold, color: Colors.white),
                    ),
                    subtitle: Text("posts",
                        textAlign: TextAlign.center,
                        style:
                            TextStyle(fontSize: 12.0, color: Colors.white30)),
                  ),
                ),
                Expanded(
                  child: ListTile(
                    title: Text(
                      "12,364",
                      textAlign: TextAlign.center,
                      style: TextStyle(
                          fontWeight: FontWeight.bold, color: Colors.white),
                    ),
                    subtitle: Text("followers",
                        textAlign: TextAlign.center,
                        style:
                            TextStyle(fontSize: 12.0, color: Colors.white30)),
                  ),
                ),
                Expanded(
                  child: ListTile(
                    title: Text(
                      "367",
                      textAlign: TextAlign.center,
                      style: TextStyle(
                          fontWeight: FontWeight.bold, color: Colors.white),
                    ),
                    subtitle: Text("follow",
                        textAlign: TextAlign.center,
                        style:
                            TextStyle(fontSize: 12.0, color: Colors.white30)),
                  ),
                ),
              ],
            ),
          ),
          Container(
            padding: EdgeInsets.only(top: 29.0, bottom: 10.0),
            child: Center(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  ButtonTheme(
                    minWidth: 240.0,
                    height: 40.0,
                    child: FlatButton.icon(
                        onPressed: () {},
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(4.0),
                        ),
                        color: Color.fromARGB(200, 94, 87, 193),
                        icon: Icon(
                          Icons.person_add,
                          size: 18,
                          color: Colors.white,
                        ),
                        label: Text(
                          'Follow',
                          style: TextStyle(
                              color: Colors.white, fontWeight: FontWeight.w400),
                        )),
                  ),
                  SizedBox(width: 7.0),
                  Material(
                    color: Colors.transparent,
                    child: Center(
                      child: Ink(
                        height: 40.0,
                        decoration: ShapeDecoration(
                          color: Color.fromARGB(200, 94, 87, 193),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(4.0),
                          ),
                        ),
                        child: Transform.rotate(
                          angle: -0.3,
                          child: IconButton(
                            onPressed: () {},
                            icon: Icon(Icons.send, size: 18),
                            color: Colors.white,
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.only(left: 20.0),
            height: 70.0,
            child: ListView(
              scrollDirection: Axis.horizontal,
              children: <Widget>[
                for (var item in images) CircleImages(number: item)
                // SizedBox(width: 15.0),
              ],
            ),
          )
        ],
      ),
      // alignment: Alignment(-0.9, -0.6),
    );
  }
}

class CircleImages extends StatefulWidget {
    CircleImages({Key key, @required this.number});
    final int number;

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

class _CircleImagesState extends State<CircleImages> {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Container(
          width: 55.0,
          height: 55.0,
          margin: EdgeInsets.only(right: 20.0),
          decoration: BoxDecoration(
            border: Border.all(
                color: Colors.white, width: 2.0, style: BorderStyle.solid),
            shape: BoxShape.circle,
            image: DecorationImage(
              fit: BoxFit.cover,
              image: NetworkImage(
                  'https://i.picsum.photos/id/${widget.number + 98}/300/300.jpg'),
            ),
          ),
        ),
        Container(
          width: 50.0,
          child: Text(
            'New',
            style: TextStyle(color: Colors.white60, fontSize: 12.0),
            textAlign: TextAlign.center,
          ),
        )
      ],
    );
  }
}
class Perfil extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    final userComment = Container(
      margin: EdgeInsets.only(
        left:20.0,
        right: 40.0
      ),
      child: Text(
        "Hi, I'm a traveller. Welcome, my dear friend :)",
        maxLines: 2,
        overflow: TextOverflow.ellipsis,
        textAlign: TextAlign.left,
        style: TextStyle(
          fontFamily: "Lato",
          fontSize: 15.0,
          color: Colors.white70
        ),
      ),
    );
    final userInfo = Container(
      margin: EdgeInsets.only(
        left:20.0,
        bottom: 10.0
      ),
      child: Text(
        "Travel",
        textAlign: TextAlign.left,
        style: TextStyle(
          fontFamily: "Lato",
          fontSize: 13.0,
          color: Colors.white60
        ),
      ),
    );
    final userName = Container(
      margin: EdgeInsets.only(
        left:20.0,
        top: 20.0
      ),
      child: Text(
        "Alice Ipsum",
        textAlign: TextAlign.left,
        style: TextStyle(
          fontFamily: "Lato",
          fontSize: 20.0,
          color: Colors.white
        ),
      ),
    );
    final userDetails = Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        userName,
        userInfo,
        userComment
      ],
    );
    final photo = Container(
      margin: EdgeInsets.only(
        top: 20.0,
        left: 20.0
      ),
      width: 80.0,
      height: 80.0,
      decoration: BoxDecoration(
        border: Border.all(
          color: Colors.white,
          width: 2.0,
          style: BorderStyle.solid
        ),
        shape: BoxShape.circle,
        image: DecorationImage(
          fit: BoxFit.cover,
          image: NetworkImage('https://www.socialtools.me/blog/wp-content/uploads/2016/04/foto-de-perfil.jpg')
        )
      ),
    );
    return Row(
      children: <Widget>[
        photo,
        Expanded(child: userDetails)
      ],
    );
  }
}

class Card extends StatefulWidget {
  Card({Key key, @required this.number});
    final int number;

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

class _CardState extends State<Card> {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(
        top: 15.0,
        left: 15.0
      ),
      width: 110.0,
      height: 110.0,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        border: Border.all(
          color: Colors.purple[100],
          width: 2.0,
          style: BorderStyle.solid
        ),
        image: DecorationImage(
          fit: BoxFit.cover,
          image: NetworkImage('https://i.picsum.photos/id/${widget.number + 158}/300/300.jpg')
        )
      ),
    );
  }
}