Second challenge completed 😅
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!
Con lo que has aprendido hasta ahora analiza y desarrolla esta interfaz en Flutter:
...
Regístrate o inicia sesión para leer el resto del contenido.
Aportes 722
Preguntas 9
Ordenar por:
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)),
),
),
);
}
}
Mi análisis del Reto:
🐱💻 Excelente reto para aplicar lo aprendido hasta ahora y reforzar conocimiento.
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 😎
!! Reto Cumplido !!
GitHub: https://github.com/BrayanMamani/Naughty
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),
),
),
),
]
)
)
Un poco de humor y reflexión para este super equipo.
Listo!
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
- Una pila (stack)
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).
 => 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),
));
}
}
❗ ¡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?
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…
Reto Cumplido
dejo mi Repo de GitHub por si tienen tema con los assets
 {
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
Done! haciendo el curso de flutter 1 con flutter 3 instalada en mi computadora…
¡Reto cumplido!
<import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'appAlan',
theme: ThemeData(
primarySwatch: Colors.purple,
),
home: Scaffold(
appBar: AppBar(
title: const Text("Reto 2"),
),
body: Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/AlanCruzComision.png'),
fit: BoxFit.cover),
),
child: Center(
child: Container(
width: 410,
color: Colors.grey.shade300.withOpacity(0.5),
padding: const EdgeInsets.all(8),
child: const Text(
"Kevinazo - Purple Alan",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
),
),
),
),
),
);
}
}>
Resultado:
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.pink,
),
home: Scaffold(
appBar: AppBar(
title: Text("Share"),
leading: const BackButton(
color: Colors.white,
),
),
body: Center(
child: Container(
height: double.infinity,
width: double.infinity,
decoration: const BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://images.unsplash.com/photo-1600793575654-910699b5e4d4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"),
fit: BoxFit.cover,
),
),
child: Center(
widthFactor: double.infinity,
child: Container(
height: 50,
width: double.infinity,
color: Colors.black.withOpacity(0.7),
child: Center(
child: Text(
"@1danielm",
style: TextStyle(color: Colors.grey[50], fontSize: 24),
textAlign: TextAlign.center,
),
),
),
),
),
),
) ,
);
}
}
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';
Muy importante en pubspec.yaml
agregar la imagen a ocupar asi
uses-material-design: true
assets:
- assets/image/imagen.jpg
- assets/image/mew.png
Mi reto completado
Completado, duré la vida en hacerlo.!!! Pero finalmente.! Listo.
Reto completado! 😄
![](
Codigo:
Scaffold(
appBar: AppBar(
title: const Text(
"Segundo reto",
),
backgroundColor: Colors.black,
),
body: Stack(
children: <Widget>[
Container(
alignment: Alignment.topCenter,
child: const Image(
image: NetworkImage('https://picsum.photos/id/1074/500/980'),
),
),
Container(
alignment: Alignment.center,
color: Colors.black.withOpacity(0.5),
),
Center(
child: Container(
alignment: Alignment.center,
color: Colors.black.withOpacity(0.5),
height: 100.0,
child: const Text(
'Holi 🤞',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white, fontSize: 20.0
),
),
),
)
],
)
)
Lo logre gracias a las ideas aportadas por tod@s. Muchas gracias.
Challenge completed
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(primarySwatch: Colors.pink),
home: Scaffold(appBar: _appBar, body: _body));
}
}
AppBar _appBar = AppBar(
leading: const Icon(Icons.arrow_back),
title: const Text("Share"),
);
Center _body = Center(
child: Stack(
children: [
Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/background.jpg"),
fit: BoxFit.cover,
),
),
),
Center(
widthFactor: 100,
child: Container(
height: 70,
width: double.infinity,
color: const Color(0x50000000),
child: const Center(
child: Text(
"Done",
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 32,
fontFamily: 'Raleway'),
),
),
),
)
],
),
);```
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
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:
- Container: para colocar la imagen como fondo.
- 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:
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?