Cuarto reto

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.

Cuarto reto

Francisco Javier Vázquez Paredes

Estudiante

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

Hernán Giraldo

legal

Julio J Yépez

Usuario anónimo

User

Ann Code

Profesor

Pablo Rafael Cruz López

Martin Valdivia Franco

Juan José Rivera

Edgar Barragan

Yake Nunura Baylon

Carlos Rubén Lombardi Kina

Eric Gomez

Oscar Morera García

renzo david chavez calderon

José Vinicio Flores Arias

Jhasmany Roque Chambi

Oscar Torres

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

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!