Cuarto reto

Clase 42 de 45 • Curso de Flutter

Contenido del curso

Bienvenida e Introducción

Creando mi entorno de desarrollo

Interfaces en Flutter

Widgets sin estado en Flutter

Widgets con estado en Flutter

Fin del Curso

Tomar examen

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.

Comentarios

Hernán Giraldo

student•

Reto realizado!!!
Github:

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:

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:

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
        ],
      )
    );
  }
}```

Joseph Michael Ciriaco Bermudez

student•

0ohm

student•

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

Ivan Daniel Oviedo Alvarado

student•

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

Julian Marcelo Quispe Lau Len

student•

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

Robinson Torres

student•

crack

AMANDA MARCELAQUINTANAJULIO

student•

Marco Aurelio Garcia Aviles

student•

Reto Cumplido Papu!!!!

Marco Alfonso Calderón Valdez

student•

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),
      ),
    );
  }
}

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
        ],
      ),
    );
  }
}

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",
            ),
          ],
        )
      ],
    );
  }
}

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
      ],
    ),
   );
  }
}

/** 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
        ],
      )
    );
  }
}```

Cuarto reto

Bienvenida e Introducción

¡Renovaremos este curso!

Desarrollando en Flutter

¿Qué es Flutter?

Dart y Flutter

Sintaxis de Dart

¡Renovaremos este curso!

Flutter para desarrolladores Android, iOS y Xamarin.forms

Flutter para desarrolladores React Native

¿Cómo luce una app construída en Flutter?

Primer reto

Creando mi entorno de desarrollo

¡Renovaremos este curso!

Requerimientos de Hardware y Software

Instalando Flutter en Android Studio y Visual Studio Code

Composición de un proyecto en Flutter

Interfaces en Flutter

¡Renovaremos este curso! Te quedan unos días para concluirlo.

Programación Declarativa en Flutter

Estructura de un programa en Flutter

Hola Mundo en Flutter

Widgets básicos

Widgets con estado y sin estado

Análisis de Interfaces de Usuario en Flutter

Definiendo los layouts de nuestra interfaz

Segundo reto

Widgets sin estado en Flutter

¡Renovaremos este curso! Te quedan unos días para concluirlo.

Flutter Widgets: Container, Text, Icon, Row

Flutter Widgets: Column

Recursos en Flutter: Tipografías y Google Fonts

Widget Image

Widget Apilando Textos

Widgets Decorados

Widget Imagen Decorada

Widget Listview

Widget Button, InkWell

Tercer reto

Widgets con estado en Flutter

¡Renovaremos este curso! Te quedan unos días para concluirlo.

Botones en Flutter

Clase StatefulWidget: Cómo se compone

Widget Floating Action Button

Widgets BottomNavigationBar

Generando Navegación en BottomNavigationBar

Personalizando nuestro BottomNavigation Bar a Cupertino iOS BottomBar

Cuarto reto

Fin del Curso

¡Renovaremos este curso!

Conclusiones

¡Terminamos!