Flutter Widgets: Container, Text, Icon, Row

Resumen

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

student•

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.

Juan Sebastian Avila

student•

Genial! Muchas gracias por el tip.

Usuario anónimo

user•

Sera de mucha ayuda.

leonardo moreno

student•

Alejandro Gomez

student•

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:

Vicente Rincon

student•

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

Edward Alvaro Nuñez García

student•

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;
  }
}

![](

Diego Daniel Pedroza Perez

student•

Gracias Edward! Me sirvió para seguir la clase

Jonathan Abraham Villegas Villanueva

student•

Excelente aporte compañero, me estaba quebrando la cabeza para acomodar el texto

Usuario anónimo

user•

🐱‍💻 Implementando la descripción de la interfaz.

Usuario anónimo

user•

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

Toshiro Kuramura

student•

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!

Mauricio Borre

student•

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 ???

Fernando Pioli Martínez

student•

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!

Jeffersson Muñoz Torres

student•

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 😅

Carlos Andrés Millan Satizabal

student•

A partir de Dart 2.0 ya no es obligatorio colocar la palabra reservada new.

Pablo Reyes

student•

Mi código

Alan Daniel Santiago Nuñez

student•

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

  }
}

Usuario anónimo

user•

Resuelto

JUAN SEBASTIAN RODRIGUEZ JIMENEZ

student•

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.

JUAN SEBASTIAN RODRIGUEZ JIMENEZ

student•

Pablo Gúzman

student•

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.

Jose Reyes Ospino

student•

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

Pablo Gúzman

student•

Gracias Jose-reyes

Pablo Gabriel Mederos Caballero

student•

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;
  }
}```

Sebastian Rodriguez Murillo

student•

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

Rodrigo Guerra Castilla

student•

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;
  }

}```

Juan Manuel Nava Zamudio

student•

Ahi va:

Alejandro Marroquin Cruz

student•

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?

Altair Barahona

student•

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"

Jaime Ortiz

student•

Y se puede usar un ciclo para declarar las estrellas?

Edisson Castro

student•

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

Joel Sebastian Chavez Tenorio

student•

el archivo de clase no lo puedo descargar :/

Álvaro Martínez

student•

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)

Vale San Sebas

student•

¡somos dos y veo que nadie te respondió, que mal!

Owen Enríquez

student•

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í

Byron Neftalí Ramírez Rodríguez

student•

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

![](

Celeste Sierra

student•

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