Contenido del curso
Flutter Widgets: Container, Text, Icon, Row
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.
Carlos Andrés Millan Satizabal
Estudiante
Juan Sebastian Avila
Estudiante
Usuario anónimo
User
leonardo moreno
Estudiante
Alejandro Gomez
Estudiante
Vicente Rincon
Estudiante
Edward Alvaro Nuñez García
Estudiante
Diego Daniel Pedroza Perez
Estudiante
Jonathan Abraham Villegas Villanueva
EstudianteUsuario anónimo
UserUsuario anónimo
User
Toshiro Kuramura
Estudiante
Mauricio Borre
Estudiante
Fernando Pioli Martínez
Estudiante
Jeffersson Muñoz Torres
EstudianteCarlos Andrés Millan Satizabal
EstudiantePablo Reyes
Estudiante
Alan Daniel Santiago Nuñez
EstudianteUsuario anónimo
User
JUAN SEBASTIAN RODRIGUEZ JIMENEZ
EstudianteJUAN SEBASTIAN RODRIGUEZ JIMENEZ
Estudiante
Pablo Gúzman
Estudiante
Jose Reyes Ospino
EstudiantePablo Gúzman
Estudiante
Pablo Mederos
Estudiante
Sebastian Rodriguez Murillo
Estudiante
Rodrigo Guerra Castilla
Estudiante
Juan Manuel Nava Zamudio
Estudiante
Alejandro Marroquin Cruz
Estudiante
Altair Barahona
Estudiante
Jaime Ortiz
Estudiante
Edisson Castro
Estudiante
Joel Sebastian Chavez Tenorio
Estudiante
Álvaro Martínez
Estudiante
Vale San Sebas
Estudiante
Owen Enríquez
Estudiante
Byron Neftalí Ramírez Rodríguez
Estudiante
Celeste Sierra
EstudianteEn 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.
Genial! Muchas gracias por el tip.
Sera de mucha ayuda.
Tengo el código igual al tuyo, pero por alguna razón el texto me queda centrado, a pesar de que ya le agregue la propiedad para que el texto este alineado hacia la izquierda, te paso lo mismo?, si me puedes ayudar, te agradecería.
Aquí el código de la descripción:
final description = Container( margin: EdgeInsets.only( top: 15.0, left: 20.0, right: 20.0 ), child: Text( "Un texto corto para pruebas", textAlign: TextAlign.left, style: TextStyle( fontSize: 16.0, fontWeight: FontWeight.w300, color: Color(0xFF56575a) ), ) ); return Column( children: <Widget>[ title_stars, description ], );
Aquí la imagen de como se ve:
Intenta agregar Align antes de tu container.
final description = Align( alignment: Alignment.centerLeft, child: Container( margin: EdgeInsets.only( top:20.0, left: 20.0, right:20.0 ), child:Text( "Poco texto", style:TextStyle( color:Colors.grey, fontSize: 20.0 ), textAlign: TextAlign.left ) ) );
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; } }
Gracias Edward! Me sirvió para seguir la clase
Excelente aporte compañero, me estaba quebrando la cabeza para acomodar el texto
🐱💻 Implementando la descripción de la interfaz.
import 'package:flutter/material.dart'; class DescriptionPlace extends StatelessWidget { 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( 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.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, 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, ], ); } }
Hola... tome tu codigo por que el que yo hice segun siguiendo todo el proceso no funcionaba por alguna razon .... analizare mas a detalle el codigo en conjunto con la clase para poder entenderlo mejor ...
Gracias!
EN EL MINUTO 8:42 MANDAS A BORRAR LO QUE TIENES DENTRO DE HOME EL SCAFFOLD, LO BORRAS, LUEGO IMPORTAS EL DESCRIPTION_PLACE.DART Y LUEGO POR ARTE DE MAGIA APARECE LO QUE BORRASTE DEL SCAFFOLD Y UTILIZAS EL BODY ...
QUIEN ME PUEDE EXPLICAR ESTO ES EDICION DE VIDEO ???
Tenes razón! Aprobecho esto para contestarle a Freddy cuando en unos de sus videos le quitó mérito a la educación pública y gratuita de mi país (Argentina). Uno de los problemas de la educación privada es que se ponen muchos esfuerzos en la venta del producto y no tanto en la calidad del mismo. AGUANTE LA UBA CARAJO!!!!! Juzguenla por su nivel académico!
Si tienes razón debe ser edición del vídeo. Pero sigamos que la corrección fue hecho porque no debió borrar todo lo que esta en el scaffold porque sino ya no hubiese esta la barra superior del AppBar. y por cierto muy buena observación uno ni cuenta de verdad 😅
A partir de Dart 2.0 ya no es obligatorio colocar la palabra reservada new.
Mi código
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.
Llevo un rato codiando y me confundo mucho, estar haciendo todo por partes, porque no se si lo vean pero todo cambia la forma que tienes de maquetear un diseño web, tus tienes tus horas de estilos y solo la llamas con una clase, pero aquí me confundo mucho.
Ánimo! El esfuerzo vale la pena. Después de que le agarres el ritmo vas a estar muy feliz; es como andar en cicla, ya luego lo harás naturalmente :)
Gracias Jose-reyes
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; } }```
Cuando yo uso SingleChildScroll view me genera problemas. Pero creo por que soy torpe y no hago caso a las recomendaciones del editor L: Pero si te quedo guapo
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:
El texto que yo estoy usando es más largo si se sale de los pixeles, ya intente ponerle el overflow: TextOverflow.ellipsis, pero aun sigue igual, que podria hacer? Establecerle un ancho al container? Si es asi, como podría hacer eso?
puedes darle un ancho de todo el ancho de la pantalla al container con width: double.infinity;
puedes crear una variable que capture las dimensiones de la pantalla y pasarle el ancho
Size size=Mediaquery.of(context).size;
width: size.width
Puedes reducir el tamaño de la fuente con
Text("titulo de ejemplo largoooooooo", style:TextStyle(fontsize: 10));
o puedes meter este símbolo en la mitad de tu texto para darle un salto de línea \n (el back slash se coloca con alt+92) "ejemplo de textoooooooooo que \n es muuuuuuuuuy largo y no entra en pantaaaaaaaalllaaaaa"
Y se puede usar un ciclo para declarar las estrellas?
Hola, Jaime. Claro que sí. Puedes declarar, por ejemplo, un List vacío, creas un bucle que itere cinco veces y a cada iteración añades a la lista una estrella. Después le pasas esa lista como parámetro del Row. :-)
el archivo de clase no lo puedo descargar :/
Veo que el curso muestra un return pero parece que en la versión actual de Flutter por defecto muestra un throw UnimplementedError();
Quisiera saber como se sustituye ahora (entiendo que este curso tiene más de 3 años sin actualizarse)
¡somos dos y veo que nadie te respondió, que mal!
Al implementar el método (build) de la clase que extiende de Stateless o Stateful, nos lo complementa con un comentario de tipo TODO (que nos falta algo por hacer), además de que nos incorpora la línea de código throw UnimplementedError(); para recordarnos que debemos de rellenar ese espacio, es ahí cuando lo remplazamos con el return.
Así que básicamente esa línea de código está para evitar que lo dejemos vacío y marque error.
La información la saqué de aquí
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, ], ); } }
