Cuarto reto

Viene el gran reto, es momento de poner a prueba todo lo que has aprendido. Analiza la siguiente interfaz, observa los widgets, colores, formas, mira que muchos de ellos los construímos durante el curso. Reutiliza todo lo necesario para construir la pantalla de Perfil de usuario, asígnala a su tap correspondiente y compártenos tus resultados en la sección de discusiones.

Hernán Giraldo

student•

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

legal

student•

¡Se ve genial!

Julio J Yépez

student•

¡Guao Hernán!
¡Te quedó de lujo!
Buen trabajo …

Usuario anónimo

user•

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

Ann Code

teacher•

Maravilloso Brayan. Te costó lograrlo?

Usuario anónimo

user•

No mucho porque me sirvió todas las habilidades adquiridas en este curso. Además con este reto mejore esas habilidades.

Pablo Rafael Cruz López

student•

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: &lt;Widget&gt;[
          Container(
            height: 85,
            width: 85,
            decoration: BoxDecoration(
                image: DecorationImage(image: AssetImage(&quot;assets/profile.jpg&quot;)),
                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: &quot;Pablo Rafael\n&quot;,
                  style: TextStyle(
                      color: Colors.white, fontSize: 16, fontFamily: &quot;Lato&quot;)),
              TextSpan(
                  text: &quot;pablocruz9988@gmail.com&quot;,
                  style: TextStyle(
                      color: Colors.white24, fontSize: 16, fontFamily: &quot;Lato&quot;))
            ])),
          )
        ],
      ),
    );

    final widgetMenu = Padding(
      padding: const EdgeInsets.only(top: 16),
      child: Row(
        children: &lt;Widget&gt;[
          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: &lt;Widget&gt;[
        GradientBack(
          &quot;Profile&quot;,
          heigth: 380,
        ),
        Positioned(
          child: Icon(
            Icons.settings,
            size: 15,
            color: Colors.white38,
          ),
          right: 20,
          top: 45,
        ),
        Column(
          children: &lt;Widget&gt;[detailProfile, widgetMenu],
        ),
        ListView(
          padding: EdgeInsets.only(left: 12, right: 12, top: 270),
          children: &lt;Widget&gt;[
            CardImageDetail(
                &quot;Knuckles Mountains Range&quot;,
                &quot;Elit ipsum ex nostrud laborum magna anim culpa velit voluptate eiusmod.&quot;,
                &quot;assets/place_1.jpg&quot;,
                13000),
            CardImageDetail(
                &quot;Knuckles Mountains Range&quot;,
                &quot;Elit ipsum ex nostrud laborum magna anim culpa velit voluptate eiusmod incididunt.&quot;,
                &quot;assets/place_2.jpg&quot;,
                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: &lt;Widget&gt;[
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: &lt;Widget&gt;[
              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(
                  &quot;Steps $steps&quot;,
                  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: &lt;Widget&gt;[
          cardImage,
          cardDetail
        ],
      ),
    );
  }
}

Martin Valdivia Franco

student•

Muchísimas gracias :3

Juan José Rivera

student•

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);```

Edgar Barragan

student•

buen dato, gracias!

Yake Nunura Baylon

student•

Como se ve 😀

😁

Un Poco de Código

Carlos Rubén Lombardi Kina

student•

Aún por afinar algunas cositas

Ann Code

teacher•

Estoy tan orgullosa de ustedes 😍
Te quedó genial

Eric Gomez

student•

Anexo Código por si necesitas ayuda GitHub

Oscar Morera García

student•

Gracias! Gran aporte.

renzo david chavez calderon

student•

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: "huerfanitanita99@hotmail.com",
                  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

student•

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

Jhasmany Roque Chambi

student•

Lo logre!

https://github.com/jhasmany/flutter_app

Oscar Torres

student•

Con detallitos pero salió…

Francisco Javier Vázquez Paredes

student•

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(
          "pathumtzoo1@gmail.com",
          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
        ],
      )
    );
  }
}```