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 1: | Línea 1: | ||
| − | * Más información: | + | ==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. | ||
| + | |||
| + | |||
| + | <br /> | ||
| + | ==Column / Row== | ||
| + | |||
| + | * Más información en: | ||
| + | :* https://flutter.dev/docs/development/ui/layout | ||
| + | :* https://api.flutter.dev/flutter/widgets/Column-class.html | ||
| + | :* https://api.flutter.dev/flutter/widgets/Row-class.html | ||
| + | |||
| + | * 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. | ||
| + | |||
| + | [[Imagen:Flutter_dart_colrow_1.JPG|400px|center]] | ||
| + | <center><small>Imagen obtenida [https://flutter.dev/docs/development/ui/layout de este sito web]</small></center> | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | <br /> | ||
| + | |||
| + | |||
| + | ==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 | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | <br /> | ||
| + | ==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://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/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/developing-for-multiple-screen-sizes-and-orientations-in-flutter-fragments-in-flutter-a4c51b849434 | ||
:* https://medium.com/flutter-community/build-responsive-uis-in-flutter-fd450bd59158 | :* 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. | * En el Card Widget vimos que disponemos del parámetro clipBehavior para 'recortar' el contenido y que se ajuste a los bordes redondeados. | ||
| Línea 22: | Línea 66: | ||
<br /> | <br /> | ||
| + | |||
[https://wiki.cifprodolfoucha.es/index.php?title=Programaci%C3%B3n_de_dispositivos_m%C3%B3viles_con_FLUTTER#Unidad_3%3A_Flutter._Dise.C3.B1o_gr.C3.A1fico Enlace a la página principal de la UD3] | [https://wiki.cifprodolfoucha.es/index.php?title=Programaci%C3%B3n_de_dispositivos_m%C3%B3viles_con_FLUTTER#Unidad_3%3A_Flutter._Dise.C3.B1o_gr.C3.A1fico Enlace a la página principal de la UD3] | ||
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).
