Cuarto reto
Contenido del curso
Viene el gran reto, es momento de poner a prueba todo lo que has aprendido. Analiza la siguiente interfaz, observa los widgets, colores, formas, mira que muchos de ellos los construímos durante el curso. Reutiliza todo lo necesario para construir la pantalla de Perfil de usuario, asígnala a su tap correspondiente y compártenos tus resultados en la sección de discusiones.
Hernán Giraldo
legal
Julio J Yépez
Usuario anónimo
User
Ann Code
ProfesorUsuario anónimo
User
Pablo Rafael Cruz López
Martin Valdivia Franco
Juan José Rivera
Edgar Barragan
Yake Nunura Baylon
Carlos Rubén Lombardi Kina
Ann Code
Profesor
Eric Gomez
Oscar Morera García
renzo david chavez calderon
José Vinicio Flores Arias
Jhasmany Roque Chambi
Oscar Torres
Francisco Javier Vázquez Paredes
Joseph Michael Ciriaco Bermudez
0ohm
Ivan Daniel Oviedo Alvarado
Julian Marcelo Quispe Lau Len
Robinson Torres
AMANDA MARCELAQUINTANAJULIO
Marco Aurelio Garcia Aviles
Marco Alfonso Calderón Valdez
Reto realizado!!!
Github:
¡Se ve genial!
¡Guao Hernán!
¡Te quedó de lujo!
Buen trabajo …
!! Reto Resuelto !!
GitHub:
Maravilloso Brayan. Te costó lograrlo?
No mucho porque me sirvió todas las habilidades adquiridas en este curso. Además con este reto mejore esas habilidades.
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: "pablocruz9988@gmail.com", 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 ], ), ); } }
Muchísimas gracias :3
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);```
buen dato, gracias!
Como se ve 😀
😁
Un Poco de Código
Aún por afinar algunas cositas
Estoy tan orgullosa de ustedes 😍
Te quedó genial
Anexo Código por si necesitas ayuda GitHub
Gracias! Gran aporte.
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 ], ), ); } }
Reto subido! Github:
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( "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 ], ) ); } }```
Me costó mucho acostumbrarme a generar la vista, pero ya le pillé la gracia. Muy entretenido Flutter
Repositorio: https://github.com/ioviedodev/trip_app.git
crack
Reto Cumplido Papu!!!!
