Diferencia entre revisiones de «Flutter Widget Diseño de pantallas»

De MediaWiki
Ir a la navegación Ir a la búsqueda
Línea 18: Línea 18:
  
 
* Estos widgets permiten 'colocar' en forma de fila o columna el cojunto de Widget que se encuentran dentro.
 
* Estos widgets permiten 'colocar' en forma de fila o columna el cojunto de Widget que se encuentran dentro.
−
:* El widget Column coloca los widgets uno debajo del otro.
+
:* El widget Column coloca los widgets uno debajo del otro (en una línea vertial)
−
:* El widgert Row coloca los widgets uno al lado del otro.
+
:* El widgert Row coloca los widgets uno al lado del otro (en una línea horizontal).
  
 
[[Imagen:Flutter_dart_colrow_1.JPG|800px|center]]
 
[[Imagen:Flutter_dart_colrow_1.JPG|800px|center]]
Línea 25: Línea 25:
  
  
 +
* <u>No poseen Scroll</u> y por lo tanto los Widgets que lo conforman no deberían ocupar más espacio que el espacio del contenedor donde se encuentren.
 +
: En caso de necesitar un scroll tendríamos que hacer uso de [https://wiki.cifprodolfoucha.es/index.php?title=Flutter_Widget_Componentes#ListView un Widget ListView] como ya vimos en la sección anterior.
 +
 +
 +
<br />
 +
===Expand===
 +
 +
* Asociado al widget Row y Column se suele utilizar el [https://api.flutter.dev/flutter/widgets/Expanded-class.html widget Expand], que permite 'expandir' el tamaño del widget hasta el tamaño de su contenedor.
 
   
 
   
  
  
 
<br />
 
<br />
 +
==Align / Center==
 +
 +
* Normalmente son usados cuando queramos centrar o alinear un único widget.
  
 
==Container==
 
==Container==

Revisión del 10:57 9 ago 2021

Introducción

  • En las secciones anteriores vimos algunos de los widgets que podemos emplear para visualizar contenidos en una pantalla.
En esta sección vamos a ver widgets que nos permiten colocar a otros widgets en ciertas posiciones en base a las propiedades que disponga el Widget.
Vienen a ser el equivalente a divs en HTML.


  • Asociado a este punto vamos a ver como identificar y solucionar los problemas que podamos tener de posicionamiento cuando los widgets no queppan en el espacio asignado por su widget contenedor.



Column / Row

  • Más información en:
  • Estos widgets permiten 'colocar' en forma de fila o columna el cojunto de Widget que se encuentran dentro.
  • El widget Column coloca los widgets uno debajo del otro (en una línea vertial)
  • El widgert Row coloca los widgets uno al lado del otro (en una línea horizontal).
Flutter dart colrow 1.JPG
Imagen obtenida de este sito web


  • No poseen Scroll y por lo tanto los Widgets que lo conforman no deberían ocupar más espacio que el espacio del contenedor donde se encuentren.
En caso de necesitar un scroll tendríamos que hacer uso de un Widget ListView como ya vimos en la sección anterior.



Expand

  • Asociado al widget Row y Column se suele utilizar el widget Expand, que permite 'expandir' el tamaño del widget hasta el tamaño de su contenedor.



Align / Center

  • Normalmente son usados cuando queramos centrar o alinear un único widget.

Container


SizeBox

Debugger Diseño

  • Debugger de diseño. Verificar el tamaño de las cajas de cada widget y localizar cual de ellas produce un error




Enlaces de interés


  • En el Card Widget vimos que disponemos del parámetro clipBehavior para 'recortar' el contenido y que se ajuste a los bordes redondeados.
Si queremos hacer lo mismo con cualquier Widget podemos hacer uso del https://api.flutter.dev/flutter/widgets/ClipRRect-class.html






Enlace a la página principal de la UD3

Enlace a la página principal del curso




-- Ángel D. Fernández González -- (2021).

Obtenido de «https://wiki.cifprodolfoucha.es/index.php?title=Flutter_Widget_Diseño_de_pantallas&oldid=15669»