Segundo reto

Clase 23 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

Con lo que has aprendido hasta ahora analiza y desarrolla esta interfaz en Flutter:

De fondo tienes una imagen, encima un contenedor negro que tiene una transparencia y a la vez por encima de este contenedor está el texto. Tanto el contenedor como el texto están centrados.

Utiliza tus propios recursos: imágenes, textos, etc. para generar tu propia versión. Compártenos tu análisis y la captura de pantalla de tus resultados en la sección de discusiones.

Comentarios

Fernanda Aragon

student•

Second challenge completed 😅

Juan Pablo Calao Pérez

student•

Épico. Símplemente épico

Giancarlo Lamadrid Cotrina

student•

Bueeeeenaaaa jajajajaja

Josué Eliezer Gómez Soto

student•

Pues yo conozco algo de Flutter previo a este curso, por ello pude resolver el reto, creo para alguien nuevo esto sera decepcionante, ya que vera que otros pueden y el no, pensara que no es bueno para esto, por ello no estoy de acuerdo que con el nivel que se ha enseñado pidan este reto:

import 'package:flutter/material.dart';

class Home extends StatelessWidget {  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Icon(Icons.home),        
        title: Text('Platzi'),
        centerTitle: true,
      ),
      body: Stack(
        children: <Widget>[
          _imagenFondo(),
          _textoCentral(),
        ],      
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: ()=>{},
        
      ),
    );
  }


  Widget _imagenFondo() {
    return Image(
      image: AssetImage('assets/image/wp.jpg'),
      height: double.infinity,
      width: double.infinity,
      fit: BoxFit.cover,
    );
  }

  Widget _textoCentral() {
    return Center(
      child: Container(
        height: 100,                
        color: Color.fromRGBO(0, 0, 0, 0.5),
        child: Center(
          child: Text('Naughty', style: TextStyle(fontSize: 40, color: Colors.white)),
        ),
      ),

    );
  }
}

![](

Juan Pablo Reyes Herrera

student•

Corroboro, totalmente!!!

Pablo Emilio Escobar Ossa

student•

Estoy buscando en los aportes como resolverlo. Puesto que no tengo conocimiento en Flutter.

Julio J Yépez

student•

Mi análisis del Reto:

Julio J Yépez

student•

Como hasta ahora no hemos visto detalles de cómo pasar del análisis al código … considero que mi reto completado sería así.

¯\_(ツ)_/¯

Jorge Wenner Arévalo Alvis

student•

Muy de acuerdo contigo…

Usuario anónimo

user•

🐱‍💻 Excelente reto para aplicar lo aprendido hasta ahora y reforzar conocimiento.

Juan Martín Seery

student•

No me acostumbro a escribir mil veces child y Center :v

Ludwring Liccien

student•

Me parece vulgar este tipo de imágenes.

Debería eliminarla el usuario o la plataforma

Juan Martín Seery

student•

Pero… es un meme: Orange Justice y “Karen, please don’t take the kids”. Me pareció una forma divertida de trabajar con Flutter.

Mis disculpas si lo he ofendido, pero no puedo (o simplemente no encuentro la opción de) borrar el post.

Edgar Morillo Vergel

student•

Buen dia, no estoy de acuerdo con este ejercicio me ha costado. vengo de otro paradigma de desarrollo y me cuesta tomarle el hilo a la forma como lo hace flutter. me parece que se debio haber hecho un ejercicio con codigo parecido y despues si hacer la version de uno. no se trata de copiar y pegar sino de entender que es lo que estamos haciendo. pienso que todavia no se ha explicado bien lo de los widget y como incrustarlos en el codigo.

Robert Romero Medina

student•

Concuerdo contigo

Giovanni Peña

student•

Me too.

Amaru Ugaz

student•

home:
        Scaffold(
            appBar: AppBar(
              title: Text("Reto Platzi"),
              backgroundColor: Colors.black,
            ),
            body: Stack(
              fit: StackFit.expand,
              children: <Widget>[
                Container(
                  decoration: BoxDecoration(
                    image: new DecorationImage(
                        image: new AssetImage('assets/images/hackerman.jpg'),
                        fit: BoxFit.fill
                    )
                  ),
                ),
                Center(
                    child: Container(
                      color: Colors.black.withOpacity(.5),
                      constraints: BoxConstraints.expand(height: 70),
                      child: Center(
                        child: Text(
                            "¡Desafío completado!",
                            style: TextStyle(
                                color:Colors.white,
                                fontSize: 30
                            ),
                        )
                      ),
                    ),
                )
              ],
            )
        )
    );```

José Antonio Di Pietro Zambrano

student•

Cristian David Franco Garcia

student•

Analisis:

Code:

main.dart

home: Scaffold(
   appBar:
       AppBar(leading: Icon(Icons.arrow_back), title: Text('Share')),
   body: Container(
     decoration: BoxDecoration(
         image: DecorationImage(
             image: AssetImage('assets/images/wallpaper.jpg'),
             fit: BoxFit.fill)),
     child: Center(
       child: Container(
         height: 70.0,
         color: Colors.black38,
         child: Center(
             child: Text(
           '@crisfranco15793',
           style: TextStyle(color: Colors.white, fontSize: 30.0),
         )),
       ),
     ),
   )
   )

pubspec.yaml

assets:
 - assets/images/

Result:

Henry Villavicencio

student•

Listo, es importante agregar:
assets:

assets/image.jpg
en el archivo pubspec.yaml, en el caso de que usemos una imagen local, especificando la ruta de la misma.
Me costó un poco, pero lo he logrado 😎

Usuario anónimo

user•

!! Reto Cumplido !!
GitHub:

Fernando Ontiveros

student•

home: Scaffold(
        appBar: AppBar(
          title: Text("Reto 2"),
        ),
        /*body: Center(
          child: Text("Hola mundo"),
        ),*/
        body: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage('assets/background.jpg'),
                fit: BoxFit.cover
            ),
          ),
          child: Center(
            child: Container(
              height: 60.0,
              color: Color.fromRGBO(0, 0, 0, .4),
              child: Center(
                child: Text(
                  'Reto 2',
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 30.0
                  ),
                ),
              )
            ),
          ),
        ),
        //bottomNavigationBar: ,
        //floatingActionButton: ,
        //floatingActionButtonLocation: ,
        //floatingActionButtonAnimator: ,
      )

Edward Alexis Vásquez Becerra

student•

Gracias

Salvador Camacho Gasca

student•

Me gusto su solución , gracias

Usuario anónimo

user•

home:Scaffold(
        appBar: AppBar(

          actions: <Widget>[
        Icon(
        Icons.sentiment_very_satisfied,
            color: Colors.white,
            size: 24.0,
        )
          ],
          title: Text('Quedate en tu p#t@ casa'),
        ),
        body:Stack(
          children:<Widget>[
            Container(
              decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage("build/flutter_assets/images/united-nations-covid-19-response-3biD4LTasgY-unsplash.jpg"),
                    fit: BoxFit.cover,
                  )
              ),


            ),
            Center(

            child: Container(

              //padding: EdgeInsets.all(20.0),
              height: 100,
              margin: EdgeInsets.only(),
              alignment: Alignment.center,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: <Color>[
                    Colors.black45,
                    Colors.black12,
                    Colors.black45,

                  ],
                ),
              ),
              child: Text(
                "#QEDATEENCASA",
                style: TextStyle(color: Colors.white, fontSize: 40.0),

              ),
            ),
            ),
          ]

        )



      )

Pedro Jesus Hincapie Garcia

student•

Un poco de humor y reflexión para este super equipo.

Anibal Daniel Moradel Lazo

student•

Listo!

Lucas Alejandro Moreno Olivos

student•

Naaaa, mejor esta Xayah, aunque aguante la toplane <3

samuel sanchez castillo

student•

Luiggi Thomas Mendoza Jarahuanco

student•

Comparto mi análisis inicial:

Cabecera:
- Título
- Fondo color rojo
- Ícono para volver atrás
Cuerpo:
- Una pila (stack)
  - Imagen de fondo
  - Un par de cajas con distinta opacidad (Opacity)
  - Un texto en el centro con letra blanca

Sobre mi análisis, no sé si es la imagen o en realidad hay una opacidad añadida desde el medio de la imagen. Quizás sea mi imaginación. De ser así, el cuerpo cambia para rediseñar la opacidad.

Aquí mi diseño basado en el análisis inicial (con fondo blanco, la imagen tiene fondo transparente).

Paul Mauricio Realpe Guerrero

student•

![](

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Platzi Trips',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Platzi Trips'),
          ),
          body: Stack(
            children: <Widget>[
              _backgroundImage(),
              _backgroundGradient(),
              _messagePlatziTrips()
            ],
          ),
        ));
  }

  Widget _backgroundImage() {
    return Container(
        height: double.infinity,
        width: double.infinity,
        child: Image(
          image: AssetImage('assets/background.jpg'),
          fit: BoxFit.cover,
        ));
  }

  Widget _backgroundGradient() {
    return Center(
      child: Container(
        width: double.infinity,
        height: 60.0,
        decoration: BoxDecoration(
            gradient: LinearGradient(
                begin: FractionalOffset(0.0, 0.2),
                end: FractionalOffset(0.0, 1.0),
                colors: [
              Color.fromRGBO(3, 169, 244, 0.35),
              Color.fromRGBO(48, 63, 159, 0.85),
            ])),
      ),
    );
  }

  Widget _messagePlatziTrips() {
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            width: 40.0,
            height: 40.0,
            child: Image(image: AssetImage('assets/logo_platzi.png')),
          ),
          SizedBox(width: 10.0,),
          _textPlatziTrips('#PlatziTrips', Colors.white, 32.0),
        ],
      ),
    );
  }

  Widget _textPlatziTrips(message, textColor, textSize) {
    return Center(
        child: Text(
      '$message',
      style: TextStyle(
          color: textColor, fontSize: textSize, fontWeight: FontWeight.bold),
    ));
  }
}

David Avendaño Casanova

student•

Alejandro Alvarez Alvarez

company_admin•

import 'package:flutter/material.dart';

class Home extends StatelessWidget {  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Icon(Icons.home),        
        title: Text('Platzi'),
        centerTitle: true,
      ),
      body: Stack(
        children: <Widget>[
          _imagenFondo(),
          _textoCentral(),
        ],      
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: ()=>{},
        
      ),
    );
  }


  Widget _imagenFondo() {
    return Image(
      image: AssetImage('assets/image/wp.jpg'),
      height: double.infinity,
      width: double.infinity,
      fit: BoxFit.cover,
    );
  }

  Widget _textoCentral() {
    return Center(
      child: Container(
        height: 100,                
        color: Color.fromRGBO(0, 0, 0, 0.5),
        child: Center(
          child: Text('Naughty', style: TextStyle(fontSize: 40, color: Colors.white)),
        ),
      ),

    );
  }
}

home:
        Scaffold(
            appBar: AppBar(
              title: Text("Reto Platzi"),
              backgroundColor: Colors.black,
            ),
            body: Stack(
              fit: StackFit.expand,
              children: <Widget>[
                Container(
                  decoration: BoxDecoration(
                    image: new DecorationImage(
                        image: new AssetImage('assets/images/hackerman.jpg'),
                        fit: BoxFit.fill
                    )
                  ),
                ),
                Center(
                    child: Container(
                      color: Colors.black.withOpacity(.5),
                      constraints: BoxConstraints.expand(height: 70),
                      child: Center(
                        child: Text(
                            "¡Desafío completado!",
                            style: TextStyle(
                                color:Colors.white,
                                fontSize: 30
                            ),
                        )
                      ),
                    ),
                )
              ],
            )
        )
    );```

home: Scaffold(
   appBar:
       AppBar(leading: Icon(Icons.arrow_back), title: Text('Share')),
   body: Container(
     decoration: BoxDecoration(
         image: DecorationImage(
             image: AssetImage('assets/images/wallpaper.jpg'),
             fit: BoxFit.fill)),
     child: Center(
       child: Container(
         height: 70.0,
         color: Colors.black38,
         child: Center(
             child: Text(
           '@crisfranco15793',
           style: TextStyle(color: Colors.white, fontSize: 30.0),
         )),
       ),
     ),
   )
   )

home: Scaffold(
        appBar: AppBar(
          title: Text("Reto 2"),
        ),
        /*body: Center(
          child: Text("Hola mundo"),
        ),*/
        body: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage('assets/background.jpg'),
                fit: BoxFit.cover
            ),
          ),
          child: Center(
            child: Container(
              height: 60.0,
              color: Color.fromRGBO(0, 0, 0, .4),
              child: Center(
                child: Text(
                  'Reto 2',
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 30.0
                  ),
                ),
              )
            ),
          ),
        ),
        //bottomNavigationBar: ,
        //floatingActionButton: ,
        //floatingActionButtonLocation: ,
        //floatingActionButtonAnimator: ,
      )

home:Scaffold(
        appBar: AppBar(

          actions: <Widget>[
        Icon(
        Icons.sentiment_very_satisfied,
            color: Colors.white,
            size: 24.0,
        )
          ],
          title: Text('Quedate en tu p#t@ casa'),
        ),
        body:Stack(
          children:<Widget>[
            Container(
              decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage("build/flutter_assets/images/united-nations-covid-19-response-3biD4LTasgY-unsplash.jpg"),
                    fit: BoxFit.cover,
                  )
              ),


            ),
            Center(

            child: Container(

              //padding: EdgeInsets.all(20.0),
              height: 100,
              margin: EdgeInsets.only(),
              alignment: Alignment.center,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: <Color>[
                    Colors.black45,
                    Colors.black12,
                    Colors.black45,

                  ],
                ),
              ),
              child: Text(
                "#QEDATEENCASA",
                style: TextStyle(color: Colors.white, fontSize: 40.0),

              ),
            ),
            ),
          ]

        )



      )

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Platzi Trips',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Platzi Trips'),
          ),
          body: Stack(
            children: <Widget>[
              _backgroundImage(),
              _backgroundGradient(),
              _messagePlatziTrips()
            ],
          ),
        ));
  }

  Widget _backgroundImage() {
    return Container(
        height: double.infinity,
        width: double.infinity,
        child: Image(
          image: AssetImage('assets/background.jpg'),
          fit: BoxFit.cover,
        ));
  }

  Widget _backgroundGradient() {
    return Center(
      child: Container(
        width: double.infinity,
        height: 60.0,
        decoration: BoxDecoration(
            gradient: LinearGradient(
                begin: FractionalOffset(0.0, 0.2),
                end: FractionalOffset(0.0, 1.0),
                colors: [
              Color.fromRGBO(3, 169, 244, 0.35),
              Color.fromRGBO(48, 63, 159, 0.85),
            ])),
      ),
    );
  }

  Widget _messagePlatziTrips() {
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            width: 40.0,
            height: 40.0,
            child: Image(image: AssetImage('assets/logo_platzi.png')),
          ),
          SizedBox(width: 10.0,),
          _textPlatziTrips('#PlatziTrips', Colors.white, 32.0),
        ],
      ),
    );
  }

  Widget _textPlatziTrips(message, textColor, textSize) {
    return Center(
        child: Text(
      '$message',
      style: TextStyle(
          color: textColor, fontSize: textSize, fontWeight: FontWeight.bold),
    ));
  }
}

Segundo 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!