Diferencia entre revisiones de «Flutter Widget Diseño de pantallas»
Ir a la navegación
Ir a la búsqueda
Imagen obtenida de este sito web
| Línea 21: | Línea 21: | ||
:* El widgert Row coloca los widgets uno al lado del otro. | :* El widgert Row coloca los widgets uno al lado del otro. | ||
| − | [[Imagen:Flutter_dart_colrow_1.JPG| | + | [[Imagen:Flutter_dart_colrow_1.JPG|800px|center]] |
<center><small>Imagen obtenida [https://flutter.dev/docs/development/ui/layout de este sito web]</small></center> | <center><small>Imagen obtenida [https://flutter.dev/docs/development/ui/layout de este sito web]</small></center> | ||
| Línea 29: | Línea 29: | ||
<br /> | <br /> | ||
| − | |||
==Container== | ==Container== | ||
Revisión del 10:50 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.
- El widgert Row coloca los widgets uno al lado del otro.
Container
- Padding y margin: https://api.flutter.dev/flutter/widgets/Padding-class.html
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
- https://flutter.dev/docs/development/ui/layout
- https://esflutter.dev/docs/development/ui/layout#organiza-multiples-widgets-vertical-y-horizontalmente
- https://medium.com/comunidad-flutter/construya-uis-responsivas-en-flutter-f528d16b50a4
- https://medium.com/flutter-community/developing-for-multiple-screen-sizes-and-orientations-in-flutter-fragments-in-flutter-a4c51b849434
- https://medium.com/flutter-community/build-responsive-uis-in-flutter-fd450bd59158
- 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).
