Container en Flutter: No es el <div> de Papá…

Argel Bejarano
· 4 min read

Estamos de regreso en una traducción más para la comunidad en Español de Flutter, en esta ocasión hablaremos de una tema básico pero super importante, como en las entregas anteriores, esta no es la excepción se realizo previa autorización del autor original Scott Stoll y como siempre se mantendrá la traducción íntegra a la original, sin mas de momento iniciemos!

Logo de la Comunidad de Flutter en Español

Muévete <div>, llego Container().

Es asombroso! Es increíble! Lo hace todo! ¡Corta! ¡Gira!

Mira, si esta cosa pudiera lavar platos, mi novia me echaría y se casaría con el Contenedor. Entonces, ¿Cuántos te apunto? ¿Cien? ¿O quieres comprar doscientos?

Ok, pero en serio, esto realmente hace una tonelada de cosas, veo código en todas partes que usa muchos Widgets innecesarios alrededor de los Contenedores cuando la gente podría escribir mucho menos código usando la capacidad completa de sus Contenedores. Esto resulta en docenas, cientos, tal vez miles de líneas innecesarias abarrotando tu código, sin una buena razón.

Mal dev, no hay café para ti!

¿No me crees? Echa un vistazo a algún código, casi en cualquier parte, y mira que tan a menudo puedes encontrar constructores apilados encima de constructores como este:

Si eliminas los comentarios, esto es lo que mucha gente ve como normal:

  • Padding sobre un Container para obtener algo de espacio alrededor.
  • Centrar el Text.
  • Poner algo de Padding al Texto para que no este tocando las orillas del Contenedor.
  • Agregar el Texto.

Lo que necesitamos tomar en cuenta es que cada, uno, de, estos Widgets es un individuo, único, innecesarios y redundante llamada a sus constructores… y son aún más desperdiciados que todas las palabras extra que acabo de incluir en esta estúpida frase.

Entonces, como lo hace mejor un Contenedor:

5 Widgets del lado izquierdo 2 del lado derecho… y hacen lo mismo!

Si piensa que esto no se ve como un mucho ahorro, entonces ten en cuenta que este es sólo un contenedor. ¿Cuántos Contenedores usas en una aplicación? Sí, es así.

Así que aquí están los parámetros del Contenedor a los que quieres prestar más atención:

  • padding:
  • margin:
  • alignment:
  • transform:
  • foregroundDecoration:
  • decoration:

A continuación, lleva este paso más allá porque puedes poner un DecoratedBox en el parámetro de decoración y el DecoratedBox te dará acceso a todo tipo de cosas, como por ejemplo:

  • Darle forma (shape)
  • Border y Border Radius
  • Gradiente (gradient)
  • Manera de mezclar el fondo
  • Sombreado (box shadow)
  • Imagen (image)

Así que el Contenedor “simple” le permitirá rellenar, colorear, alinear, transformar, decorar y añadir margen; y usar el parámetro de decoración al máximo le permitirá tener bordes, degradados, imágenes, sombras de caja y formas.

Así que como dije, “No es el <div>” de papá, ¡así que deja de desperdiciarlo usándolo como si fuera una!

Scott Stoll es un desarrollador Freelance de Flutter, autor y orador público. Está disponible para trabajar como freelance y puede viajar para dar charlas, talleres o hacer formación en empresas. Es el organizador de GDG Cleveland, creador de #HumpDayQandA y editor en Flutter Community en Medium.


Aquí terminamos con la traducción, como dije de inicio algo básico pero muy importante, queda super recomendado siempre estar al pendiente de los trabajos de la Comunidad de Flutter siempre están apoyando al aprendizaje desde bases como completamente avanzados.

Me retiro pero amenazo con regresar de nuevo con mas traducciones 😃 les dejo mi cuenta de Twitter donde siempre estoy compartiendo las novedades del equipo de Flutter, Dart y de todo el universo de Flutter…

No dejen de aletear!

Comunidad Flutter

Artículos e Historias de la Comunidad de Flutter

Argel Bejarano

Written by

Flutter & Dart and Golang evangelist | Speaker and Editor from Comunidad Flutter | Co-Founder @EsFlutter | Dart Professor at Platzi

Comunidad Flutter

Artículos e Historias de la Comunidad de Flutter

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade