Flutter Widget Diseño de pantallas
Revisión del 10:50 9 ago 2021 de Angelfg (discusión | contribuciones)
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).
