Curso de Flutter

Curso de Flutter

Anahí Salgado Díaz de la Vega

Anahí Salgado Díaz de la Vega

Segundo reto

19/38

Lectura

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.

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

Aportes 632

Preguntas 8

Ordenar por:

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

Second challenge completed 😅

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

Mi análisis del Reto:

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

    );
  }
}

![](

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

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.

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

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:

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 😎

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: ,
      )

!! Reto Cumplido !!
GitHub: https://github.com/BrayanMamani/Naughty

Listo!

home:Scaffold(
        appBar: AppBar(

          actions: <Widget>[
        Icon(
        Icons.sentiment_very_satisfied,
            color: Colors.white,
            size: 24.0,
        )
          ],
          title: Text('Quedate en tu p#[email protected] 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),
    ));
  }
}

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

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).

Reto Cumplido
dejo mi Repo de GitHub por si tienen tema con los assets

Hola amigos, por preguntarles donde creo la carpeta imágenes para que las pueda tomar desde la aplicación que estoy haciendo, lo he tratado todo y puede ser una tontería nada mas pero no tengo idea donde guardar la imagen para ponerla de fondo, siempre que corro la aplicación me dice que no puede encontrar el archivo jpg que le especifico…

❗ ¡Hola! Tengo un problema, trato de colocar la imagen de fondo pero no me carga en la aplicación, probé descargando otra imagen y aún así no se soluciona el problema. Revisé el código y creo tener todo bien… ¿Me podrían ayudar por favor?

![](

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.purple,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Lorem Ipsum'),
          leading: Icon(Icons.android),
        ),
        body: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('images/valley.png'),
              fit: BoxFit.cover,
            ),
          ),
          child: Center(
            child: Container(
              child: Text(
                'Lorem Ipsum',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                ),
              ),
              color: Colors.black.withOpacity(0.4),
              alignment: Alignment.center,
              height: 50,
            ),
          ),
        ),
      ),
    );
  }
}```

Listo

Reto cumplido.
No creí que me tomaría tanto tiempo lograrlo.

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage("assets/wallpaper.jpg"),
      fit: BoxFit.cover,
    ),
  ),
),
...
// Para lo demás agregar mas widgets como Opacity, Container, Text etc...
              	

Bueno, es hora de dormir 😄

Listo, eso creo…

Si que costo hacerlo, pero aquí está:

main.dart:

home: Scaffold(
  appBar: AppBar(
    title: Text("Reto"),
  ),
  body: Stack(
    children: <Widget>[
      Container(
        // height: 250,
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage("images/background.jpg"),
            fit: BoxFit.cover,
          ),
        ),
      ),
      Center(
        child: Container(
          height: 50,
          // padding: const EdgeInsets.fromLTRB(0, 15, 0, 15),
          alignment: Alignment.center,
          color: Colors.black.withAlpha(64),
          child: Text(
            "Finally!!!",
            style: TextStyle(color: Colors.white, fontSize: 20.0)),
        ),
      )
    ]
  )
)

La referencia de la imagen debe ser a partir de la base del proyecto, es decir, si hay una carpeta llamada “images” en la base del proyecto entonces hay que agregar “images/…”, pero si está dentro de la carpeta llamada “assets” entonces hay que agregarla como “assets/images/…”

pubspec.yaml:

flutter:
    assets:
        - images/background.jpg

(

y acá dejo mi código:

import 'package:flutter/material.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: 'Segundo Reto Platzi',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(

        primarySwatch: Colors.lightGreen,
      ),
      home: Scaffold(
        appBar: AppBar(
          leading : Builder(
            builder: (BuildContext context){
              return IconButton(
                icon: const Icon(Icons.arrow_back),
                color: Colors.white,
                onPressed: (){
                  Navigator.pop(context);
                  },
              );
            }),
          title: Text(
            'Segundo Reto Platzi',
            style: TextStyle(
              color: Colors.white
            ),),
          
        ),
        body: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/images/princess.jpg'),
              fit: BoxFit.cover,
              )
          ),
          child: Center(
            child: Container(
              color: Color.fromRGBO(0, 0, 0, 0.5),
              width: 500,
              child: Text(
                'Mi Princesa',
                style: TextStyle(
                  fontSize: 60,
                  color: Colors.white
                ),
                textAlign: TextAlign.center,
              ),
            ),
          )
        ),
        )//MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}```
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(

      title: 'Flutter Demo',
        debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("Reto #2"),
        ),
        body: Container(
          alignment: Alignment.center,
          decoration: BoxDecoration(
            image: DecorationImage(
              image: NetworkImage("https://i.pinimg.com/originals/ee/3f/f2/ee3ff274d956a47bd59c6dbdffe1e492.jpg"),
              fit: BoxFit.cover
            ),
          ),
          child: Center(
            child: Container(
              decoration: BoxDecoration(
                color: Color.fromRGBO(0, 0, 0, 0.7),
              ),
              alignment: Alignment.center,
              height: 70,
              child: Text(
                "Yo Soy Iron-Man",
                style: TextStyle(fontSize: 30.0, color: Colors.white),
              ),
            ),
          ),
        ),
      ) //MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
body: Stack(
          alignment: Alignment.center,
          children: <Widget>[
            Container(
              color: Colors.green,
              child:
              Image.network("https://vignette.wikia.nocookie.net/es.starwars/images/d/d5/MP-YodaSpecies.png/revision/latest?cb=20180802191916",
                fit: BoxFit.cover,
                height: 7000,
              ),
            ),
            Container(
              height:50,
              color: Colors.white.withOpacity(0.5),
            ),
            Container(
              child: Text("Que la fuerza los acompañe padawan Flutter"),
            ),
          ],
        ),```

En mi main.dart:

import 'package:flutter/material.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: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.orange,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        appBar: AppBar(
            title: Text('Dream Theater')
        ),
        body: Stack(
          children: <Widget>[
            Container(
              child: Center(
                child: Image.asset("assets/wp2185740.jpg", fit: BoxFit.cover, width: double.infinity, height: double.infinity),
              )
            ),
            Center(
              child: Container(
                width: double.maxFinite,
                height: 70,
                decoration: BoxDecoration(
                  color: Color.fromRGBO(0, 0, 0, .5)
                ),
                child: Center(
                  child: Text(
                    "Metropolis Pt. 2",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 50
                    ),
                    textAlign: TextAlign.center,
                  )
                )
              ),
            )
          ],
        ),
      ),
    );
  }
}```

En el pubspec.yaml:

flutter:
uses-material-design: true,
assets:
- assets/metropolispt2.jpg

CODIGO:

RESULTADO:

Pensé que era yo solo… pero ya pedir este tipo de desafio a esta altura, me parece que no… entiendo que dieron minimo ade Dart, pero aplicarlo ya así… asi que trataré de que esto no me desanime y continuar, antes que nada, gracias a los compas que subieron su codigo asi tener una idea de lo que se esta aplicando

Segundo reto 💪

Si cierto que falta un poquito de contenidoo para poder cumplir el reto, pero me gusta la idea de buscar opciones en internet ! xD gracias stackoverflow, lo hiciste de nuevo xD jejejej

saludos a todos

Hola a todos, adjunto el screenshot del segundo reto y el código:

El código, main.dart:

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.red,
      ),
      // home: MyHomePage(title: 'Flutter Demo Home Page'),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Speed Dating'),
        ),
        body: Stack(
          children: [
            Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image:AssetImage('assets/img/second.jpeg'),
                  // image: Image.asset('assets/background.jpg'),
                  fit: BoxFit.fill,
                )
              ),
            ),
            Center(
              child: Container(
                height: 150,
                color: Colors.black12.withAlpha(50),
                child: Row(
                  mainAxisSize: MainAxisSize.max,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text('It is working',
                    style: TextStyle (
                      color: Colors.white,
                      fontSize: 40
                    ),)
                  ],
                ),
              ),
            )
          ]
        ),
      )
    );
  }
}

Saludos.

import 'package:flutter/material.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: 'Mi primer app en Flutter',
      theme: ThemeData(
        primaryColor: Color(0xFFF2293A)
      ),
      home: Scaffold(appBar: AppBar(
        title: Text("Hola Mundo")),
        body: Center(
          child: Stack(
            alignment: const Alignment(0,0.7),
            children: [
              Image.asset('assets/images/mr-robot.png'),
              Container(
                color: Colors.white.withOpacity(0.3),
                height: 40
              ),
              Text("Mr Robot",
              style: TextStyle(
                fontSize: 25,
                fontFamily: "MrRobot",
                color: Colors.red,
              ))
            ],
          )
        ), backgroundColor: Colors.black,
      ),
    );
  }
}

El objetivo fue lograrlo con la menor cantidad de codigo posible.

class SegundoReto extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Segundo Reto - Imagen con Texto"),
        backgroundColor: Colors.deepOrange,
      ),
      body: Stack(
        fit: StackFit.expand,
        children: [
          Image(
            fit: BoxFit.cover,
            image: AssetImage("assets/images/dog.jpg"),
          ),
          Center(
            child: Container(
              alignment: Alignment.center,
              color: Colors.black45,
              constraints: BoxConstraints.expand(height: 55),
              child: Text(
                "El Perro",
                style: TextStyle(color: Colors.white, fontSize: 50),
              ),
            ),
          )
        ],
      ),
    );
  }
}```
import 'package:flutter/material.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: 'Flutter Demo',
        theme: ThemeData(
          // This is the theme of your application.
          //
          // Try running your application with "flutter run". You'll see the
          // application has a blue toolbar. Then, without quitting the app, try
          // changing the primarySwatch below to Colors.green and then invoke
          // "hot reload" (press "r" in the console where you ran "flutter run",
          // or simply save your changes to "hot reload" in a Flutter IDE).
          // Notice that the counter didn't reset back to zero; the application
          // is not restarted.
          primarySwatch: Colors.red,
          // This makes the visual density adapt to the platform that you run
          // the app on. For desktop platforms, the controls will be smaller and
          // closer together (more dense) than on mobile platforms.
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: Scaffold(
            appBar: AppBar(title: Text("Compartir")),
            body: Stack(
              children: [
                Align(
                    alignment: Alignment.center,
                    child: Container(
                      child: Image.asset(
                        "images/Levi.png",
                        fit: BoxFit.cover,
                      ),
                      height: 500,
                    )),
                Align(
                    alignment: Alignment.center,
                    child: Stack(alignment: Alignment.center, children: [
                      Container(
                        height: 90,
                        decoration:
                            BoxDecoration(color: Colors.black.withOpacity(0.5)),
                      ),
                      Container(
                        child: Text(
                          "Levi",
                          style: TextStyle(fontSize: 50, color: Colors.white),
                        ),
                      )
                    ])),
              ],
            )));
  }
}
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    const String _title = 'Flutter App :)';

    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text("José Pulido"),
          leading: IconButton(
            icon: Icon(
              Icons.arrow_back,
              color: Colors.white,
              size: 26
            ),
            tooltip: "Regresar",
          ),
          backgroundColor: Colors.teal,
          titleSpacing: 5
        ),
        body: Stack(
          children: <Widget>[
            Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage("assets/images/do_y_mizu.jpg"),
                  fit: BoxFit.fitWidth
                )
              ),
            ),
            Align(
              alignment: Alignment.center,
              child: Container(
                color: Colors.black.withOpacity(0.3),
                constraints: BoxConstraints.expand(
                  height: 55
                ),
                child: Align(
                  alignment: Alignment.center,
                  child: const Text(
                    "Do y Mizu ❤️",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 22
                    ),
                  ),
                ),
              )
            )
          ]
        )
      )
    );
  }
}

Me apoye de algunos links de utilidad
background image
AppBar

Code

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "challenge2",
      home: Scaffold(
        appBar: AppBar(
          title: Text('Challenge 2'),
          backgroundColor: Colors.green,
      ),
      body: Container(
        constraints: BoxConstraints.expand(),
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage("images/image1.jpg"),
            fit: BoxFit.cover
          )
        ),
        child: Stack(
          alignment: Alignment.center,
          children: [
            Text("We're save the planet!", style: TextStyle(color: Colors.white, fontSize: 30),
            ),
            Container(
              color: Colors.green.withOpacity(0.2),
              height: 50,
            )
          ],
        )
      ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'EX02',
        theme: ThemeData(
            primarySwatch: Colors.pink,
            visualDensity: VisualDensity.adaptivePlatformDensity),
        home: Scaffold(
            appBar: AppBar(
                leading: const Icon(Icons.arrow_back), title: Text("Share")),
            body: Container(
                child: Container(
                    child: Text("Eternal",
                        style: TextStyle(color: Colors.white, fontSize: 28)),
                    alignment: AlignmentDirectional.center,
                    color: Colors.black.withOpacity(0.5),
                    height: 80),
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage("assets/img/eternal.jpg"),
                        fit: BoxFit.cover)),
                alignment: AlignmentDirectional.center)));
  }
}

Aquí celebrando el año nuevo con el reto.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.red,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("Reto #2"),
          leading: Icon(Icons.keyboard_arrow_left),
        ),
        body: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage("assets/2021.jpg"),
              alignment: Alignment.center,
              fit: BoxFit.fill,
            ),
          ),
          child: Center(
            child: SizedBox(
              width: double.infinity,
              height: 80.0,
              child: DecoratedBox(
                decoration:
                    const BoxDecoration(color: Color.fromARGB(100, 0, 0, 0)),
                child: Container(
                  alignment: Alignment.center,
                  child: Text(
                    "Feliz Año Nuevo",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: 35,
                        fontWeight: FontWeight.bold),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

codigo

import ‘package:flutter/material.dart’;

//metodo principal
void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘Flutter Demo’,
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: fondo(),
);
}
}

class fondo extends StatefulWidget {
FondoInicio createState() => FondoInicio();
}

class FondoInicio extends State<fondo> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Reto#2’),
),
body: Stack(
children: [
Center(
child: Container(
child: Image.network(
‘https://i.pinimg.com/736x/ae/bb/2a/aebb2aba5805a17893f72429b5995ee2.jpg’,
fit: BoxFit.cover,
height: double.infinity,
),
),
),
Center(
child: Container(
width: 1000,
height: 40,
child: Text(
‘Hola Mundo’,
textAlign: TextAlign.center,
style: TextStyle(
color: Color.fromRGBO(205, 244, 255, .80),
fontFamily: ‘Roboto’,
fontSize: 40,
fontWeight: FontWeight.bold,
backgroundColor: Color.fromRGBO(0, 0, 0, .51),
),
),
),
),
],
),
);
}
}

import 'package:flutter/material.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: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.amber,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyCanvas()
      );//MyHomePage(title: 'Flutter Demo Home Page'),
  }
}
class MyCanvas extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Mi primer amor'),
        leading: Icon(Icons.arrow_back),
      ),
      body: Center(
        child: Stack(
          children: [
            Image.network('https://www.marthadebayle.com/wp-content/uploads/2020/09/amor-de-la-vida.jpg',
              fit: BoxFit.cover,
              height: double.infinity,
            ),
            Center(
              child: Text('Mi primer amor',
                style: TextStyle(color: Colors.amber, fontSize: 30),
              )
            )
          ],
        ),
      ),
    );
  }

}


(No pude sibir la imagen: aparece )

Abajo mi código y una captura de pantalla también

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    // Config data
    Map config = {
      'appTitle': 'Places with Flutter',
      'appBarTitle': 'Places',
      'bannerHeight': 120,
      'bannerTitleSize': 40,
      'bannerTextSize': 16,
      'flagHeight': 30,
    };

    // Input data
    Map place = {
      'name': 'Port Moody',
      'city': 'Vancouver',
      'country': 'Canada',
      'flag': 'https://www.countryflags.io/CA/shiny/64.png',
      'image': 'assets/images/canada-4352186_960_720.jpg',
    };

    // Banner widget
    Widget bannerWidget = Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Image.network(
          place['flag'],
          height: double.parse(
            config['flagHeight'].toString(),
          ),
        ),
        Text(
          place['name'],
          style: TextStyle(
            color: Colors.white,
            fontSize: double.parse(
              config['bannerTitleSize'].toString(),
            ),
          ),
        ),
        Text(
          place['city'] + ', ' + place['country'],
          style: TextStyle(
            color: Colors.white,
            fontSize: double.parse(
              config['bannerTextSize'].toString(),
            ),
          ),
        )
      ],
    );

    // Build the app
    return MaterialApp(
      title: config['appTitle'],
      home: Scaffold(
        appBar: AppBar(
          title: Text(config['appBarTitle']),
          leading: Icon(Icons.arrow_back),
        ),
        body: Container(
          height: double.infinity,
          width: double.infinity,
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage(
                place['image'],
              ),
              fit: BoxFit.cover,
            ),
          ),
          child: Center(
            child: Container(
              height: double.parse(
                config['bannerHeight'].toString(),
              ),
              width: double.infinity,
              color: Colors.grey[900].withOpacity(0.75),
              child: bannerWidget,
            ),
          ),
        ),
      ),
    );
  }
}
import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: HomePage(),
      theme: ThemeData(primaryColor: Colors.black),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('And...')),
      body: Stack(
        fit: StackFit.expand,
        children: [
          Image(
              image: AssetImage('assets/images/rocket_engines.jpg'),
              fit: BoxFit.cover),
          Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                color: Colors.black45,
                padding: EdgeInsets.all(15),
                child: Text(
                  'Lift off!!',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 50,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Este reto me tomo casi un día, sabía lo que tenía que hacer, pero no sabía como representarlo bien (La sintaxis, estructura, que propiedad tiene cada Widget, si pueden tener hijos, cuántos, el style, como colocarlo, todo eso),pero lo termine y aquí está.

import 'package:flutter/material.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: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
        // This makes the visual density adapt to the platform that you run
        // the app on. For desktop platforms, the controls will be smaller and
        // closer together (more dense) than on mobile platforms.
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Share'),
          leading: new IconButton(
            icon: new Icon(Icons.arrow_back, color: Colors.white),
          ),
        ),
        body: Stack(
          children: [
            new Container(
              decoration: new BoxDecoration(
                image: new DecorationImage(image: new AssetImage("assets/images/luna_asset.jpg"), fit: BoxFit.cover),
              ),
            ),
            Center(
              child: new Container(
                  height: 100,
                  width: 390,
                  decoration: new BoxDecoration(
                      color: Colors.transparent,
                      boxShadow: [
                        BoxShadow(
                            color: Colors.black45,
                        )
                      ]
                  )
              ),
            )
            ,
            Center(
              child: Text('Naughty',style:TextStyle( color: Colors.white, fontSize: 40),

              ),
            )
          ],
        )

      )//MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          // Column is also a layout widget. It takes a list of children and
          // arranges them vertically. By default, it sizes itself to fit its
          // children horizontally, and tries to be as tall as its parent.
          //
          // Invoke "debug painting" (press "p" in the console, choose the
          // "Toggle Debug Paint" action from the Flutter Inspector in Android
          // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
          // to see the wireframe for each widget.
          //
          // Column has various properties to control how it sizes itself and
          // how it positions its children. Here we use mainAxisAlignment to
          // center the children vertically; the main axis here is the vertical
          // axis because Columns are vertical (the cross axis would be
          // horizontal).
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Esto es mi código:

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Segundo Reto',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blueGrey,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Reto 2'),
        ),
        body: Container(
          height: double.infinity,
          width: double.infinity,
          color: Colors.green,
          child: Stack(
            children: [
              Image.asset(
                'assets/images/the-dark-knight.jpg',
                fit: BoxFit.fitHeight,
                height: double.infinity,
              ),
              Center(
                child: Container(
                  height: 400,
                  child: Center(
                    child: Text(
                      'THE DARK KNIGHT',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 28,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                        colors: [
                          Colors.blueGrey.withOpacity(
                            0.0,
                          ),
                          Colors.black.withOpacity(
                            1.0,
                          ),
                          Colors.black.withOpacity(
                            0.0,
                          ),
                        ]),
                    color: Colors.blueGrey.withOpacity(
                      0.9,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ), //MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

Este es el resultado:

![](


home: Scaffold(
        appBar: AppBar(
          title: Text("Platzi Conf 2020")
        ),
        body: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage("assets/mobile-bg.png")
            )
          ),
          child: Align(
            child: Container(
                child: Align(child:
                  Text("Vive la magia de Platzi",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 32
                  ))
                ),
                color: Color.fromRGBO(0, 0, 0, 0.5),
                height: 100,
                width: 1000
            ),
          )
        )
      )

Done!

Más o menos asi quedó jajaja 😄

Y así el código:

return Scaffold(
      appBar: AppBar(
        title: Text('Share'),
        leading: Icon(Icons.arrow_back),
      ),
      body: Stack(
        children: <Widget>[
          Image.network(
            "http://los40cl00.epimg.net/los40/imagenes/2018/11/12/actualidad/1542031525_179894_1542031764_noticia_normal.jpg",
            fit: BoxFit.fill,
            height: double.infinity,
          ),
          Center(
            child: Container(
              color: Colors.black45,
              child: Text(
                "Como cuando ya te piden hacer una interfaz en Flutter y creíste que apenas ibas empezando",
                textAlign: TextAlign.center,
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                ),
              ),
            ),
          )
        ],
      ),
    );
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/
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter18_19_platzi/src/screens/myHomePage.dart';

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Reto 2',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        fontFamily: "Montserrat",
        appBarTheme: AppBarTheme(
          brightness: Brightness.dark,
          elevation: 5,
        ),
      ),
      home: MyHomePage(
        title: "Reto 2",
      ),
    );
  }
}


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

class MyHomePage extends StatefulWidget {
  final String title;
  final AssetImage assetImage = AssetImage("graphics/round_color_lens_white_18dp.png");

  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        centerTitle: true,
        title: Text(widget.title),
        leading: Container(
          decoration: BoxDecoration(
            image: DecorationImage(image: widget.assetImage)
          ),
        ),
      ),
      body: Container(
        color: Colors.white,
        child: Stack(
          overflow: Overflow.clip,
          children: <Widget>[
            Container(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [Colors.black, Colors.blueAccent],
                ),
              ),
            ),
            Container(
              decoration: FlutterLogoDecoration(),
            ),
            Center(
              child: Container(
                decoration: UnderlineTabIndicator(),
                child: Text("Flutter",
                  style: TextStyle(
                    fontSize: 100,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Código:

home: Scaffold(
        appBar: AppBar(
          leading: BackButton(),
          title: Text("Compartir"),
        ),
        body: Center(
          child: Stack(
            children: <Widget>[
              Image.network(
                "https://cdn.guidingtech.com/imager/media/assets/215421/Best-Nature-Wallpapers-in-HD-for-Mobile-2_4d470f76dc99e18ad75087b1b8410ea9.jpg",
                fit: BoxFit.fill,
                height: double.maxFinite,
                width: double.maxFinite,
              ),
              Center(
                child: Container(
                  color: Colors.black45,
                  height: 50.00,
                  width: double.maxFinite,
                  padding: EdgeInsets.all(12),
                  child: Text(
                    "#PrayOfAmazonia",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 22.0,
                      color: Colors.white
                    ),
                  ),
                )
              )
            ],
            )
        ),
      )```
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'My First Flutter App',
        theme: ThemeData(
          primarySwatch: Colors.red,
        ),
        home: Scaffold(
          appBar: AppBar(
            title: Text("Share"),
            leading: IconButton(
              icon: Icon(Icons.arrow_back),
              tooltip: "Back",
              onPressed: null,
            ),
          ),
          body: Center(
            child: Stack(
              children: <Widget>[
                Container(
                  color: Colors.black,
                ),
                Container(
                  child: Image.network(
                      'https://e.rpp-noticias.io/normal/2018/06/22/232423_632598.jpg'),
                  alignment: Alignment.center,
                ),
                Center(
                    child: Container(
                        height: 60,
                        color: Colors.black.withOpacity(0.5),
                        width: double.infinity,
                        child: Center(
                          child: Text(
                            "Second Challenge",
                            textAlign: TextAlign.center,
                            overflow: TextOverflow.ellipsis,
                            style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 40,
                                color: Colors.white54),
                          ),
                        )))
              ],
            ),
          ),
        ));
  }
}

La verdad no sabia nada de flutter mas alla de lo visto en clase y me costo un poco este reto

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.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: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("Platzi Flutter",),
          centerTitle: true,
          backgroundColor: Colors.deepPurple
        ) ,
          body: Stack(
            children: <Widget>[
              Image(
                image: AssetImage('assets/images/bg.png'),
                height: double.infinity,
                width: double.infinity,
                fit: BoxFit.cover
              ),
              Center(
                child: Container(
                  color: Color.fromRGBO(0, 0, 0, 0.6),
                  height: 100,
                  width: 500,
                  child:
                  Align(alignment: Alignment.center,
                    child:Text("Cumpliendo \n el segundo reto",
                    textScaleFactor: 2,
                    style: TextStyle(color: Colors.white70),
                    textAlign: TextAlign.center,),
                  )
                ),
              )
            ],
          )
        ),
    );
}
}```

Es importante para cualquier nuevo como yo, que debes agregar en el pubspec.yaml lo siguiente


flutter:
assets:
- assets/images/bg.png

En este caso en la misma carpeta raiz del proyecto crean la carpeta assets y la carpeta images dentro de assets, ahi ingresan las imagenes que desean usar en el proyecto

![](https://i.imgur.com/Spe7DXE.png)

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Scaffold Challenge',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text("Scaffold challenge"),
          leading: Icon(Icons.arrow_back),
        ),
        body: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage("images/dinobackground.png"),
              fit: BoxFit.cover
            ),
          ),
          child: Stack(
            children: <Widget>[
              Center(
                child: Container(
                    height: 100,
                    decoration: BoxDecoration(
                      color: Colors.black.withOpacity(0.7),
                    ),
                  ),
              ),
              Center(
                child: Text("Dinos Rock!", textScaleFactor: 2, style: TextStyle(color: Colors.white ),),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Agregar la imagen a pubspec.yaml

flutter:
	assets:
	    - images/dinobackground.png
// This sample shows adding an action to an [AppBar] that opens a shopping cart.

import 'package:flutter/material.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: 'Curso Flutter - Reto No. 2',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: Scaffold(
        appBar: AppBar(
          leading: Icon(Icons.arrow_back_ios),
          title: Text("Reto No. 2"),
        ),
        body: Container(
            alignment: Alignment.center,
            decoration: new BoxDecoration(
              image: new DecorationImage(
                image: new AssetImage("images/WriteCodeBlowMinds.jpg"),
                fit: BoxFit.cover,
              ),
            ),
            child: Container(
                decoration: new BoxDecoration(
                  color: Color.fromRGBO(0, 0, 0, 0.65),
                ),
                //alignment: Alignment(0, 0),
                padding: new EdgeInsets.only(bottom:20.0, top:20.0),
                child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget> [
                      Expanded(
                        child: Text(
                          "Build Apps!",
                          style: TextStyle(
                            fontSize: 32,
                            fontWeight: FontWeight.bold,
                            color: Colors.white,
                          ),
                          textAlign: TextAlign.center,
                        ),
                      ),
                    ]
                )
            )
        ),
      ),
    );
  }
}```
@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: null,
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage("assets/529122.png"),
            fit: BoxFit.cover,
          )
        ),
        child: Center(
          child: Row(
            children: <Widget>[
              Expanded(
                child: Container(
                  padding: EdgeInsets.all(15.0),
                  decoration: BoxDecoration(color: Color.fromARGB(100, 0, 0, 0)),
                  child: Text(
                    'RETO CUMPLIDO',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 25.0
                    ),
                    textAlign: TextAlign.center,
                  ),
                ),
              )
            ],
          )
        ),
      ),
    );
  }

Aqui esta el codigo de la prueba

import 'package:flutter/material.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: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Segundo Reto'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage("assets/fondo1.jpg"), fit: BoxFit.cover)),
        child: Center(
          child: Row(
            children: <Widget>[
              Container(
                width: size.width,
                padding: EdgeInsets.all(10.0),
                color: Colors.black45,
                child: Text(
                  'SEGUNDO RETO',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 40.0,
                    color: Colors.white,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

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



class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Mi Aplicación",
      home: Scaffold(
        appBar: AppBar(
          title: Text("Curso Flutter: Reto 2"),
          backgroundColor: Colors.orange,
        ),
        body: Stack(
          fit: StackFit.loose,
          children: <Widget>[
            Container(
                child: Image(
                  image: AssetImage('images/platzi.jpg'),
                  fit: BoxFit.cover,
                  width: double.infinity,
                  height: double.infinity,

                ),
            ),
            Center(
              child: Container(
                  color: Colors.black45,
                  width: double.infinity,
                  padding: EdgeInsets.all(8.0),
                  child: Text(
                    'Aprendi Flutter :)',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.w400,
                        fontSize: 30,
                        fontFamily: 'Pacifico'
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

}```

Hola, comparto mi análisis:

  • Dentro de body he creado dos Widgets:
  1. Container: para colocar la imagen como fondo.
  2. Center: que contiene un Container negro con transparencia (para ello he utilizado opacidad). Finalmente agrego el texto con el Widget Text.

He visto que han utilizado Stack también, asi que me queda la duda de que forma es la correcta, pero bueno… It works! 😉

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Reto 2',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Reto 2'),
        ),
        body: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/takeoff_spacex.png'),
              fit: BoxFit.fill
            )
          ),
          child: Center(
            child: Container(
              color: Colors.black.withOpacity(0.5),
              alignment: Alignment.center,
              height: 80,
              child: Text(
                'Never stop learning!',
                style: TextStyle(
                  fontSize: 25,
                  color: Colors.white
                ),
              ),
            ),
          ),
        ),
      )
    );
  }
}

Resultado:

Aquí la app:

Código scaffold:

home: Scaffold(
        appBar: AppBar(
          centerTitle: false,
          title: Text("Home"),
          leading: Icon(Icons.arrow_back_ios),
        ) ,
        body: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/images/background.png'),
              fit: BoxFit.cover
            ),
          ),
          child: Stack(
            children: <Widget>[
              Center(
                child: Container(
                  height: 75,
                  decoration: BoxDecoration(
                    color: Colors.black.withOpacity(0.5),
                  ),
                ),
              ),
              Center(
                child: Text("Reto #2",textAlign: TextAlign.center, textScaleFactor: 3, style: TextStyle(color: Colors.white),),
              )
            ],
          ),
        )

      )

Código pubspec:

flutter:
  uses-material-design: true
  assets:
    - assets/images/background.png

Salida:

home: Scaffold(
          appBar: AppBar(
            title: Text('Testing flutter with Platzi'),
          ),
          body: Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: NetworkImage(
                  'https://images.pexels.com/photos/2071882/pexels-photo-2071882.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
                ),
                fit: BoxFit.cover,
                alignment: Alignment.center
              ),
            ),
            child: Center(
              child: Container(
                color: Color.fromRGBO(0, 0, 0, 0.4),
                height: 60,
                child: Center(
                  child: Text(
                    'MEOW',
                    style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                      color: Colors.white
                    ),
                  ),
                ),
              ),
            ),
          ),
      ),
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.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: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("Reto 2"),
        ),
        body: Stack(
          children: <Widget>[
            Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage("images/niceNight.png"),
                  fit: BoxFit.cover
                ),
              ),
            ),
            Center(
              child: Container(
                height: 100,
                width: double.maxFinite,
                color: Color(0xFF77777766),
                child: Center(
                  child: Text(
                    "Naugthy",
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 70,
                      color: Color(0xFFFFFFFF)
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      )
    );
  }
}```
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("Segundo reto"),
        ),
        body: Stack(
          children: <Widget>[
            Image.asset(
              'assets/images/flutter.png'
            ),
            Center(
              child: Container(
                height: 100,
                width: double.maxFinite,
                color: Color(0xFF7777766),
                child: Center(
                  child: Text(
                    "Flutter",
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 70
                    ),
                  )
                )
              ),
            )
          ],
        )
      ) 
      //MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

No entiendo he hecho todo lo necesario
cree carpeta, agregué imagen para usar y modifiqué el archivo pobspec.yaml
Después modifiqué mi main.dart y al correrlo da este error:

No entiendo.
Y este Android Studio consume demasiada memoria Ram.
Estoy pensando seriamente regresarme a React Native con Visual Studio Code.
Si alguien pudiera ayudarme para darme una luz a este error se lo agradecería.

Compiler message:
lib/main.dart:1:8: Error: Not found: 'dart:html'
import 'dart:html';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.

  @override
  Widget build(BuildContext context) {
    // final size = MediaQuery.of(context).size;
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("Hola"),
        ),
        body: Stack(
          children: <Widget>[
            Image.asset('assets/bg.png', height: double.infinity, fit: BoxFit.cover,),
            Center(
              child: Container(
                padding: EdgeInsets.symmetric(vertical: 30),
                width: double.infinity,
                decoration: BoxDecoration(color: Color.fromRGBO(0, 0, 0, 0.6)),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text('Hola Platzi!', style: TextStyle(color: Colors.white, fontSize: 30),
                    ),
                  ],
                )
              ),
            ),
          ],
        )
      )// MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blueGrey,

        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("Valhala"),
        ),
        body: Stack(
          children: <Widget>[
            Container(
              child:
              Image.asset("images/valhala.png",
                fit: BoxFit.cover,
                height: 1000,)
            ),
            Container(
              child: Center(
                  child: Container(
                    color: Colors.black.withOpacity(0.5),
                    height: 100,)
              ),
            ),
            Container(
              child: Center(
                child:Text("Valhala",
                  textAlign: TextAlign.center,
                  style: TextStyle(color: Colors.white,
                  fontSize: 60,
                  fontWeight: FontWeight.bold,
                  fontStyle: FontStyle.italic),
                ),
              )
              ,)
            ],
          ),

      ) //MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text('Reto 2'),
        ),
        body: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/penol.jpg'),
              fit: BoxFit.fill
            ),
          ),  
          child: Center(
            child: Container(
              color: Color.fromRGBO(0, 0, 0, 0.5),
              alignment: Alignment.center,
              height: 100,
              child: Text(
                'Reto 2',
                style: TextStyle(
                  fontSize: 80,
                  color: Colors.amberAccent,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

![](

wow todo lo que se ha compartido se ve muy bien felicitaciones 😄