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!
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Convierte tus certificados en títulos universitarios en USA
Antes: $249
Paga en 4 cuotas sin intereses
Termina en:
Ahora que ya tenemos el análisis de la interfaz de nuestro proyecto, conoceremos el primer grupo de widgets que nos ofrece Flutter y con el que iremos dando forma a nuestra aplicación.
Container: como su nombre lo indica, es un contenedor que nos permite agrupar u organizar internamente otros widgets.Text: se utiliza para mostrar textos simples.Icon: se utiliza para incluir iconos predefinidos en la interfaz.Row: es un contenedor en el que los elementos internos se organizan de forma horizontal y seguidos unos de otros.Cada uno de los widgets tienen propiedades, algunas comunes y otras particulares que iremos viendo a lo largo del curso.
Como ya hemos visto en clases anteriores: ““En Flutter, prácticamente TODO es un widget””, así que la forma de pasar del análisis de la interfaz al código es mediante la composición de widgets propios (o clases) que contendrán los diferentes grupos anidados de widgets básicos para cada sección de la interfaz. De esta manera tendremos una estructura mucho más organizada y
mantenible.
Los nombres de archivo en Dart, con Flutter, generalmente deben ir escritos en minúsculas y usando underscore en lugar de espacios, a este estilo se le llama SnakeCase; sin embargo, internamente, los nombres de las clases se escribirán con mayúscula inicial o estilo PascalCase.
La primera línea del archivo de clase en Dart que define un Widget, es la siguiente:
import 'package:flutter/material.dart';
Y con ella se importan al contexto global de nuestra aplicación todas las definiciones de widgets que vienen predefinidos y listo para usarse con Flutter.
Aportes 233
Preguntas 29
En IntelliJ IDEA, Android Studio y VS Code podemos crear los widgets StatelessWidget y StatefulWidget escribiendo las siguientes abreviaciones.
stful --> Crea un widget StateFulWidget, pidiendo el nombre.
stless --> Crea un widget StatelessWidget, pidiendo el nombre.
import 'package:flutter/material.dart';
class DescripcionPlace extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
final star = Container(
margin: EdgeInsets.only(
top: 323.0,
right: 3.0
),
child: Icon(
Icons.star,
color: Color(0xFFF2C611),
),
);
final title_star = Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(
top: 320.0,
left: 20.0,
right: 20.0
),
child: Text(
"Duwili Ella",
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.w900
),
textAlign: TextAlign.left,
),
),
Row(
children: <Widget>[
star,
star,
star,
star,
star
],
),
],
);
final description = Container(
margin: EdgeInsets.only(
top: 10.0,
left: 20.0,
right: 20.0
),
child: Text(
"Lorem ipsum dolor sit amet consectetur adipiscing elit auctor, sapien leo praesent etiam iaculis metus ut, consequat lacinia taciti ultrices at tellus integer. Nulla ad conubia donec senectus netus ultrices semper, metus malesuada ridiculus mollis varius himenaeos tellus, potenti habitasse natoque phasellus integer tristique.",
style: TextStyle(
fontSize: 11.0
),
textAlign: TextAlign.justify,
),
);
final content = Container(
child: Column(
children: <Widget>[
title_star,
description
],
),
);
return content;
}
}
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
class DescriptionPlace extends StatelessWidget{
@override
Widget build(BuildContext context){
final star = Container(
margin: EdgeInsets.only(
top: 323.0,
right: 3.0
),
child: Icon(
Icons.star,
color: Color(0xFFf2C611),
),
);
final description = Container(
margin: EdgeInsets.only(
top: 15,
left: 24,
right: 24
),
child: Text(
'Hay que trabajar, hay que aprender, hay que comer,'
' hay que descanzar y también hay que jugar, '
'esas son las bases del entrenamiento '
' para tener una buena condición',
style: TextStyle(
fontSize: 16,
color: Colors.black
),
),
);
final title_stars = Row (
children: <Widget>[
Container (
margin: EdgeInsets.only(
top: 320.0,
left: 20.0,
right: 20.0,
),
child: Text(
'Duwili Ella',
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.w900,
),
textAlign: TextAlign.left,
),
),
Row(
children: <Widget>[
star,
star,
star,
star,
star
],
)
],
);
return Column(
children: <Widget>[
title_stars,
description
],
);
}
}
Resuelto
Es mucho muy importante para mí.
Los nombres de archivo en Dart, con Flutter, generalmente deben ir escritos en minúsculas y usando underscore en lugar de espacios, a este estilo se le llama SnakeCase; sin embargo, internamente, los nombres de las clases se escribirán con mayúscula inicial o estilo PascalCase.
Con scrolling:
class DescriptionPlace extends StatelessWidget {
@override
Widget build(BuildContext context) {
final star = Container(
margin: EdgeInsets.only(top: 323.0, right: 3.0),
child: Icon(Icons.star, color: Colors.yellow),
);
final titleStars = Row(
children: [
Container(
margin: EdgeInsets.only(top: 320.0, left: 20.0, right: 20.0),
child: Text(
'Duwilli Ella',
style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.bold),
textAlign: TextAlign.left,
),
),
Row(
children: [
star,
star,
star,
star,
star,
],
)
],
);
final description = Container(
margin: EdgeInsets.only(left: 20.0, right: 20.0),
child: Text(
'''Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet nulla risus. Nulla a sodales nibh. Sed ac metus convallis, pellentesque enim at, blandit justo. Sed sit amet tristique massa.
Aliquam ligula velit, rhoncus nec metus at, mattis aliquet orci. Integer quis fringilla est. Phasellus quis sagittis purus, eu congue mi. Vivamus auctor ex justo, sed condimentum nisi faucibus et. Integer vel turpis maximus, rutrum lacus et, interdum turpis. Sed posuere elit in cursus luctus.''',
style: TextStyle(fontSize: 18),
textAlign: TextAlign.justify,
),
);
final widget = Column(
children: [
titleStars,
description,
],
);
final scrollView = SingleChildScrollView(
child: widget,
scrollDirection: Axis.vertical,
);
return scrollView;
}
}```
import 'package:flutter/material.dart';
class DescriptionPlace extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
final star = Container(
margin: EdgeInsets.only(
top: 323.0,
right: 3.0
),
child: Icon(
Icons.star,
color: Color(0xFFf2C611),
),
);
final description = Container(
margin: EdgeInsets.only(
top: 10.0,
left: 20.0,
right: 20.0
),
child: Text(
'''Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu tempus purus. Nulla facilisi. Duis vulputate, risus eu elementum vestibulum, est quam mollis felis, in viverra nibh lorem vitae erat. Fusce erat urna, mollis eu fringilla vitae, tincidunt id elit.
Integer ullamcorper nisl enim, eget facilisis mauris malesuada quis.'''
),
);
final title_starts = Row(
children: <Widget>[
Container (
margin: EdgeInsets.only(
top: 320.0,
left: 20.0,
right: 20.0
),
child: Text(
"Duwilli Ella",
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.w900
),
textAlign: TextAlign.left,
),
),
Row(
children: <Widget>[
star,
star,
star,
star,
star
],
)
],
);
final description_place = Column(
children: <Widget>[
title_starts,
description
],
);
return description_place;
}
}```
Ahi va:
import 'package:flutter/material.dart';
class DescriptionPlace extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
final star = Container(
margin: EdgeInsets.only(
top: 323.0,
right: 3.0,
),
child: Icon(
Icons.star,
color: Colors.amber,
));
final title_stars = Row(
children: <Widget>[
Container(
margin: const EdgeInsets.only(
top: 320.0,
left: 20.0,
right: 20.0,
),
child: const Text(
"Dwili Ella",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w900,
),
textAlign: TextAlign.left,
),
),
Row(
children: <Widget>[star, star, star, star, star],
),
],
);
final text_description = Container(
margin: const EdgeInsets.only(
top: 20.0,
left: 20.0,
right: 20.00,
),
child: const Text(
"Lorem ipsum dolor sit amet, consecteuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pelientesque eu. \n \nPretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdient a.",
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w900,
color: Colors.black54,
),
textAlign: TextAlign.justify,
),
);
return Column(
children: <Widget>[
title_stars,
text_description,
],
);
}
}
import 'package:flutter/material.dart';
class DescriptionPlace extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
final star = Container(
// ignore: prefer_const_constructors
margin: EdgeInsets.only(
top: 323.0,
right: 3.0,
),
// ignore: prefer_const_constructors
child: Icon(
Icons.star,
color: const Color(0xFFf2C611),
),
);
final title_stars = Row(
children: [
Container(
margin: const EdgeInsets.only(
top: 320.0,
left: 20.0,
right: 20.0,
),
// ignore: prefer_const_constructors
child: Text(
'Duwili Ella',
style: const TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.w900,
),
textAlign: TextAlign.left,
),
),
Row(
children: [star, star, star, star, star],
),
],
);
final description = Container(
margin: const EdgeInsets.only(
top: 15,
left: 24,
right: 24,
),
child: const Text(
'Esta es una descripcion Lorem ipsum dolor sit ame',
style: TextStyle(
fontSize: 17,
),
textAlign: TextAlign.left,
),
);
return Column(
children: [
title_stars,
description,
],
);
}
}
Hola, cómo puedo hacer que android studio me ayude con los comentarios automáticos para identificar las diferentes secciones de código? Gracias
Hasta el momento hemos manejado las medidas en píxeles. Yo lo ajuste a mis dispositivo y todo se ve bien, pero cuando cambie de pantalla, a una más chica, por ejemplo, la misma va a recortar parte de la interfaz. Cómo se trabaja la “responsividad” con flutter? Saludos
Hola!!
Comparto el mi código y el desarrollo del reto de la clase:
import 'package:flutter/material.dart';
class DescriptionPlace extends StatelessWidget{
const DescriptionPlace({super.key});
@override
Widget build(BuildContext context) {
// TODO: implement build
final star = Container(
margin: const EdgeInsets.only(
top: 323.0,
right: 3.0
),
child: const Icon(
Icons.star,
color: Color(0xFFf2C611)
),
);
final titleStars = Row(
children: <Widget>[
Container(
margin: const EdgeInsets.only(
top: 320.0,
left: 20.0,
right: 20.0
),
child: const Text('Duwili Ella',
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.w900
),
textAlign: TextAlign.left,
),
),
Row(
children: <Widget>[
star,
star,
star,
star,
star
],
)
],
);
final textDescription = Container(
margin: const EdgeInsets.only(
top: 20.0,
left: 20.0,
right: 20.0
),
child: const Text('Lorem ipsum dolor sit amet, consecteuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pelientesque eu. \n \nPretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdient a.',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.w900
),
textAlign: TextAlign.justify,
),
);
return Column(
children: <Widget>[
titleStars,
textDescription
],
);
}
}
Luego de tanta lucha , al fin funciono.
no puedo dejar de agradecerles a los valientes que comparten su codigo , para que los novatos aprendamos mas claramente.
Mi avance:
Esta es mi solución.
Utilice symetric en el margen para aplicar de forma vertical y horizontal una misma cantidad.
class DescriptionPlace extends StatelessWidget {
const DescriptionPlace({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final star = Container(
margin: const EdgeInsets.only(top: 323, right: 3.0),
child: const Icon(
Icons.star,
color: Color(0xFFf2C611),
));
final titleStars = Row(
children: [
Container(
margin: const EdgeInsets.only(top: 320.0, left: 20.0, right: 20.0),
child: const Text(
'Duwili Ella',
style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.w600),
textAlign: TextAlign.left,
),
),
Row(
children: [
star,
star,
star,
star,
star,
],
)
],
);
final descriptionStar = Align(
alignment: Alignment.centerLeft,
child: Container(
margin: const EdgeInsets.symmetric(vertical: 10, horizontal: 20.0),
child: const Text(
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknownm.",
textAlign: TextAlign.justify,
style: TextStyle(
fontWeight: FontWeight.w300,
fontSize: 18.0,
),
),
),
);
return Scaffold(
appBar: AppBar(
title: const Text('Platzi Trips'),
),
body: Column(
children: [titleStars, descriptionStar],
),
);
}
}
Listo!
final star = Container(
margin: const EdgeInsets.only(top: 323.0, right: 3.0),
child: const Icon(Icons.star, color: Color(0xFFf2C611)));
final title_stars = Row(children: <Widget>[
Container(
margin: const EdgeInsets.only(
top: 320.0,
left: 20.0,
right: 20.0,
),
child: const Text(
"Diwili Ella",
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.w900,
),
textAlign: TextAlign.left,
)),
Row(
children: <Widget>[
star,
star,
star,
star,
star,
],
),
]);
final text_description = Container(
margin: const EdgeInsets.only(
left: 20.0,
right: 20.0,
top: 20.0,
),
child: const Text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
style: TextStyle(fontWeight: FontWeight.w300)));
return Column(
children: <Widget>[title_stars, text_description],
);
Se resolvió cambiando el Row principal por un Column
algo así me quedo, aunque escribir en doble linea me da error.
Use Column(Row, Text)
final description = Container(
margin: new EdgeInsets.only(
top: 20.0,
left: 20.0,
right: 20.0
),
child: new Text(
descriptionPlace,
style: const TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
color: Color(0xFF56575a)
),
),
);
return Column(
children: <Widget>[
title_stars,
description
],
);
Aquí está mi resultado 😄
Yo me he tomado la libertad de hacerlo más parecido al diseño original, así que le he quitado una estrella jejeje
Mi código:
Tengo un error en Container 😦
Lo que hice fue poner la propiedad margin al Container que contiene a title_stars, de manera que se pueda controlar mejor:
import 'package:flutter/material.dart';
class DescriptionPlace extends StatelessWidget {
@override
Widget build(BuildContext context) {
final star = Container (
margin: EdgeInsets.only(
top: 323.0,
right: 3.0,
),
child: Icon(
Icons.star,
color: Color(0xFFf2C611),
),
);
final titleStars = Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(
top: 320.0,
left: 20.0,
right: 20.0
),
child: Text(
'Duwilli Ella',
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.w900
),
textAlign: TextAlign.left,
)
),
Row(
children: <Widget>[
star,
star,
star,
star,
star
],
)
],
);
final descriptionText = Container(
margin: EdgeInsets.only(
top: 10.0,
left: 20.0,
right: 20.0
),
child:
Text('''Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.
Suscipit commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio digniss.''',
style: TextStyle(
fontSize: 13.0
),
)
);
final descriptionPlace = Column(
children: <Widget> [
titleStars,
descriptionText,
]
);
return descriptionPlace;
}
}
Listo!
Con medidas relativas
class DescriptionPlace extends StatelessWidget{
@override
Widget build(BuildContext context) {
final title_stars = Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(
top: MediaQuery.of(context).size.height * 0.3,
left: MediaQuery.of(context).size.width * 0.1,
right: MediaQuery.of(context).size.width * 0.1
),
child: Text("Duwili Ella", style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.w900
),
textAlign: TextAlign.left,
),
)
],
);
return title_stars;
}
}```
Me salió así, viendo la documentación
import 'package:flutter/material.dart';
class DescriptionPlace extends StatelessWidget {
@override
Widget build(BuildContext context) {
final comment = Container(
margin: EdgeInsets.only(top: 10.0, left: 20, right: 20),
child: Text(
"""Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum temporibus fugit voluptas at perferendis nemo, eiu incidunt distinctio repellat laboriosam reiciendis vel porro impedit officiis adipisci, tempore vero hic obcaecati! Alias quas quam quaerat pariatur excepturi officia quibusdam, quia impedit placeat qui nostrum iure quod illum sunt possimus, molestias exercitationem. """,
style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500),
textAlign: TextAlign.left,
),
);
final star = Container(
margin: EdgeInsets.only(top: 323.0, right: 3.0),
child: Icon(
Icons.star,
color: Color(0xFFf2C611),
),
);
final titleStars = Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(
top: 320.0,
left: 20.0,
right: 20.0,
),
child: Text(
'Duwili ella',
style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.w900),
textAlign: TextAlign.left,
),
),
Row(
children: <Widget>[star, star, star, star, star],
),
],
);
final description = Column(
children: <Widget>[
titleStars,
comment,
],
);
return description;
}
}
import 'package:flutter/material.dart';
class DescriptionPlace extends StatelessWidget {
@override
Widget build(BuildContext context) {
final description_text = Container (
margin: EdgeInsets.only(
top: 3.0,
left: 20.0
),
child: RichText (
textAlign: TextAlign.left,
text: TextSpan(
style: TextStyle (
color: Colors.black,
fontSize: 16.0,
height: 1.1
),
children: <TextSpan> [
TextSpan(
//Aca se pueden colocar los stylos por parrafo
text:
"Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
"Aenean commodo ligula eget dolor. Aenen messa."
"Cum sociis natoque penatibus et magnis dis parturient montes"
"nascetur ridiculus mus. DOnec quam felis, ultricies nec,"
"pellentesque,"
),
TextSpan(
text:
"\n\nPretium quis, sem. Nulia consequat massa quis enim."
"Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu."
"In enim justo, rhoncus ut, imperdiet a."
""
),
]
)
)
);
final star = Container (
margin: EdgeInsets.only(
top: 323.0,
right: 3.0
),
child: Icon(
Icons.star,
color: Colors.amberAccent
)
);
final title_stars = Row (
children: <Widget>[
Container (
margin: EdgeInsets.only(
top: 320.0,
left: 20.0,
right: 20.0
),
child: Text(
"Duwili eela",
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.bold
),
textAlign: TextAlign.left,
)
),
Row (
children: <Widget>[
star,
star,
star,
star,
star
],
),
]
);
return Column (
children: <Widget>[
title_stars,
description_text
],
);
}
}```
import 'package:flutter/material.dart';
class DescriptionPlace extends StatelessWidget {
@override
Widget build(BuildContext context) {
final star = Container (
margin: EdgeInsets.only(
top: 323.0,
right: 3.0
),
child: Icon(
Icons.star,
color: Colors.amberAccent
)
);
final title_stars = Row (
children: <Widget>[
Container (
margin: EdgeInsets.only(
top: 320.0,
left: 20.0,
right: 20.0
),
child: Text(
"Duwili ela",
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.w900
),
textAlign: TextAlign.left,
)
),
Row (
children: <Widget>[
star,
star,
star,
star,
star
],
)
]
);
return title_stars;
}
}```
Saludos
espero que esten todos bien, desde que inicie el proyecto no eh podido correr el app en el amulador de Android Studio, me da este error
Exception in thread “main” java.util.zip.ZipException: error in opening zip file
at java.util.zip.ZipFile.open(Native Method)
at java.util.zip.ZipFile.<init>(ZipFile.java:225)
at java.util.zip.ZipFile.<init>(ZipFile.java:155)
at java.util.zip.ZipFile.<init>(ZipFile.java:169)
at org.gradle.wrapper.Install.unzip(Install.java:214)
at org.gradle.wrapper.Install.access$600(Install.java:27)
at org.gradle.wrapper.Install$1.call(Install.java:74)
at org.gradle.wrapper.Install$1.call(Install.java:48)
at org.gradle.wrapper.ExclusiveFileAccessManager.access(ExclusiveFileAccessManager.java:65)
at org.gradle.wrapper.Install.createDist(Install.java:48)
at org.gradle.wrapper.WrapperExecutor.execute(WrapperExecutor.java:128)
at org.gradle.wrapper.GradleWrapperMain.main(GradleWrapperMain.java:61)
[!] Gradle threw an error while trying to update itself. Retrying the update…
Finished with error: Gradle task assembleDebug failed with exit code 1
Me pueden ayudar Please!
import 'package:flutter/material.dart';
class DescriptionComponent extends StatelessWidget {
@override
Widget build(BuildContext context) {
final star = Row(children: <Widget>[
Container(
margin: EdgeInsets.only(top: 323, right: 3),
child: Icon(Icons.star, color: Color(0xFFF2C611))
),
]);
final mediumStar = Row(children: <Widget>[
Container(
margin: EdgeInsets.only(top: 323, right: 3),
child: Icon(Icons.star_half, color: Color(0xFFF2C611)),
),
]);
final voidStar = Row(children: <Widget>[
Container(
margin: EdgeInsets.only(top: 323, right: 3),
child: Icon(Icons.star_border, color: Color(0xFFF2C611)),
),
]);
final description = Text.rich(
TextSpan(
style: TextStyle(fontSize: 16, color: Color.fromRGBO(123, 123, 123, 1)),
children: <TextSpan>[
TextSpan(
text: 'Ometepec', style: TextStyle(fontWeight: FontWeight.bold)),
TextSpan(text: ' (en náhuatl: '),
TextSpan(
text: ' ome, tepetl, ‘dos, cerros’ ‘lugar entre dos cerros’).',
style: TextStyle(fontStyle: FontStyle.italic)),
TextSpan(
text: ' La palabra Ometepec se deriva de los vocablos de origen náhuatl: ome que significa dos y tepetl que significa cerro.\n\n En conjunto dichos vocablos se expresan como “lugar entre dos cerros”',
style: TextStyle(fontStyle: FontStyle.normal)),
],
),
);
final textDescription = Container(
child: description,
margin: EdgeInsets.all(20),
);
final titleStars = Column(children: [
Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(
top: 320,
left: 20,
right: 20,
),
child: Text(
"Ometepec Gro",
style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
textAlign: TextAlign.left,
),
),
Row(
children: <Widget>[star, star, star, mediumStar, voidStar],
),
],
),
textDescription
]);
return titleStars;
}
}
alguien sabe para que sirve el decorador override?
(si es que es un decorador)
Dependiendo del widget con el que deseamos distribuir nuestro contenido, dependerá de o tendrá lo siguiente:
description_place.dart
import 'package:flutter/material.dart';
class DescriptionPlace extends StatelessWidget {
const DescriptionPlace({super.key});
@override
Widget build(BuildContext context) {
final star = Container(
margin: const EdgeInsets.only(
top: 323.0,
right: 3.0,
),
child: const Icon(
Icons.star,
color: Color(0xFFf2C611),
),
);
final title_stars = Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
margin: const EdgeInsets.only(
top: 320.0,
left: 20.0,
right: 20.0,
),
child : const Text(
'Duwili Ella',
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.w900,
),
textAlign: TextAlign.left,
)
),
Row(
children: <Widget>[
star,
star,
star,
star,
star,
],
),
],
),
Container(
margin: const EdgeInsets.only(
top: 20.0,
left: 20.0,
right: 20.0,
),
child: const Text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. \n\nDonec auctor, nisl vitae tincidunt tincidunt, nunc nisl ultricies nunc, vitae ultricies nisl nisl vitae nisl. Donec auctor, nisl vitae tincidunt tincidunt, nunc nisl ultricies nunc, vitae ultricies nisl nisl vitae nisl.",
),
)
],
);
return title_stars;
}
}
Reto cumplido:
final title = Column(children: [
Row(children: [
Container(
margin: const EdgeInsets.only(left: 10.0, top: 320.0),
child: const Text("Fernando Romero",
style: TextStyle(
fontSize: 24.0,
color: Colors.green,
fontWeight: FontWeight.w900)),
),
Container(
margin: const EdgeInsets.only(left: 1.0, top: 320.0), child: stars),
]),
Container(
margin: const EdgeInsets.only(left: 10.0, right: 10.0, top: 10.0),
child: Column(children: const [
Text(
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."),
SizedBox(height: 10.0)
,Text(
"It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with")
]))
]);
Aqui mi estructura de la practica
@override
Widget build(BuildContext context) {
//star layout
final star = Container(
margin: const EdgeInsets.only(top: 370, right: 3.0),
child: const Icon(
Icons.star,
color: Color(0xFFf2C611),
),
);
//Description
final description = Container(
margin: const EdgeInsets.symmetric(vertical: 5.0, horizontal: 20.0),
child: const Text(
'Aqui se genera una texto Lorem ipsum dolor sit amet. Ex quia autem'
'est aliquam aliquam qui illum delectus et consequuntur internos ut'
'voluptatem exercitationem. Qui cupiditate illum sit possimus autem'
'est harum neque vel nemo quidem ut voluptatem nostrum ut nemo'
'asperiores? Non quos optio rem neque delectus et tempora'
'reprehenderit hic odit enim.',
style: TextStyle(height: 1.5, letterSpacing: 0.6, fontSize: 16),
));
return Column(
children: [
Row(
children: <Widget>[
Container(
margin: const EdgeInsets.only(top: 370, left: 20.0, right: 20.0),
child: const Text("Completado :)",
style: TextStyle(fontSize: 27, fontWeight: FontWeight.w900)),
),
Row(
children: [star, star, star, star, star],
)
],
),
description
],
);
}
Pregunta en mi caso particular estaba usando mi celular para probar, la cuestion es que la fuente era demasiado grande y al agregar 5 estrellas aparecia una banda gigante diciendo que basicamente se esta tapando el contenido por tantos pixeles por el lado derecho, como se puede evitar esto? osea que si el nombre de una persona es muuy largo no se destruya la app?
Cree los contenedores aparte y solamente los mande a llamar dentro de su estructura superior.
.
Para darle mi toque personal, en vez de lugares lo cambié por personajes de anime, dándole a cada uno su calificación y una pequeña descripción.
Mi parte gracias a los compañeros por los tips
import 'package:flutter/material.dart';
class DescriptionPlace extends StatelessWidget {
const DescriptionPlace({super.key});
@override
Widget build(BuildContext context) {
final star = Container(
margin: const EdgeInsets.only(top: 320.0, right: 3.0),
child: const Icon(Icons.star, color: Color(0xFFF2C611)),
);
final paragraph = Container(
margin: const EdgeInsets.only(left: 20.0, right: 20.0),
child: Column(children: const [
Text(
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n\n'),
Text(
'Pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdient a.')
]),
);
final titleStars = Row(
children: <Widget>[
Container(
margin: const EdgeInsets.only(top: 320.0, left: 20.0, right: 20.0),
child: const Text(
'Duwili Ella',
style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.w900),
textAlign: TextAlign.left,
),
),
Row(
children: [star, star, star, star, star],
)
],
);
final content = Column(children: <Widget>[titleStars, paragraph]);
return content;
}
}
import 'package:flutter/material.dart';
class DescriptionPlace extends StatelessWidget {
@override
Widget build(BuildContext context) {
final star = Container(
margin: const EdgeInsets.only(
top: 323.0,
right: 3.0,
),
child: const Icon(
Icons.star,
color: Color(0xFFf2C611),
));
// ignore: non_constant_identifier_names
final title_stars = Row(
children: <Widget>[
Container(
margin: const EdgeInsets.only(
top: 320.0,
left: 20.0,
right: 20.0,
),
child: const Text(
"Duwili Ella",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w900,
),
textAlign: TextAlign.left,
),
),
Row(
children: <Widget>[
star,
star,
star,
star,
star,
],
)
],
);
final descriptionContent = Container(
width: double.infinity,
margin: const EdgeInsets.only(
left: 20.0,
right: 20.0,
top: 15.0,
),
child: const Text(
'''Lorem ipsum dolor sit amet, consecteuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pelientesque eu.
Pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdient a.''',
style: TextStyle(fontSize: 12),
),
);
final descriptionContainer = Column(
children: <Widget>[
title_stars,
descriptionContent,
],
);
return descriptionContainer;
}
}
Yo lo implementé de esta manera :B
final text_desc = Container(
margin: EdgeInsets.only(
top: 10.0,
left: 20.0,
right: 20.0
),
child: Text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut semper ornare sodales. Cras condimentum enim purus, sed placerat nunc volutpat et. Nunc malesuada, quam vel consectetur convallis, libero nisi volutpat nibh, ut aliquet diam eros eu tortor. Cras eget accumsan purus. Quisque sed justo convallis, efficitur ipsum sed, hendrerit nisl. \nDuis tincidunt, est vitae molestie laoreet, elit dolor varius dui, ac malesuada ex orci vel libero.",
style: TextStyle(
fontWeight: FontWeight.w300
),
),
);
final place_description = Column(
children: <Widget>[
title_stars,
text_desc
],
);
return place_description;
para aquel que no le tome star en singular coloquela en plural stars, quedaria algo como Row( children: <Widget>[ stars, stars, stars, stars, stars ], )
Me quedo asi:
Por si a alguien le ayuda:
final descriptionText = Container(
margin: const EdgeInsets.only(
top: 20.0,
left: 20.0,
right: 20.0,
),
child: const Text(
'Lorem ipsum..'));
...
final descriptionPlace = Column(
children: <Widget>[
titleStars,
descriptionText,
]);
return descriptionPlace;
Enfrente de retornar titleStars retorna descriptionPlace, ademas puse un lorem ipsum bastante largo asi que para evitar que saliera un error de que el height esta overflow, en main.dart puse esto:
home: Scaffold(
resizeToAvoidBottomInset: true,
appBar: AppBar(
title: Text("Un mundo feliz"),
),
body: SingleChildScrollView(
child: DescriptionPlace(),
)),
class DescriptionPlace extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
final start = Container(
margin: const EdgeInsets.only(top: 323.0, right: 3.0),
child: const Icon(
Icons.star,
color: Color(0xFFf2C611),
),
);
final titleStarts = Row (
children: <Widget>[
Container(
margin: const EdgeInsets.only(
top: 320.0,
left: 20.0,
right: 20.0
),
child: const Text(
"Duwili Ella",
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.w900,
),
textAlign: TextAlign.start,
),
),
Row(
children: [
start,
start,
start,
start,
start
],
)
],
);
final description = Container(
margin: const EdgeInsets.only(
top: 12.0,
left: 20.0,
right: 20.0
),
child: const Text(
"Vestibulum laoreet pretium ipsum in lacinia. Quisque nibh metus, finibus eu imperdiet nec, malesuada in ipsum. Nam arcu nunc, porta dapibus nunc euismod, placerat egestas ligula. \n\nIn molestie at eros eget rhoncus. Etiam faucibus dictum nulla, sit amet gravida dui dignissim non. Sed vitae nibh nec massa rutrum vulputate a et odio.",
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.w500,
color: Colors.black54,
),
textAlign: TextAlign.start,
),
);
return Column(
children: [
titleStarts,
description
],
);
}
}
import 'package:flutter/material.dart';
class Title_Stars extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
final star = Container(
margin: EdgeInsets.only(
top: 323.0,
right: 3.0,
),
child: Icon(
Icons.star,
color: Colors.amber,
),
);
final Notstar = Container(
margin: EdgeInsets.only(
top: 323.0,
right: 3.0,
),
child: Icon(
Icons.star_border,
color: Colors.amber,
),
);
final title_stars = Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(
top: 320,
left: 20.0,
right: 20.0,
),
child: Text(
"Gabriel el Novato",
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.w900
),
textAlign: TextAlign.left,
),
),
Row(
children: [
star,
star,
star,
Notstar,
Notstar
],
)
],
);
final texto_info = Column(
children: [
title_stars,
Container(
margin: EdgeInsets.only(
top: 20,
left: 20.0),
alignment: Alignment.topLeft,
child: RichText(
text: const TextSpan(
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black38,
fontSize: 17,
),
children: [
TextSpan(
text: "Primer párrafo de texto. \n",
),
TextSpan(
text: "Segundo párrafo de texto.",
),
]
),
),
),
],
);
return texto_info;
}
}
import ‘package:flutter/material.dart’;
class DescriptionPlace extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
final star = Container(
margin: EdgeInsets.only(
top: 323.0,
right: 3.0,
),
child: Icon(
Icons.star,
color: Color(0xFFf2C611),
),
);
final title_stars = Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(
top: 320.0,
left: 20.0,
right: 20.0,
),
child: Text(
"Duwili Ella",
style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.w900),
textAlign: TextAlign.left,
),
),
Row(
children: <Widget>[star, star, star, star, star],
),
],
);
final description_star = Container(
margin: EdgeInsets.only(
left: 20.0,
right: 20.0,
),
child: Text(
"""Lorem ipsum dolor sit amet, consecteuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pelientesque eu.Pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdient a.""",
style: TextStyle(
fontSize: 16.0,
color: Color(0xFF6D6E71),
),
textAlign: TextAlign.justify,
),
);
return Column(
children: [
title_stars,
description_star,
],
);
}
}
Aqui la manera en la que resolvi el problema saludos…
Contenido:
Segun la documentación de estilos de Flutter es preferible usar lowerCamelCase para los nombres de las variables 😋🐫
Importar el widget de Description
final description = Container(
margin: EdgeInsets.only(top: 12, right: 20.0, left: 20.0),
child: Text(
"Al contrario del pensamiento popular, el texto de Lorem Ipsum no es simplemente texto aleatorio. Tiene sus raices en una pieza cl´sica de la literatura del Latin, que data del año 45 antes de Cristo, haciendo que este adquiera mas de 2000 años de antiguedad.\n\nRichard McClintock, un profesor de Latin de la Universidad de Hampden-Sydney en Virginia, encontró una de las palabras más oscuras de la lengua del latín, consecteur, en un pasaje de Lorem Ipsum."),
);
final stars = Container(
margin: EdgeInsets.only(top: 323.0, right: 3.0),
child: Icon(
Icons.star,
color: Color(0xFFf2C611),
),
);
final title_starts = Column(
children: [
Row(
children: [
Container(
// el edgeInsert.only permite crear margenes personalizados, top, right, left, button
margin: EdgeInsets.only(top: 320.0, left: 20.0, right: 20.0),
child: Text(
"Eddy Christian",
style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.w900),
textAlign: TextAlign.left,
),
),
Row(
children: [stars, stars, stars, stars, stars],
)
],
),
description
],
);
@override
Widget build(BuildContext context) {
final star = Container(
margin: const EdgeInsets.only(
top: 323,
right: 3.0,
),
child: const Icon(
Icons.star,
color: Colors.yellow,
),
);
final star_outline = Container(
margin: const EdgeInsets.only(
top: 323,
right: 3.0,
),
child: const Icon(
Icons.star_border_outlined,
color: Colors.yellow,
),
);
final title_stars = Container(
margin: const EdgeInsets.only(
top: 320.0,
left: 20.0,
right: 20.0
),
child: const Text(
"Dwili Ella",
style: TextStyle (
fontSize: 30.0,
fontWeight: FontWeight.w900,
),
textAlign: TextAlign.left,
),
);
final description = Container(
margin: const EdgeInsets.only(
right: 20.0,
left: 20.0,
top: 5.0
),
child: Text.rich(
TextSpan(
text: lorem(words: 60, paragraphs: 2),
style: const TextStyle(fontWeight: FontWeight.w400)
)
),
);
return Column(
children: [
Row(
children: [
title_stars,
Row(
children: [
star,
star,
star,
star,
star_outline
],
)
],
),
description
],
);
}
Fuaaa, estuve 2 horas mirando mi codigo y simplemente me hacia falta 1 número en el color de la descripcion jajaja
Asi va en flutter web
se siente muy desactualizado el curso 😕
Hola este es mi aporte:
Mi solución utilizando scroll y evitando el error de flutter por pasarse del tamaño permitido.
import 'package:flutter/material.dart';
class DescriptionPlace extends StatelessWidget {
@override
Widget build(BuildContext context) {
final star = Container(
margin: EdgeInsets.only(
top: 323.00,
right: 3.0,
),
child: Icon(Icons.star, color: Color(0xFFf2c611)),
);
final description = Container(
margin: EdgeInsets.only(
top: 20.0,
right: 20.0,
left: 20.0,
bottom: 20.0,
),
child: Text(
'''Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet nulla risus. Nulla a sodales nibh. Sed ac metus convallis, pellentesque enim at, blandit justo. Sed sit amet tristique massa.
Aliquam ligula velit, rhoncus nec metus at, mattis aliquet orci. Integer quis fringilla est. Phasellus quis sagittis purus, eu congue mi. Vivamus auctor ex justo, sed condimentum nisi faucibus et. Integer vel turpis maximus, rutrum lacus et, interdum turpis. Sed posuere elit in cursus luctus''',
style: TextStyle(
fontSize: 20.0,
),
textAlign: TextAlign.justify,
),
);
final title_stars = Row(
children: [
Container(
margin: EdgeInsets.only(
top: 320.0,
left: 20.0,
right: 20.0,
),
child: Text(
"Probando",
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.w900,
),
textAlign: TextAlign.center,
),
),
Row(
children: [star, star, star, star, star],
)
],
);
return SingleChildScrollView(
child: Column(
children: [title_stars, description],
),
);
}
}
final description = Container(
margin: EdgeInsets.only(
left: 20.0,
right: 20.0
),
child: Text(
’’‘Lorem ipsum dolor sit amet, consecteuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pelientesque eu. Pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdient a.’’’,
style: TextStyle(
fontSize: 17.0,
color: Color(0xFF6D6E71)
),
textAlign: TextAlign.justify,
),
);
import ‘package:flutter/material.dart’;
class DescriptionPlace extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
final stars = Container(
margin: const EdgeInsets.only(
right: 5,
),
child: const Icon(
Icons.star,
color: Colors.amber,
),
);
final tittleStarts = Row(
children: <Widget>[
Container(
margin: const EdgeInsets.only(
right: 15,
),
child : const Text(
"Duwili Ella",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
),
Row(
children: [
stars,
stars,
stars,
stars
],
),
],
);
final descriptionText = Column(
children: [
Container(
margin: const EdgeInsets.only(
top: 20,
),
child: Column(
children: const <Widget> [
Text(
"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate, quibusdam! Iure vero officia optio aperiam voluptate modi accusantium numquam! Necessitatibus recusandae labore optio laudantium fuga nisi at rerum beatae voluptatem.",
overflow: TextOverflow.visible,
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w400,
color: Colors.black54
),
),
],
),
),
Container(
margin: const EdgeInsets.only(
top: 20,
),
child: Column(
children: const <Widget> [
Text(
"Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate, quibusdam! Iure vero officia optio aperiam voluptate modi accusantium numquam!",
overflow: TextOverflow.visible,
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w400,
color: Colors.black54
),
),
],
),
)
],
);
final component = Column(
children: [
Container(
margin: const EdgeInsets.only(
top: 320,
right: 50,
left: 20
),
child: Column(
children: [
tittleStarts,
descriptionText
],
)
)
],
);
return component;
}
}
Aquí envío el reto cumplido:
import 'package:flutter/material.dart';
class DescriptionPlace extends StatelessWidget {
@override
Widget build(BuildContext context) {
//TODO: implement build
final star = Container(
margin: const EdgeInsets.only(
top: 323.0,
right: 3.0,
),
child: const Icon(
Icons.star,
color: Color(0xFFf2C611),
),
);
final descriptionOff = Container(
margin: const EdgeInsets.only(
top: 20.0,
left: 20.0,
right: 20.0,
),
child: const Text(
"Lorem ipsum blbalnalabalnsaldjalsjdalksdkjdakfnskdf asdklfnasdflkasdf alsdjflaksdjf",
style: TextStyle(
fontFamily: "Lato",
fontSize: 16.0,
fontWeight: FontWeight.w300,
),
),
);
final titleStarts = Row(
children: <Widget>[
Container(
margin: const EdgeInsets.only(top: 320.0, left: 20.0, right: 20.0),
child: const Text(
"Duwili ella",
style: TextStyle(
fontFamily: "Lato",
fontSize: 30.0,
fontWeight: FontWeight.w900),
textAlign: TextAlign.left,
),
),
Row(
children: <Widget>[
star,
star,
star,
star,
star,
],
),
],
);
final bigCont = Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
titleStarts,
descriptionOff,
],
);
return bigCont;
}
}
Escrito por completo por github copilot 🔥🤖
Este es mi avance hasta el momento. Me encanta como con una sola clase aprendes un montón y comienzas a experimentar.
import 'package:flutter/material.dart';
class DescriptionPlace extends StatelessWidget {
@override
Widget build(BuildContext context) {
final description = Container(
margin: EdgeInsets.only(top: 20.0, right: 20.0, left: 20.0),
child: Text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
"Cras nec mauris tempor, tempus ligula id, euismod ipsum."
"Nulla in feugiat risus. Quisque condimentum nec dui in elementum."
"\n \n"
"Sed interdum volutpat ornare. Pellentesque quis ex enim. In bibendum"
", elit ut volutpat ultricies, risus eros volutpat turpis, at "
"pellentesque nibh orci et dui. Quisque imperdiet justo quis sodales"
"dictum. Duis in justo urna.",
style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.w400),
textAlign: TextAlign.left,
));
final star = Container(
margin: EdgeInsets.only(top: 323.0, right: 3.0),
child: Icon(Icons.star, color: Color(0xFFf2C611)),
);
final title_stars = Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 320.0, left: 20.0, right: 20.0),
child: Text(
"Duwili Ela",
style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.w900),
textAlign: TextAlign.left,
)),
Row(children: <Widget>[star, star, star, star, star])
],
);
return Column(children: <Widget>[title_stars, description]);
}
}
Importar el widget al main
Algo que me di cuenta al escribir código y es que muchas veces al instanciar un widget pasamos los argumentos así:
EdgeInsets.only(
top: 320.0,
left: 20.0,
right: 20.0,
),
En Android Studio si quitamos la coma del último argumento (que también es llamada trailling comma) y formateamos el código (Ctrl + Alt + L), los argumentos se reordenan en una sola línea automáticamente:
EdgeInsets.only(top: 320.0, left: 20.0, right: 20.0),
Esto es para los que les gusta tener los argumentos así, pero no quieren hacer el cambio manualmente. También, si vuelven a poner la trailling comma y formatean, se reordenan como la primera forma, consiguiendo el efecto contrario.
En 8:40 primero se borró el Scaffold, se importó el archivo description_place.dart, y luego, sin más, apareció de nuevo el Scaffold borrado y se procedió a modificar el body. Sería mejor comentar que aún no debió borrarse y listo. No pasa nada con reconocerlo, es un error minúsculo. Pasarlo por alto en cambio, no es chévere. 😉
import 'package:flutter/material.dart';
class DescriptionPlace extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
final description = Container(
margin: EdgeInsets.only(
top: 20.0,
right: 20.0,
left: 20.0
),
child: Text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus feugiat felis lectus, id sodales ligula auctor id. Aliquam venenatis justo vel ante iaculis scelerisque. Quisque suscipit mattis est a blandit. Nullam accumsan nibh sed metus pharetra consequat. Donec consequat lorem id dolor fermentum, ut ultricies augue malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce feugiat enim a venenatis placerat. Integer ut lacus eu est condimentum dignissim a quis purus.",
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w400,
color: Color(0xFF56575a)
),
),
);
final star = Container (
margin: EdgeInsets.only(
top: 323.0,
right: 3.0
),
child: Icon(
Icons.star,
color: Colors.amber,
),
);
final title_stars = Row (
children: <Widget>[
Container(
margin: EdgeInsets.only(
top: 320.0,
left: 20.0,
right: 20.0
),
child: Text(
"Duwili Ella",
style: TextStyle(
fontSize: 25.0,
fontWeight: FontWeight.w600
),
textAlign: TextAlign.left,
),
),
Row(
children: <Widget>[
star,
star,
star,
star,
star
],
),
],
);
final content = Container(
child: Column(
children: [
title_stars,
description
],
),
);
return content;
}
import 'package:flutter/material.dart';
class DescriptionPlace extends StatelessWidget {
@override
Widget build(BuildContext context) {
final star = Container(
margin: EdgeInsets.only(top: 323.0, right: 3.0),
child: Icon(Icons.star, color: Color(0xFFF2C611)),
);
final emptyStar = Container(
margin: EdgeInsets.only(top: 323.0, right: 3.0),
child: Icon(Icons.star),
);
final description = Container(
margin: EdgeInsets.only(top: 20.0, left: 20.0, right: 20.0),
child: Text(
"Lorem ipsum dolor sit amet consectetur adipiscing elit auctor, sapien leo praesent etiam iaculis metus ut, consequat lacinia taciti ultrices at tellus integer. Nulla ad conubia donec senectus netus ultrices semper, metus malesuada ridiculus mollis varius himenaeos tellus, potenti habitasse natoque phasellus integer tristique.",
style:
TextStyle(fontWeight: FontWeight.w300, color: Colors.grey.shade800),
),
);
final titleStars = Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 320.0, left: 20.0, right: 20.0),
child: Text(
'Duwili Ella',
style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.w900),
textAlign: TextAlign.left,
),
),
Row(
children: <Widget>[star, star, star, star, emptyStar],
)
],
);
return Column(
children: <Widget>[titleStars, description],
);
}
}
Aqui dejo mi codigo con el reto 😄
Hello! My solution!
/// Created by Juan Gonzalo Quiroz Cadavid
/// JuanGQCadavid at Github
import 'package:flutter/material.dart';
class DescriptionPlace extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: [
Row(
children: [
_TitlePlace("Duwili Ella"),
_StarsPlace(3)
],
),
_InformationPlace("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu posuere sem. Nulla aliquet, odio et rhoncus efficitur, nulla justo posuere erat, at molestie libero felis at purus. Proin tempor turpis nec sapien tempor malesuada. Mauris semper libero eget tortor aliquam, vel consequat nulla commodo.")
],
);
}
}
class _InformationPlace extends StatelessWidget {
final String description;
_InformationPlace(this.description);
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(
top: 20.0,
left: 20.0,
right: 20.0
),
child: Text(
description,
style: TextStyle(
fontWeight: FontWeight.w400,
color: Colors.black54
),
textAlign: TextAlign.left,
),
);
}
}
class _TitlePlace extends StatelessWidget {
final String title;
_TitlePlace(this.title);
@override
Widget build(BuildContext context) {
return Container(
child: Text(
title,
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.w900
),
textAlign: TextAlign.left,
),
margin: EdgeInsets.only(
top: 320.0,
left: 20.0,
right: 20.0,
),
);
}
}
class _StarsPlace extends StatelessWidget {
/// Btw 0 and 5
final int stars;
_StarsPlace(this.stars);
@override
Widget build(BuildContext context) {
List<Widget> starList = [];
for ( var iterator = 0 ; iterator < 5; iterator++) {
if (stars > iterator){
starList.add(_Star(true));
}else{
starList.add(_Star(false));
}
}
return Row(
children: starList,
);
}
}
class _Star extends StatelessWidget {
final bool isFull;
_Star(this.isFull);
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(
top: 323.0,
right: 3.0,
),
child: Icon(
isFull ? Icons.star : Icons.star_border,
color: Color(0xFFf2C611),
),
);
}
}
Hola, a quien pueda interesarle le dejó el repositorio de git dónde voy separando cada proceso en commit, así pueden apreciar de una mejor manera el código. https://github.com/crissebasbol/Dart-example-app-trips.git
Dejando mi aporte haha
import ‘package:flutter/material.dart’;
class DesriptionPlace extends StatelessWidget {
@override
Widget build(BuildContext context) {
final star1 = Container(
margin: EdgeInsets.only(
top: 320.0,
right: 3.0,
),
child: Icon(
Icons.star_border
)
);
final star = Container(
margin: EdgeInsets.only(
top: 320.0,
right: 3.0,
),
child: Icon(
Icons.star,
color: Color(0xFFf2C611),
),
);
final tite_starts = Row(
children: [
Container(
margin: EdgeInsets.only(
top: 320.0,
left: 20.0,
right: 20.0,
),
child: Text(
"Duwili Ella",
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.w900,
),
textAlign: TextAlign.center,
),
),
Row(
children: [
star,
star,
star,
star,
star1,
],
),
],
);
final descripcion_texto=Container(
margin: EdgeInsets.only(
top: 25.0,
left: 20,
),
child: Text(
'''Lorem ipsum dolor sit amet consectetur adipiscing elit auctor, sapien leo praesent etiam iaculis metus ut, consequat lacinia taciti ultrices at tellus integer.
Nulla ad conubia donec senectus netus ultrices semper, metus malesuada ridiculus mollis varius himenaeos tellus, potenti habitasse natoque phasellus integer tristique'''),
);
return Column(
children: [
tite_starts,
descripcion_texto,
],
);
}
}
import 'package:flutter/material.dart';
class DescrpicionPlace extends StatelessWidget {
@override
Widget build(BuildContext context) {
final star = Container(
margin: EdgeInsets.only(top: 323.0, right: 3.0),
child: Icon(
Icons.star,
color: Color(0xFFf2C611),
),
);
final titlestars = Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 320.0, left: 20.0, right: 20.0),
child: Text(
'Duwili Ella',
style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.w900),
textAlign: TextAlign.left,
),
),
Row(
children: <Widget>[star, star, star, star, star],
),
],
);
// ignore: unused_local_variable
final descripcio = Container(
margin: EdgeInsets.only(top: 10.0, left: 20.0, right: 20.0),
child: Text(
'Lorem ipsum dolor sit amet consectetur adipiscing elit auctor, sapien leo praesent etiam iaculis metus ut, consequat lacinia taciti ultrices at tellus integer. Nulla ad conubia donec senectus netus ultrices semper, metus malesuada ridiculus mollis varius himenaeos tellus, potenti habitasse natoque phasellus integer tristique',
style: TextStyle(fontSize: 12.0),
textAlign: TextAlign.justify,
),
);
return Column(
children: <Widget>[titlestars, descripcio],
);
}
}
import 'package:flutter/material.dart';
class DescriptionPlace extends StatelessWidget {
@override
Widget build(BuildContext context) {
final star = Container(
margin: EdgeInsets.only(
top: 323.0,
right: 3.0
),
child: Icon(
Icons.star,
color: Color(0xFFf2c611),
),
);
final title_stars = Row (
// The following elements will be stacked in the form of raw
children: <Widget>[
// containers allow to use margins
Container(
// EdgeInsets.only allow to use define top, left, right and bottom margin
margin: EdgeInsets.only(
top: 320.0,
left: 20.0,
right: 20.0
),
child: Text(
"Duwilie Elia",
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.w900
),
textAlign: TextAlign.left,
),
),
Row (
children: <Widget>[
star,
star,
star,
star,
],
)
],
);
final trip_text = Container(
margin: EdgeInsets.only(
top: 10.0,
left: 20.0,
right: 20.0
),
child: Text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque "
"interdum hendrerit scelerisque. Suspendisse pharetra ligula"
" eros, eu porta lorem sagittis at. Phasellus aliquam eros non"
" magna feugiat efficitur. Nam pharetra",
style: TextStyle(
fontSize: 15.0
),
textAlign: TextAlign.left,
),
);
final content = Column(
children: <Widget>[
title_stars,
trip_text
],
);
return content;
}
}```
Genial!!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?