Cuarto reto

Reto realizado!!!
Github: https://github.com/hernangiraldo89/flutter_travel

Screen Shot 2019-01-04 at 8.16.22 PM.png

user_deleted_390888

!! Reto Resuelto !!
GitHub: https://github.com/BrayanMamani/Trips

gucodero

Resultado

profile_trips.dart

import 'package:app/card_image_detail.dart';
import 'package:app/gradient_back.dart';
import 'package:flutter/material.dart';

class ProfileTrips extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final detailProfile = Padding(
      padding: const EdgeInsets.only(left: 12, top: 85, right: 12),
      child: Row(
        children: <Widget>[
          Container(
            height: 85,
            width: 85,
            decoration: BoxDecoration(
                image: DecorationImage(image: AssetImage("assets/profile.jpg")),
                shape: BoxShape.circle,
                border: Border.all(width: 2.0, color: Colors.white)),
          ),
          Padding(
            padding: const EdgeInsets.only(left: 12),
            child: Text.rich(TextSpan(children: [
              TextSpan(
                  text: "Pablo Rafael\n",
                  style: TextStyle(
                      color: Colors.white, fontSize: 16, fontFamily: "Lato")),
              TextSpan(
                  text: "[email protected]",
                  style: TextStyle(
                      color: Colors.white24, fontSize: 16, fontFamily: "Lato"))
            ])),
          )
        ],
      ),
    );

    final widgetMenu = Padding(
      padding: const EdgeInsets.only(top: 16),
      child: Row(
        children: <Widget>[
          createIconButton(Icons.bookmark_border, mini: true, active: true),
          createIconButton(Icons.card_giftcard, mini: true),
          createIconButton(Icons.add, active: true),
          createIconButton(Icons.mail_outline, mini: true),
          createIconButton(Icons.person, mini: true)
        ],
      ),
    );

    return Stack(
      children: <Widget>[
        GradientBack(
          "Profile",
          heigth: 380,
        ),
        Positioned(
          child: Icon(
            Icons.settings,
            size: 15,
            color: Colors.white38,
          ),
          right: 20,
          top: 45,
        ),
        Column(
          children: <Widget>[detailProfile, widgetMenu],
        ),
        ListView(
          padding: EdgeInsets.only(left: 12, right: 12, top: 270),
          children: <Widget>[
            CardImageDetail(
                "Knuckles Mountains Range",
                "Elit ipsum ex nostrud laborum magna anim culpa velit voluptate eiusmod.",
                "assets/place_1.jpg",
                13000),
            CardImageDetail(
                "Knuckles Mountains Range",
                "Elit ipsum ex nostrud laborum magna anim culpa velit voluptate eiusmod incididunt.",
                "assets/place_2.jpg",
                13000),
          ],
        )
      ],
    );
  }

  Widget createIconButton(IconData iconData,
      {bool mini = false, bool active = false}) {
    return Expanded(
      flex: 1,
      child: Container(
        height: mini ? 35 : 60,
        width: mini ? 35 : 60,
        child: Center(
          child: Icon(
            iconData,
            color: Color(0xFF584CD1),
            size: mini ? 20 : 50,
          ),
        ),
        decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: active ? Colors.white : Colors.white54),
      ),
    );
  }
}

card_image_detail.dart

import 'package:flutter/material.dart';

class CardImageDetail extends StatelessWidget{

  final String title;
  final String detail;
  final String pathImage;
  final int steps;

  CardImageDetail(this.title, this.detail,this.pathImage, this.steps);

  @override
  Widget build(BuildContext context) {

    final cardImage = Container(
      height: 230,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage(pathImage),
          fit: BoxFit.cover,
        ),
        borderRadius: BorderRadius.circular(20),
        boxShadow: [
          BoxShadow(
            blurRadius: 16,
            color: Colors.black26,
            offset: Offset(0, 10)
          )
        ]
      ),
    );

    final cardDetail =  Container(
      width: double.maxFinite,
      margin: EdgeInsets.only(left: 45, right: 45, top: 170, bottom: 30),
      padding: EdgeInsets.all(16),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(16),
        boxShadow: [
          BoxShadow(
            blurRadius: 16,
            color: Colors.black26,
            offset: Offset(0, 10)
          )
        ],
        color: Colors.white
      ),
      child: Stack(
        alignment: Alignment(1.0, 2.0),
        children: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                title,
                style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 8),
                child: Text(
                  detail,
                  style: TextStyle(
                    color: Colors.black45
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 8),
                child: Text(
                  "Steps $steps",
                  style: TextStyle(
                    fontSize: 17,
                    color: Color.fromRGBO(232, 166, 90, 1),
                    fontWeight: FontWeight.bold,
                  ),
                ),
              )
            ],
          ),
          FloatingActionButton(
            onPressed: null, 
            mini: true, 
            child: Icon(Icons.favorite), 
            backgroundColor: Color.fromRGBO(102, 216, 105, 1)
          )
        ],
      ),
    );

    return Container(
      child: Stack(
        children: <Widget>[
          cardImage,
          cardDetail
        ],
      ),
    );
  }
}

mxmghost

Muchísimas gracias :3

Juan José Rivera

Este es mi versión del reto.
Por si les interesa, para darle formato al número de pasos utilicé la librería intl.

import 'package:intl/intl.dart';

NumberFormat _formatter = NumberFormat("###,###");
String formattedSteps = _formatter.format(steps);```

Yake Nunura Baylon

Como se ve 😀

😁

Un Poco de Código

masahirolk

Aún por afinar algunas cositas

ericgomez

Screenshot_20201005_112307_com.esgomez.platzi_trips_app.jpg

Anexo Código por si necesitas ayuda
GitHub

renzo david chavez calderon

Por fin:

profile_trips.dart

import 'package:flutter/material.dart';
import 'package:platzi_trips_app/gradient_back.dart';
import 'package:platzi_trips_app/card_photo_detail.dart';


class ProfileTrips extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    final detailProfile = Padding(
      padding: const EdgeInsets.only(
        left: 12,
        top: 85,
        right: 12
      ),
      child: Row(
        children: <Widget>[
          Container(
            height: 85,
            width: 85,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage("assets/img/traveller.jpg"),
              ),
              shape: BoxShape.circle,
              border: Border.all(
                width: 2,
                color: Colors.white
              )
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(left: 12, right: 15),
            child: Text.rich(TextSpan(children: [
                TextSpan(
                  text: "Anita la Huerfanita\n",
                  style: TextStyle(color: Colors.white, fontSize: 16, fontFamily: "Lato"
                  )
                ),
                TextSpan(
                  text: "[email protected]",
                  style: TextStyle(
                    color: Colors.white24, fontSize: 16, fontFamily: "Lato")
                )
              ]
            )),
          )
        ],
      ),
    );

    Widget CreateIconButton(IconData iconData,
        {bool mini = false, bool active = false}) {
      return Expanded(
        flex: 1,
        child: Container(
          height: mini ? 35 : 55,
          width: mini ? 35 : 55,
          child: Center(
            child: Icon(
              iconData,
              color: Color(0xFF584CD1),
              size: mini ? 20 : 45,
            ),
          ),
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: active ? Colors.white : Colors.white54
          ),
        ),
      );
    }

    final widgetMenu = Padding(
      padding: const EdgeInsets.only(
          top: 16
      ),
      child: Row(
        children: <Widget>[
          CreateIconButton(Icons.bookmark_border, mini: true, active: true),
          CreateIconButton(Icons.card_giftcard, mini: true),
          CreateIconButton(Icons.add, active: true),
          CreateIconButton(Icons.mail_outline, mini: true),
          CreateIconButton(Icons.person, mini: true),
        ],
      ),
    );

    return Stack(
      children: <Widget>[
        GradientBack(
          "Profile",
          255
        ),
        Positioned(
          child: Icon(
            Icons.settings,
            size: 15,
            color: Colors.white38,
          ),
          right: 20,
            top: 45,
        ),
        Column(
          children: <Widget>[
            detailProfile,
            widgetMenu
          ],
        ),
        ListView(
          padding: EdgeInsets.only(
            left: 12,
            right: 12,
            top: 270
          ),
          children: <Widget>[
            CardPhotoDetail(
              "Knuckles Mountains Range",
              "Elit ipsum ex laborum magna anim culpa velit volutuos",
              110000006,
              "assets/img/mountain.jpeg",
            ),
            CardPhotoDetail(
              "Cabo Beach",
              "Elit ipsum ex laborum magna anim culpa velit volutuos",
              120000006,
              "assets/img/beach1.jpg",
            ),
            CardPhotoDetail(
              "River Falls Plate",
              "Elit ipsum ex laborum magna anim culpa velit volutuos",
              130000006,
              "assets/img/river.jpg",
            ),
          ],
        )
      ],
    );
  }
}

card_photo_datail.dart

import 'package:flutter/material.dart';

class CardPhotoDetail extends StatelessWidget {

  String title = "knuckles Mountains Range";
  String detail = "Hiking, Water fall hunting, Natural bath, Scenery & Photography";
  int steps = 123123123;
  String pathImage = "assets/img/beach.jpg";

  CardPhotoDetail(this.title, this.detail, this.steps, this.pathImage);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    final cardImage = Container(
      height: 230,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage(pathImage),
          fit: BoxFit.cover
        ),
        borderRadius: BorderRadius.circular(10),
        boxShadow: [
          BoxShadow(
            blurRadius: 16,
            color: Colors.black26,
            offset: Offset(0, 10)
          )
        ]
      ),
    );

    final cardDetail = Container(
      width: double.maxFinite,
      margin: EdgeInsets.only(
        left: 45,
        right: 45,
        top: 170,
        bottom: 30
      ),
      padding: EdgeInsets.all(16),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(16),
        boxShadow: [
          BoxShadow(
            blurRadius: 16,
            color: Colors.black26,
            offset: Offset(0, 10)
          )
        ],
        color: Colors.white
      ),
      child: Stack(
        alignment: Alignment(1, 2),
        children: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                title,
                style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                  fontFamily: "Lato"
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(
                  top: 8
                ),
                child: Text(
                  detail,
                  style: TextStyle(
                    color: Colors.black45,
                    fontFamily: "Lato"
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(
                  top: 8
                ),
                child: Text(
                  "Steps:  $steps",
                  style: TextStyle(
                    fontSize: 17,
                    color: Color.fromRGBO(232, 166, 90, 1),
                    fontWeight: FontWeight.bold,
                    fontFamily: "Lato"
                  ),
                ),
              )
            ],
          ),
          FloatingActionButton(
            onPressed: null,
            mini: true,
            child: Icon(Icons.favorite),
            backgroundColor: Color.fromRGBO(102, 216, 105, 1)
          )
        ],
      ),
    );

   return Container(
    child: Stack(
      children: <Widget>[
        cardImage,
        cardDetail
      ],
    ),
   );
  }
}

José Vinicio Flores Arias

Reto subido!
Github: https://github.com/Xfirepc/FlutterLolApp

Jhasmany Roque Chambi

Lo logre!

https://github.com/jhasmany/flutter_app

Oscar Torres

Con detallitos pero salió…

Francisco Javier Vázquez Paredes

Mi solución:

/** profile_trips.dart **/
import 'package:flutter/material.dart';
import 'profile_abbpar.dart';
import 'profile_places_list.dart';
class ProfileTrips extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Stack(
      children: <Widget>[
        ProfileAppBar("Profile"),
        ProfilePlacesList()
      ],
    );
  }
}

/** profile_appbar.dart **/
import 'package:flutter/material.dart';

class ProfileAppBar extends StatelessWidget{
  String title = "Popular";
  ProfileAppBar(this.title);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    final profileTitle = Container(
      margin: EdgeInsets.only(
        top: 37.0,
        left: 30.0
      ),
      child: Row(
        children: <Widget>[
          Expanded(
            child: Container(
              child: Text(
                title,
                style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.w900,
                  fontFamily: "Lato",
                  fontSize: 30.0,
                ),
                textAlign: TextAlign.left,
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.only(
                right: 20.0,
                top: 40.0
            ),
            child: Icon(
                Icons.settings,
                color: Color.fromRGBO(255, 255, 255, 0.5),
                size: 17.0
            ),
          )
        ],
      ),
    );

    final profilePicture = Container(
      margin: EdgeInsets.only(
        right: 20.0
      ),
      width: 77,
      height: 77,
      decoration: BoxDecoration(
        border: Border.all(
          color: Colors.white,
          width: 2.5
        ),
        shape: BoxShape.circle,
        color: Colors.white,
        image: DecorationImage(
          fit: BoxFit.cover,
          image: AssetImage("assets/images/profilepicture.png"),
        )
      ),
    );

    final profileInfo = Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(
          "Pathum Tzoo",
          style: TextStyle(
            color: Colors.white,
            fontSize: 17.33
          ),
        ),
        Text(
          "[email protected]",
          style: TextStyle(
            color: Color.fromRGBO(255, 255, 255, 0.32),
            fontSize: 13.19
          ),
        )
      ],
    );


    final profileName = Container(
      margin: EdgeInsets.only(
        top: 10.0,
        left: 30.0
      ),
      child: Row(
        children: <Widget>[
          profilePicture,
          profileInfo
        ],
      ),
    );

    final profileActionButtons = InkWell(
      child: Container(
          margin: EdgeInsets.only(
              top: 20.0,
              left: 15.0,
              right: 15.0
          ),
          child: Row(
            children: <Widget>[
              Expanded(
                child: Container(
                  width: 31,
                  height: 31,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Color.fromRGBO(255, 255, 255, 1),
                  ),
                  child: Icon(
                      Icons.bookmark_border,
                      size: 17.0,
                      color: Color.fromRGBO(66, 104, 211, 1)
                  ),
                ),
              ),
              Expanded(
                child: Container(
                  width: 31,
                  height: 31,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Color.fromRGBO(255, 255, 255, 1),
                  ),
                  child: Icon(
                      Icons.calendar_today,
                      size: 17.0,
                      color: Color.fromRGBO(66, 104, 211, 1)
                  ),
                ),
              ),
              Expanded(
                child: Container(
                  width: 51,
                  height: 51,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Color.fromRGBO(255, 255, 255, 1),
                  ),
                  child: Icon(
                      Icons.add,
                      size: 34.0,
                      color: Color.fromRGBO(66, 104, 211, 1)
                  ),
                ),
              ),
              Expanded(
                child: Container(
                  width: 31,
                  height: 31,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Color.fromRGBO(255, 255, 255, 1),
                  ),
                  child: Icon(
                      Icons.email,
                      size: 17.0,
                      color: Color.fromRGBO(66, 104, 211, 1)
                  ),
                ),
              ),
              Expanded(
                child: Container(
                  width: 31,
                  height: 31,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Color.fromRGBO(255, 255, 255, 1),
                  ),
                  child: Icon(
                      Icons.person,
                      size: 17.0,
                      color: Color.fromRGBO(66, 104, 211, 1)
                  ),
                ),
              ),
            ],
          )
      )
    );
    

    return Container(
      height: 374.0,
      decoration: BoxDecoration(
        image: DecorationImage(
          fit: BoxFit.cover,
          image: AssetImage(
            "assets/images/appbarprofile.png"
          )
        )
      ),
      child: Column(
        children: <Widget>[
          profileTitle,
          profileName,
          profileActionButtons
        ],
      )
    );
  }
}

/** profile_places_list.dart **/
import 'package:flutter/material.dart';
import 'profile_places.dart';

class ProfilePlacesList extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      margin: EdgeInsets.only(
          top: 280
      ),
      child: ListView(
        children: <Widget>[
          ProfilePlaces(
            "assets/images/sisal-01.jpg",
            "Paraíso Sisal","Hermosas playas ubicadas en el \nhermoso estado de Yucatán",
            "Distancia 64 kms."
          ),
          ProfilePlaces(
              "assets/images/beach_palm.jpeg",
              "Puerto Progreso","Hermosas playas ubicadas en el \nhermoso estado de Yucatán",
              "Distancia 32 kms."
          ),
          ProfilePlaces(
              "assets/images/mountain.jpeg",
              "Nevado de Toluca","Ubicadas en el estado de Toluca a mas de 3000 km de altura",
              "Distancia 3000 kms."
          ),
          ProfilePlaces(
              "assets/images/river.jpeg",
              "Cañon del Sumidero","Ubicado en el estado de Chiapas, \nconsiderado patrimonio de la humanidad.",
              "Distancia 1560 kms."
          ),
        ],
      )
    );
  }
}

/** profile_places.dart **/
import 'package:flutter/material.dart';

class ProfilePlaces extends StatelessWidget{
  String imagePath = "assets/images/sisal-01.jpg";
  String placeName = "Paraíso Sisal";
  String placeDescription = "Hermosas playas ubicadas en el \n"
                            "hermoso estado de Yucatán";
  String placeDistance = "Distancia 64 kms.";

  ProfilePlaces(this.imagePath, this.placeName, this.placeDescription, this.placeDistance);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    final imageCard = Container(
      height: 211.0,
      margin: EdgeInsets.only(
        left: 15.0,
        right: 15,
      ),
      decoration: BoxDecoration(
        color: Colors.red,
        shape: BoxShape.rectangle,
        borderRadius: BorderRadius.circular(20),
        image: DecorationImage(
          fit: BoxFit.cover,
          image: AssetImage(imagePath)
        ),
        boxShadow: <BoxShadow>[
          BoxShadow(
              color: Colors.black38,
              blurRadius: 15.0,
              offset: Offset(0.0, 7.0)
          )
        ]
      )
    );

    final imageCardText = Container(
      height: 98.883,
      width: 251,
      decoration: BoxDecoration(
        color: Colors.white,
        shape: BoxShape.rectangle,
        borderRadius: BorderRadius.circular(15),
        boxShadow: <BoxShadow>[
          BoxShadow(
              color: Colors.black38,
              blurRadius: 15.0,
              offset: Offset(0.0, 7.0)
          )
        ],
      ),
      child: Container(
        margin: EdgeInsets.only(
          left: 20,
          top: 15,
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Expanded(
              child: Text(
                placeName,
                style: TextStyle(
                  color: Color(0xFF231F20),
                  fontWeight: FontWeight.w900,
                  fontSize: 16.23,
                ),
              ),
            ),
            Expanded(
              child: Text(
                placeDescription,
                style: TextStyle(
                    color: Color(0xFF808285),
                    fontSize: 9,
                    fontWeight: FontWeight.w100
                ),
              ),
            ),
            Expanded(
              child: Text(
                placeDistance,
                style: TextStyle(
                    color: Color(0xFFF7941E),
                    fontSize: 12,
                    fontWeight: FontWeight.w500
                ),
              ),
            ),

          ],
        ),
      ),
    );

    return Container(
      margin: EdgeInsets.only(bottom: 100),
      child: Stack(
        alignment: Alignment(0, 1.8),
        children: <Widget>[
          imageCard,
          imageCardText
        ],
      )
    );
  }
}```

Joseph Michael Ciriaco Bermúdez

0ohm

Me costó mucho acostumbrarme a generar la vista, pero ya le pillé la gracia. Muy entretenido Flutter

Ivan Daniel Oviedo Alvarado

Repositorio: https://github.com/ioviedodev/trip_app.git

Julian Marcelo Quispe Lau Len

Github: https://github.com/Julianqll/Platzi-CursoFlutter-TripsApp

AMANDA MARCELAQUINTANAJULIO

Marco Aurelio Garcia Aviles

Reto Cumplido Papu!!!

Marco Alfonso Calderón Valdez

Maria Fernanda Cordobés Jaspe

Captura de Pantalla 2021-02-24 a la(s) 5.16.23 p. m..png

Reggie Barker

simulator_screenshot_55C336C7-4EA0-4EFF-835D-E22E8E518C53.png

Cristhian Camilo Pérez Estrada

Me costo bastante, pero al final lo termine ❤️

import 'package:flutter/material.dart';
import 'profile_places.dart';
import 'header_profile.dart';

class ProfileTrips extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          height: 350.0,
          decoration: BoxDecoration(
              gradient: LinearGradient(
                  colors: [Color(0xFF4268D3), Color(0xFF584CD1)],
                  begin: FractionalOffset(0.2, 0.0),
                  end: FractionalOffset(1.0, 0.6),
                  stops: [0.0, 0.6],
                  tileMode: TileMode.clamp)),
          alignment: Alignment(-0.9, -0.6),
        ),
        ProfilePlaces()
      ],
    );
  }
}```

`import ‘package:flutter/material.dart’;
import ‘package:flutter/cupertino.dart’;

import ‘floating_action_button_green.dart’;

class ProfileReview extends StatelessWidget {
String pathImage = “assets/bahamas1.jpeg”;
String placeName;
String placeDescription;
String placeSteps;
ProfileReview(
this.pathImage, this.placeDescription, this.placeName, this.placeSteps);

@override
Widget build(BuildContext context) {
final card = Container(
height: 200.0,
width: 380.0,
margin: EdgeInsets.only(top: 20.0, bottom: 40.0, right: 10.0, left: 10.0),
decoration: BoxDecoration(
image:
DecorationImage(fit: BoxFit.cover, image: AssetImage(pathImage)),
borderRadius: BorderRadius.all(Radius.circular(10.0)),
shape: BoxShape.rectangle,
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black38,
blurRadius: 15.0,
offset: Offset(0.0, 7.0))
]),
);

final place = Container(
  height: 100.0,
  width: 300.0,
  margin: EdgeInsets.only(
    top: 20.0,
    bottom: 40.0,
  ),
  decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.all(Radius.circular(10.0)),
      shape: BoxShape.rectangle,
      boxShadow: <BoxShadow>[
        BoxShadow(
            color: Colors.black38,
            blurRadius: 15.0,
            offset: Offset(0.0, 7.0))
      ]),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
        padding: EdgeInsets.only(
          top: 10.0,
          left: 10.0,
        ),
        child: Text(
          placeName,
          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25),
        ),
      ),
      Container(
        width: 230,
        padding: EdgeInsets.only(top: 5.0, left: 10.0),
        child: Text(
          placeDescription,
          style: TextStyle(fontSize: 14, color: Colors.black38),
        ),
      ),
      Container(
        padding: EdgeInsets.only(top: 5.0, left: 10.0),
        child: Text(
          placeSteps,
          style: TextStyle(fontSize: 14, color: Colors.deepOrange),
        ),
      )
    ],
  ),
);

final cardPlace = Stack(
  alignment: Alignment(0, 1.5),
  children: [card, place],
);

return Stack(
  alignment: Alignment(0.6, 0.9),
  children: [cardPlace, FloatingActionButtonGreen()],
);

}
}




```
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'profile_review.dart';
import 'profile_header.dart';

class ProfilePlaces extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 650.0,
      child: ListView(
        padding: EdgeInsets.all(5.0),
        children: [
          ProfileHeader("Cristhian Pérez E.", "[email protected]",
              "assets/img/camilo.jpg", "Profile"),
          ProfileReview(
              "assets/img/niagara.jpg",
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
              "Cataratas del Niagara",
              "Steps: 234234"),
          ProfileReview(
              "assets/img/nevadoruiz.jpeg",
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
              "Nevado del Ruiz",
              "Steps: 45764"),
          ProfileReview(
              "assets/img/santamarta.jpg",
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
              "Santa Marta",
              "Steps: 198789"),
        ],
      ),
    );
  }
}
```



```
import 'package:flutter/material.dart';

class ProfileHeader extends StatelessWidget {
  String usName = "Usuario";
  String usMail = "[email protected]";
  String photoPath = "assets/mount.jpg";
  String title = "Profile";

  ProfileHeader(this.usName, this.usMail, this.photoPath, this.title);
  @override
  Widget build(BuildContext context) {
    final userName = Container(
      margin: EdgeInsets.only(
        left: 20.0,
      ),
      child: Text(
        usName,
        textAlign: TextAlign.left,
        style: TextStyle(
            color: Colors.white,
            fontFamily: "Lato",
            fontSize: 20.0,
            fontWeight: FontWeight.w900),
      ),
    );

    final userMail = Container(
      margin: EdgeInsets.only(
        left: 20.0,
      ),
      child: Text(
        usMail,
        textAlign: TextAlign.left,
        style: TextStyle(
            color: Colors.white54,
            fontFamily: "Lato",
            fontSize: 13.0,
            fontWeight: FontWeight.w900),
      ),
    );

    final userData = Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [userName, userMail],
    );

    final userPhoto = Container(
      margin: EdgeInsets.only(
        top: 20.0,
        left: 20.0,
      ),
      width: 80.0,
      height: 80.0,
      decoration: BoxDecoration(
          shape: BoxShape.circle,
          image: DecorationImage(
            fit: BoxFit.cover,
            image: AssetImage(photoPath),
          )),
    );

    return Container(
      child: Column(
        children: [
          Row(
            children: [
              Container(
                padding: EdgeInsets.only(
                  top: 20.0,
                  left: 20.0,
                ),
                width: 320,
                alignment: Alignment.bottomLeft,
                child: Text(
                  title,
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 30.0,
                      fontFamily: "Lato",
                      fontWeight: FontWeight.bold),
                ),
              ),
              Container(
                alignment: Alignment.bottomRight,
                padding: EdgeInsets.only(
                  top: 20.0,
                ),
                child: Icon(Icons.settings, color: Colors.white),
              )
            ],
          ),
          Row(
            children: [userPhoto, userData],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Container(
                width: 50,
                height: 40,
                margin: EdgeInsets.only(
                  left: 20.0,
                  top: 20.0,
                ),
                decoration:
                    BoxDecoration(shape: BoxShape.circle, color: Colors.white),
                child: Icon(
                  Icons.bookmark_border,
                  color: Colors.indigo,
                ),
              ),
              Container(
                width: 50,
                height: 40,
                margin: EdgeInsets.only(
                  left: 20.0,
                  top: 20.0,
                ),
                decoration:
                    BoxDecoration(shape: BoxShape.circle, color: Colors.white),
                child: Icon(
                  Icons.card_giftcard,
                  color: Colors.indigo,
                ),
              ),
              Container(
                width: 70,
                height: 70,
                margin: EdgeInsets.only(
                  left: 20.0,
                  top: 20.0,
                ),
                decoration:
                    BoxDecoration(shape: BoxShape.circle, color: Colors.white),
                child: Icon(
                  Icons.add,
                  color: Colors.indigo,
                ),
              ),
              Container(
                width: 50,
                height: 40,
                margin: EdgeInsets.only(
                  left: 20.0,
                  top: 20.0,
                ),
                decoration:
                    BoxDecoration(shape: BoxShape.circle, color: Colors.white),
                child: Icon(
                  Icons.mail,
                  color: Colors.indigo,
                ),
              ),
              Container(
                width: 50,
                height: 40,
                margin: EdgeInsets.only(
                  left: 20.0,
                  top: 20.0,
                ),
                decoration:
                    BoxDecoration(shape: BoxShape.circle, color: Colors.white),
                child: Icon(
                  Icons.person,
                  color: Colors.indigo,
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}
```

Saúl Ramírez Islas

Con algunas cosas que no quedaron exactamente igual, pero creo que me acerque bastante! , de igual forma aproveche para llenar la pantalla de search jajaja
saludos!

José Castillo

¡Reto Cumplido! Me tarde poquito pero si salio.

Anthony Will Solsol Soplin

Reto cumplido ! 😄 😄 😄

Sebastián Barre

Finalizado cuarto reto.

Christian Ricardo Conchari Cabrera

Reto finalizado!

RewelME

Lian Ezequiel Mejia Gutierrez

Reto 4 Superado : D

Hector Sebastian Trejo Luna

Rodgue

Al fin, reto terminado.

Simulator Screen Shot - iPhone 11 - 2020-05-27 at 00.21.25.png

Creo que la parte que más se me complico fue la del gradiente de fondo pero lo resolví de la siguiente manera.

class GradientBackTwo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      height: 390.0,
      decoration: BoxDecoration(
        gradient: RadialGradient(
          colors: [
            Color(0xff584cd1),
            Color(0xff5461CC),
            Color(0xff516CCD),
            Color(0xff4268d3),
          ],
          radius: 4.5,
          stops: [0.1, 0.2, 0.21, 0.5],
          center: Alignment(1.3, 0.85),
          focalRadius: 1,
        ),
      ),
    );
  }
}```

Nicolás Martínez

A seguir avanzando!
.

.
.

hace un año

Listo

iScreen Shoter - Google Chrome - 230710150105.jpg

Mayra Lopez Sosa

jchiriboga

Reto completado
MI resultado gracias a la ayuda del curso y de los y las participantes:

Edwin Alfredo

Celeste Sierra

import 'package:flutter/material.dart';
import 'package:prueba/card_profile.dart';
import 'package:prueba/photo_profile.dart';
import 'title_profile.dart';
import 'gradient_back.dart';
import 'name_profile.dart';
import 'circle_bar.dart';
import 'card_profile_list.dart';

class ProfileTrips extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Stack(children: <Widget>[
      GradientBack('Profike'),
      TitleProfile('Profile'),
      ListView(
        children: <Widget>[NameProfile()],
      ),
      CircleBar(),
      CardProfileList()
    ]);
  }
}

Diego Orjuela

Logre terminar el reto, cada boton puede cambiar de opacidad si se le hizo click , tambien el list view puede ocultarse por debajo del appbar sin dejar de estar sobrepuesto al mismo.
Me gustaria compartir el codigo pero aun no se como mostrarlo en github.

import 'package:flutter/material.dart';

class ProfileButtomsAppBar extends StatefulWidget {
  @override
  _ProfileButtomsAppBar createState() => _ProfileButtomsAppBar();
}

class _ProfileButtomsAppBar extends State<ProfileButtomsAppBar> {
  List<double> _opacity = [0.5, 0.5, 0.5, 0.5, 0.5];

  void _OpacityClick(int number) {
    setState(() {
      _opacity[number] = _opacity[number] == 0.5 ? 1.0 : 0.5;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
            child: Container(
          height: 44,
          alignment: Alignment.centerLeft,
          child: InkWell(
              onTap: (() => _OpacityClick(0)),
              child: Opacity(
                opacity: _opacity[0],
                child: Container(
                  height: 35,
                  width: 35,
                  decoration: BoxDecoration(
                      shape: BoxShape.circle, color: Colors.white),
                  child: Icon(
                    Icons.bookmark_border,
                    color: Color(0xFF584CD1),
                    size: 25,
                  ),
                ),
              )),
        )),
        Expanded(
            child: Container(
                height: 44,
                alignment: Alignment.centerLeft,
                child: InkWell(
                    onTap: () => _OpacityClick(1),
                    child: Opacity(
                      opacity: _opacity[1],
                      child: Container(
                        height: 35,
                        width: 35,
                        decoration: BoxDecoration(
                            shape: BoxShape.circle, color: Colors.white),
                        child: Icon(
                          Icons.screenshot_monitor_outlined,
                          color: Color(0xFF584CD1),
                          size: 25,
                        ),
                      ),
                    )))),
        Expanded(
            child: Container(
                height: 55,
                child: InkWell(
                    onTap: () => _OpacityClick(2),
                    child: Opacity(
                      opacity: _opacity[2],
                      child: Container(
                        height: 55,
                        width: 55,
                        decoration: BoxDecoration(
                            shape: BoxShape.circle, color: Colors.white),
                        child: Icon(
                          Icons.add,
                          color: Color(0xFF584CD1),
                          size: 51,
                        ),
                      ),
                    )))),
        Expanded(
          child: Container(
              alignment: Alignment.centerRight,
              height: 44,
              child: InkWell(
                  onTap: () => _OpacityClick(3),
                  child: Opacity(
                    opacity: _opacity[3],
                    child: Container(
                      height: 35,
                      width: 35,
                      decoration: BoxDecoration(
                          shape: BoxShape.circle, color: Colors.white),
                      child: Icon(
                        Icons.email_outlined,
                        color: Color(0xFF584CD1),
                        size: 25,
                      ),
                    ),
                  ))),
        ),
        Expanded(
            child: Container(
                height: 44,
                alignment: Alignment.centerRight,
                child: InkWell(
                    onTap: () => _OpacityClick(4),
                    child: Opacity(
                      opacity: _opacity[4],
                      child: Container(
                        height: 35,
                        width: 35,
                        decoration: BoxDecoration(
                            shape: BoxShape.circle, color: Colors.white),
                        child: Icon(
                          Icons.person,
                          color: Color(0xFF584CD1),
                          size: 25,
                        ),
                      ),
                    )))),
      ],
    );
  }
}

Marcelo Loredo

Reto realizado.

Arturo Eddin Saavedra Gómez

Reto Terminado

José Vinicio Flores Arias

Para los que quieran hacer bonitos degradados sin romperse la cabeza me imaginé que existen gradientes para flutter como los hay para css se los dejo por aquí:
https://fluttergradientgenerator.com/

MISAEL CRUZ TREJO

Castellanos Mejia Brayan

Comparto mi solución al reto 4.

Joaquín Arturo Beltrán López

Saludos compañeros 😄
Les comparto mi reto finalizado:
https://github.com/JoaquinMX/PlatziFavoritePlacesByJoaquinMX

Paul Vazquez Cervantes

Muy buen reto…

Abril Darynka Tapia Sosa

Reto completado
Codigo en git: https://github.com/Darynka-Tapia/flutter_app

![](

Juan Carlos Velásquez Muñoz

Reto cumplido

William Cortes

![](

Cristian Saénz

sebastian-calapsu-carvajal

Screenshot_20220624_160519_com.example.person.jpg

Gregorio Vazquez

Cuarto reto!

Talento1 Zenta Group

Reto cumplido

Andrus Diaz

El gradiente lo cree con Path, aunque no se si existe algo mejor

Milton Alexander Elizalde Gaibor

Reto realizado

Samuel Sanchez Pardo

Reto listo:

Andrés Emanuel Jara

Reto Realizado !

Andres Badillo

¡¡Reto terminado!!

Aqui mi repositorio

Andres Gomez Hernandez

Screen Shot 2022-02-15 at 8.40.36 PM.png

Manuel Carbajal

No me quedo chido, pero ahí voy 😮 😛

Espero que con la practica me vaya saliendo mejor 😄

Captura de pantalla de 2022-01-06 14-07-18.png

Brandon Manzo

Reto realizado (2021)

Juan Carlos Mezquita Gutierrez

Rodrigo Daniel Poblete Paredes

Reto completado!!! 😄

Rivery2007

Reto cumplido 😄

CAMILO ANDRES SUAREZ RODRIGUEZ

Completado!

Marcela Beltran

Reto completado
https://github.com/neiderbuitrago/curso_platzi.git

Evelio Josue Escobar

Mi resultado final

Norberto Aguilar Ramírez

Reto completado, después de dos dias… : )

Luis Diego Aguilar Ruiz

Reto completado:

Ruben Bresler Camps

Excelente!! Me encantó este framework. Una belleza!!
Dejo el código en Github.
Aquí debajo una captura de como quedó.

Johan Camilo Andres Rivas Alvarez

Les comparto mi reto!!

Github: https://github.com/JohanRiv/Flutter_Basic_Platzi_challenge_4.git

![](

Edward Alberto Ropero Pérez

Dibb Shafick Israel Araujo

SHAFICK ISRAEL

Mussio Jair Cárdenas Palomo

La curva transparente en el background gradient me hizo falta

David Montoya

Javier Esteban Marin Lopez

Listo, aveces me falla el boton de Fav no se porque y deja de de funcionar completamete si lo envio a la esquina inferior izquierda

Oscar Fernando Diaz Anchay

Quedo bien creo yo 😄

Carlos Nassif Trejo Garcia

Mas o menos :b

Juan Sebastian Avila Rodriguez

Terminado!

Carlos.V

Simulator Screen Shot - iPhone 11 - 2020-10-06 at 00.48.17.png

😃 More!

Facundo Nicolás García Martoni

Reto completado! Comparto captura 😉

Bento Cussei

Captura de pantalla 2020-08-20 a las 5.29.38.png

hnavarrete

Lo logre, aquí el resultado:

Juan Felipe Lara Martinez

El Reto

Jhon Jairo Trillos Alvarez

Aquí mi reto: https://github.com/jjguitar/PlatziTrips.git

Simulator Screen Shot - iPhone X - 2019-04-16 at 21.30.19.png

Sebastian Chicoma Sandmann

Reto cumplido 😄 … again

Cesar Pelaez

¡Cuarto reto!

Andrés Felipe Chaparro Grimaldo

Reto completado
Repo Github

Luis Enrique Rendon Cortez

Reto cuatro cumplido

Victor Hugo Vázquez Gómez

¡Por fin!
GitHub

Luis Rogelio Reyes Hernandez

Reto completado!!

GitHub: https://github.com/LuisReyes98/platzi_trips_flutter

José Colmenares

Gracias Ann por tan buen curso !

Emmanuel Guerra