Curso de Flutter

Curso de Flutter

Anahí Salgado Díaz de la Vega

Anahí Salgado Díaz de la Vega

Cuarto reto

36/38

Lectura

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.

Captura de pantalla 2018-12-28 a la(s) 13.22.27.png

Aportes 147

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

¡Listo!

Si necesitan saber como hacer el CurvedNavigationBar https://pub.dev/packages/curved_navigation_bar

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

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

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

Muchísimas gracias :3

Listo

Aún por afinar algunas cositas

Anexo Código por si necesitas ayuda
GitHub

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

Como se ve 😀

😁

Un Poco de Código

Con detallitos pero salió…

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


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

Reto Cumplido Papu!!!

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

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!

¡Reto Cumplido! Me tarde poquito pero si salio.

Reto cumplido ! 😄 😄 😄

Finalizado cuarto reto.

Reto finalizado!

Reto 4 Superado : D

Al fin, reto terminado.

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

A seguir avanzando!
.

.
.

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

Reto realizado

Reto Realizado !

¡¡Reto terminado!!

Aqui mi repositorio

No me quedo chido, pero ahí voy 😮 😛

Espero que con la practica me vaya saliendo mejor 😄

Reto realizado (2021)

Reto completado!!! 😄

Reto cumplido 😄

Completado!

Mi resultado final

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

Reto completado:

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

SHAFICK ISRAEL

La curva transparente en el background gradient me hizo falta

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

Quedo bien creo yo 😄

Mas o menos :b

Terminado!

😃 More!

Reto completado! Comparto captura 😉

Lo logre, aquí el resultado:

El Reto

Reto cumplido 😄 … again

¡Cuarto reto!

Reto completado
Repo Github

Reto cuatro cumplido

¡Por fin!
GitHub

Gracias Ann por tan buen curso !

Hice en 4/5 horas lo que en nativo me hubiera llevado todo el día. Aunque también ayudó tener widgets y estilos hechos (las sombras y el fab de like).

Me queda la duda de como generar el aspecto circular en el gradiente del header 🤔🤔.

Reto listo! Github repo

😃 me tomo algo de tiempo, pero estoy feliz con el resultado

¡Reto cumplido!
GitHub

Reto complido

¡Hola a todos!

Por fin pude completar el reto. Gracias @anncode, aprendí muchísimo.

Les dejo mi propuesta del reto:

Listo!

Reto cumplido. Cualquier consulta no duden en escribir.

Reto Completado !

Esta si estuvo densita

Me dió un par de problemas, pero pude hacerlo (no me servía el botón de favorito, al parecer por una mala distrubución de espacio, a pesar de estar delante en el Stack).

Captura:

![](

Código:

Widget que representa la barra de información de cada lugar:

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

class PlaceInformation extends StatelessWidget {

  final _title;
  final _description;
  final _steps;

  PlaceInformation(this._title, this._description, this._steps);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 250,
        height: 115,
        decoration: BoxDecoration(
          shape: BoxShape.rectangle,
          borderRadius: BorderRadius.all(Radius.circular(10)),
          color: Colors.white,
          boxShadow: <BoxShadow>[
            BoxShadow(
              color: Colors.black,
              blurRadius: 15,
              offset: Offset(0.0,7.0),
            )
          ],
        ),
        child: Container (
          width: 220,
          margin: EdgeInsets.all(10),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                margin: EdgeInsets.only(
                  top: 10,
                  bottom: 3,
                  right: 10,
                  left: 10,
                ),
                child: Text(
                  _title,
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 16,
                  ),
                ),
              ),
              Container(
                width: 120,
                margin: EdgeInsets.only(
                  top: 3,
                  bottom: 3,
                  right: 10,
                  left: 10,
                ),
                child: Text(
                  _description,
                  style: TextStyle(
                    color: Color(0xFFB1B2B4),
                    fontSize: 12,
                  ),
                ),
              ),
              Container(
                margin: EdgeInsets.only(
                  top: 3,
                  bottom: 3,
                  right: 10,
                  left: 10,
                ),
                child: Text(
                  "Steps $_steps",
                  style: TextStyle(
                    color: Color(0xFFDFA059),
                    fontSize: 15,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

}```






Esta Widget representa una entrada de viaje en el perfil (imagen, info. y boton):



import ‘package:flutter/cupertino.dart’;
import ‘package:flutter/material.dart’;
import ‘package:platzi_travels_app/card_image.dart’;
import ‘package:platzi_travels_app/fav_button.dart’;
import ‘package:platzi_travels_app/place_information.dart’;

import ‘constants.dart’;

class TravelEntry extends StatelessWidget {
final imagePath;
final title;
final description;
final steps;

TravelEntry({this.imagePath, this.title, this.description, this.steps});

@override
Widget build(BuildContext context) {
final image = CardImage.placeInfo(imagePath, Constants.PROFILE_VIEW_INDEX, title, description, steps);

final placeInformation = PlaceInformation(title, description, steps);

return Container(
  child: Stack(
    alignment: Alignment(0, 0.7),
    children: <Widget>[
      image,
      Stack(
        alignment: Alignment(0.53,1.1),
        children: <Widget>[
          placeInformation,
          FavButton(),
        ],
      ),
    ],
  ),
);

}

}```

Esta sería la Widget de Lista de Entradas de Viaje:

import 'package:flutter/material.dart';
import 'package:platzi_travels_app/travel_entry.dart';

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

    return Container(
      margin: EdgeInsets.only(
        top: 300,
      ),
      child: ListView(
        children: <Widget>[
          TravelEntry(
            title: "Mt. Kolts",
            description: "Perfect for training martial arts",
            steps: 12000,
            imagePath: "assets/img/mountains.jpg",
          ),
          TravelEntry(
            title: "Flower field",
            description: "A beautiful place for meditation",
            steps: 12000,
            imagePath: "assets/img/mountains.jpg",
          ),
          TravelEntry(
            title: "St. Karlo of Figaro",
            description: "Amazing views and excellent services",
            steps: 12000,
            imagePath: "assets/img/bettertips.jpg",
          ),
        ],
      ),
    );
  }

}

La Widget de la vista del Perfil:



import 'package:flutter/material.dart';
import 'package:platzi_travels_app/travel_entry.dart';

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

    return Container(
      margin: EdgeInsets.only(
        top: 300,
      ),
      child: ListView(
        children: <Widget>[
          TravelEntry(
            title: "Mt. Kolts",
            description: "Perfect for training martial arts",
            steps: 12000,
            imagePath: "assets/img/mountains.jpg",
          ),
          TravelEntry(
            title: "Flower field",
            description: "A beautiful place for meditation",
            steps: 12000,
            imagePath: "assets/img/mountains.jpg",
          ),
          TravelEntry(
            title: "St. Karlo of Figaro",
            description: "Amazing views and excellent services",
            steps: 12000,
            imagePath: "assets/img/bettertips.jpg",
          ),
        ],
      ),
    );
  }

}

Modificación de CardImage para reutilizar código:



import 'package:flutter/cupertino.dart';
import "package:flutter/material.dart";
import 'constants.dart';
import 'fav_button.dart';

class CardImage extends StatelessWidget {

  final String _imagePath;
  final int _view;

  String _title;
  int _steps;
  String  _description;

  CardImage(this._imagePath, this._view);

  CardImage.placeInfo(this._imagePath, this._view, this._title, this._description, this._steps);

  @override
  Widget build(BuildContext context) {
    var image;
    Widget card;

    if (_view == Constants.HOME_VIEW_INDEX) {
      image = Container(
        height: 350,
        width: 250,
        margin: EdgeInsets.only(
          top: 80,
          left: 20,
        ),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(10)),
            shape: BoxShape.rectangle,

            boxShadow: <BoxShadow>[
              BoxShadow(
                color: Colors.black,
                blurRadius: 15,
                offset: Offset(0.0,7.0),
              )
            ],

            image: DecorationImage(
              fit: BoxFit.cover,
              image: AssetImage(_imagePath),
            )
        ),
      );

      card = Stack(
        alignment: Alignment(0.9, 1.1),
        children: <Widget>[
          image,
          FavButton(),
        ],
      );
    }
    else {
      image = Container(
        height: 220,
        width: 320,
        margin: EdgeInsets.only(
          bottom: 100,
        ),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(10)),
            shape: BoxShape.rectangle,

            boxShadow: <BoxShadow>[
              BoxShadow(
                color: Colors.black,
                blurRadius: 15,
                offset: Offset(0.0, 7.0),
              )
            ],

            image: DecorationImage(
              fit: BoxFit.cover,
              image: AssetImage(_imagePath),
            )
        ),
      );
      card = image;
    }

    return card;
  }

}

Interesante Reto. Ahora vamos al avanzado.

  • ![](

Otro reto cumplido.

Muy contento con el resultado final, adjunto el código si alguien lo necesita para su reto. 😃

Me costo un poco pero lo logre

Reto: Cumplido!

Observación: Los cards se encuentran debajo del appbar por cuestiones de Scroll

Cuarto reto , cumplido!!

Por fín lo acabe 😄

Excelente curso, muy bueno Flutter y genial Ann!!!
Yo había hecho el de Android Definitivo 2016, pero este es aun mejor!!!

Reto cumplido

import ‘package:flutter/material.dart’;
import ‘barra_inferior.dart’;

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

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘Cuerto reto’,
debugShowCheckedModeBanner: false,
theme: ThemeData(
),
home: BarraInferior(),
);
}
}

// archivo barra_inferior.dart

import ‘package:flutter/material.dart’;
import ‘package:flutter/cupertino.dart’;
import ‘barra_inferior_boton_inicio.dart’;
import ‘barra_inferior_boton_buscar.dart’;
import ‘barra_inferior_boton_localizacion.dart’;
import ‘barra_inferior_boton_notificacion.dart’;
import ‘barra_inferior_boton_personal.dart’;

class BarraInferior extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
bottomNavigationBar: CupertinoTabScaffold(
tabBar: CupertinoTabBar(
backgroundColor: Colors.white30,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home,color: Colors.black38),
title: Text("")
),

        BottomNavigationBarItem(
            icon: Icon(Icons.search,color: Colors.black38),
            title: Text("")
        ),

        BottomNavigationBarItem(
            icon: Icon(Icons.location_on ,color: Colors.black38),
            title: Text("")
        ),

        BottomNavigationBarItem(
            icon: Icon(Icons.notifications,color: Colors.black38),
            title: Text("")
        ),

        BottomNavigationBarItem(
            icon: Icon(Icons.person,color: Colors.indigo),
            title: Text("")
        ),


      ],
    ),

    // ignore: missing_return
    tabBuilder: (BuildContext context,index){

      switch(index){
        case 0:
          return CupertinoTabView(
            builder: (BuildContext context) => BarraInferiorBotonInicio(),
          );
          break;

        case 1:
          return CupertinoTabView(
            builder: (BuildContext context) => BarraInferiorBotonBuscar(),
          );
          break;
        case 2:
          return CupertinoTabView(
            builder: (BuildContext context) => BarraInferiorBotonLocalizacion(),
          );
          break;
        case 3:
          return CupertinoTabView(
            builder: (BuildContext context) => BarraInferiorBotonNotificacion(),
          );
          break;
        case 4:
          return CupertinoTabView(
            builder: (BuildContext context) => BarraInferiorBotonPersonal(),
          );
          break;


      }
    },


  ),
);

}

}

// archivo barra_inferior_boton_personal.dart

import ‘package:flutter/material.dart’;
import ‘datos_perfil.dart’;
import ‘despliega_imagenes.dart’;

class BarraInferiorBotonPersonal extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Stack(
children: <Widget>[
Column(
children: <Widget>[
DatosPerfil(),
],
),
DespliegaImagenes(),
],
) ;
}
}

// archivo datos_perfil.dart

import ‘package:flutter/material.dart’;
import ‘boton_marcador.dart’;
import ‘boton_calendario.dart’;
import ‘boton_mas.dart’;
import ‘boton_email.dart’;
import ‘boton_personal.dart’;
import ‘boton_configuracion.dart’;

class DatosPerfil extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return

  FondoGradiente("Peru2012_1213.jpg","Esteban Eguiguren","[email protected]");

}

}

class FondoGradiente extends StatelessWidget{
String Foto ="";
String Nombre="";
String Email= “”;

FondoGradiente(this.Foto,this.Nombre,this.Email);

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

return Stack(
  children: <Widget>[
    Container(
      height: 300.0,
      decoration: BoxDecoration(
          gradient: LinearGradient(
              colors: [
                Colors.indigo ,
                Colors.deepPurple
              ],
              begin: FractionalOffset(0.2,1.0),
              end: FractionalOffset(2.0,1.4),
              stops: [0.0,0.6],
              tileMode: TileMode.clamp
          )
      ),

      //
      alignment: Alignment(-0.9,-0.6),
    ),
    Container(
      margin: EdgeInsets.only(
        top: 30.0,
        left: 20.0
      ),
      child:
      Text("Perfil",

        style: TextStyle(
            fontSize: 30.0,
            fontWeight: FontWeight.bold,
          color: Colors.white
        ),
      ),
    ),
    Container(
      margin: EdgeInsets.only(
        top: 70.0,
        left: 20.0
      ),
      width: 80.0,
        height: 80.0,

        decoration: BoxDecoration(
          border: Border.all(
            color: Colors.white,
            width: 2.0
          ),
          shape: BoxShape.circle,
          image: DecorationImage(
            fit: BoxFit.fill,
            image: NetworkImage("https://ile.com.ec/CursoFlutter/" + Foto),

          )
        ),
    ),

    Container(
      margin: EdgeInsets.only(
          top: 85.0,
          left: 110.0
      ),
      child:
      Text(Nombre,
        style: TextStyle(
            fontSize: 20.0,
            fontWeight: FontWeight.normal,
            color: Colors.white
        ),
      ),
    ),

    Container(
      margin: EdgeInsets.only(
          top: 115.0,
          left: 110.0
      ),
      child:
      Text(Email,
        style: TextStyle(
            fontSize: 15.0,
            fontWeight: FontWeight.normal,
            color: Colors.white30
        ),
      ),
    ),

    Container(
      margin: EdgeInsets.only(
        top: 170.0,
        left: 10.0,
      ),
      child:
      BotonMarcador(),
    ),

    Container(
      margin: EdgeInsets.only(
        top: 170.0,
        left: 80.0,
      ),
      child:
      BotonCalendario(),
    ),

    Container(
      margin: EdgeInsets.only(
        top: 170.0,
        left: 160.0,
      ),
      child:
      BotonMas(),
    ),

    Container(
      margin: EdgeInsets.only(
        top: 170.0,
        left: 240.0,
      ),
      child:
      BotonEmail(),
    ),

    Container(
      margin: EdgeInsets.only(
        top: 170.0,
        left: 320.0,
      ),
      child:
      BotonPersonal(),
    ),

    Container(
      margin: EdgeInsets.only(
        top: 85.0,
        left: 320.0,
      ),
      child:
      BotonConfiguracion(),
    ),

  ],
)
;

}
}

// archivo boton_marcador.dart

import ‘package:flutter/material.dart’;

class BotonMarcador extends StatefulWidget{
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return _BotonMarcador() ;
}

}

class _BotonMarcador extends State<BotonMarcador>{
Icon favIcon =
Icon(Icons.bookmark);

void PresionoBoton(){
setState(() {
favIcon= Icon(Icons.turned_in);
});

Scaffold.of(context).showSnackBar(
    SnackBar(
      content: Text("Presionaste marcadores"),
    )
);

}

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

    backgroundColor: Colors.white30,
    mini: true,
    tooltip: "Presionaste marcadores",


    onPressed: PresionoBoton ,
    child: favIcon

);

}

}

// archivo despliega_imagenes.dart

import ‘package:flutter/material.dart’;
import ‘tarjetas.dart’;

class DespliegaImagenes extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
height: 650.0,
width: 450.0,
margin: EdgeInsets.only(
top:250,
),

    child: ListView(
      padding: EdgeInsets.only(
        left: 10.0,
        top: 150.0,
        right: 10.0,
        bottom: 100.0

      ),
      scrollDirection: Axis.vertical,
      children: <Widget>[
        Tarjetas("f1.jpg","Bolivia","Ruinas de Tiwanaco", "3885 msnm"),
        Tarjetas("f3.jpg", "Peru","Frontera entre Bolivia y Peru","3812 msnm" ),
        Tarjetas("f2.jpg","Peru","Frontera entre Bolivia y Peru","3812 msnm" ),
      ],
    ),
);

}
}

// archivo tarjetas.dart

import ‘package:flutter/material.dart’;
import ‘boton_megusta.dart’;

class Tarjetas extends StatelessWidget{
String NombreFoto = “”;
String Lugar="";
String Descripcion = “”;
String Altura = “”;

Tarjetas(this.NombreFoto, this.Lugar,this.Descripcion,this.Altura);

@override
Widget build(BuildContext context) {

final Tarjeta = Container(
height: 200.0,
width: 450.0,
margin: EdgeInsets.only(
    top: 10.0,
    left: 0.0
),
decoration: BoxDecoration(
    image: DecorationImage(
      fit: BoxFit.fill,
      image: NetworkImage("https://ile.com.ec/CursoFlutter/" + NombreFoto),
    ),
  borderRadius: BorderRadius.all(Radius.circular(30.0))
        
),

);

final CuadroDescripcionTarjeta = Container(
  height: 80.0,
    width: 250.0,
  margin: EdgeInsets.only(
    top: 180.0,
    left: 50.0
  ),
  decoration: BoxDecoration(
    shape: BoxShape.rectangle,
        borderRadius: BorderRadius.all(Radius.circular(10.0)),
      color: Colors.white,
    boxShadow: <BoxShadow>[
      BoxShadow(
      blurRadius: 15.0,
      color: Colors.black12,
      offset: Offset(10.0,10.0),
      )
    ],
  ),
);

final TextoLugar = Container(
  margin: EdgeInsets.only(
    top: 190.0,
    left: 60.0,
  ),
  child:
  Text(Lugar,
    style: TextStyle(
        fontSize: 18.0,
        fontWeight: FontWeight.bold
    ),
  ),
);

final TextoDescripcion = Container(
  margin: EdgeInsets.only(
    top: 215.0,
    left: 60.0,
  ),
  child:
  Text(Descripcion,
    style: TextStyle(
        fontSize: 12.0,
        color:Colors.black38
    ),
  ),
);

final TextoAltura = Container(
  margin: EdgeInsets.only(
    top: 235.0,
    left: 60.0,
  ),
  child:
  Text("Altura: " + Altura,
    style: TextStyle(
        fontSize: 15.0,
        color:Colors.orange,
        fontWeight: FontWeight.bold
    ),
  ),
);



// TODO: implement build
return Stack(
  // alignment: Alignment(1.5,1.1),
  children: <Widget>[
    Tarjeta,
    CuadroDescripcionTarjeta,
    TextoLugar,
    TextoDescripcion,
    TextoAltura,
    Container(
      margin: EdgeInsets.only(
        top: 210.0,
        left: 250.0,
      ),
      child:
      BotonMeGusta(),
    ),
  ],
);

}

}

// archivo boton_megusta.dart

import ‘package:flutter/material.dart’;

class BotonMeGusta extends StatefulWidget{
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return _BotonMeGusta();
}

}

class _BotonMeGusta extends State<BotonMeGusta>{
bool Favorito = false;
Icon favIcon =
Icon(Icons.favorite_border);
var Texto ="";

void PresionoBoton(){
setState(() {
Favorito=!Favorito;
if (Favorito){
favIcon= Icon(Icons.favorite);
Texto = “Agregaste a favoritos”;
}
else {
favIcon = Icon(Icons.favorite_border);
Texto = “Quitaste de favoritos”;
}
});

Scaffold.of(context).showSnackBar(
    SnackBar(
      content: Text(Texto),
    )
);

}

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

    backgroundColor: Color(0xFF11DA53),
    mini: !Favorito,
    tooltip: "Agrega/Quita favoritos",


    onPressed: PresionoBoton ,
    child: favIcon

);

}

}