Flutter Widget Diseño de pantallas - Historial de revisiones

Angelfg: /* Container */

2024-10-19T18:04:00Z

Container

Angelfg: /* Column / Row */

2024-10-19T17:38:00Z

Column / Row

Angelfg: /* Rows y Columns con widget que se expanden */

2024-10-17T18:31:30Z

Rows y Columns con widget que se expanden

Angelfg: /* Column / Row */

2024-10-17T17:02:29Z

Column / Row

Angelfg: /* Container */

2023-10-04T06:50:06Z

Container

Angelfg: /* Container */

2023-10-04T06:32:57Z

Container

Angelfg: /* Container */

2023-10-02T16:41:03Z

Container

Angelfg: /* Container */

2023-10-02T16:11:50Z

Container

Angelfg: /* Container */

2022-10-09T10:18:16Z

Container

Angelfg: /* Container */

2022-10-09T09:47:45Z

Container

← Revisión anterior		Revisión del 18:04 19 oct 2024
Línea 431:		Línea 431:
	)		)
	</syntaxhighlight>		</syntaxhighlight>
		+
		+
		+	: Al poner alignment, debe de posicionar el contenedor con respecto a su contenedor padre por lo que debe determinar que tamaño tiene. En ese caso se expandirá hasta encontrar un límite.
		+

← Revisión anterior		Revisión del 17:38 19 oct 2024
Línea 116:		Línea 116:
	</syntaxhighlight>		</syntaxhighlight>

		+
		+	: En este ejemplo hacemos que el contenido se centre en su eje principal (verticalmente). Funciona debido a que el Column se expande en su eje main.
		+	: Por otra parte, en su eje cross (horizontalmente) al usar textos, estos hacen que el espacio que reserva el row se adapte al tamaño de los mismos (no los expande) y por eso al situarlos al final horizontalmente, lo hacen con respecto al texto más largo. Si rodeamos el Column con un Container y le damos un ancho, la alineación la harían con respecto al tamaño en ancho de dicho container.

@@ Línea 193: / Línea 193: @@
 </syntaxhighlight>
-: ¿ Por qué necesario un width en la lista ?
+: ¿ Por qué es necesario un width en la lista ?
 : Porque en el eje main axis del Row no se establece límites y por tanto la lista se intenta expandar horizontalmente para poder añadir sus elementos y al no encontrar límites nos dará un error. Por lo tanto, <u>siempre deberemos poner un límite en el eje de scroll de una lista cuando se encuentre dentro de un row/column</u>
 : Verticalmente (que es el Cross Axis del Row) no tenemos problema ya que la lista se va a expandir hasta lo máximo que permite su padre que es el scaffold (en este ejemplo)
@@ Línea 278: / Línea 278: @@
 <br />
 ===Expanded===

← Revisión anterior		Revisión del 17:02 17 oct 2024
Línea 160:		Línea 160:

	</syntaxhighlight>		</syntaxhighlight>
		+
		+
		+	<br />
		+	===Rows y Columns con widget que se expanden===
		+
		+	* Row no tiene límite en su eje main axis (horizontal) y por eso si ponemos muchos elementos podemos quedarnos sin espacio.
		+	: Verticalmente intenta darle el espacio que necesita y si el children se expande (como un Container) le dará todo el espacio vertical hasta su contenedor padre.
		+
		+	: Column no tiene límite en su eje main axis (verticalmente) y por eso si ponemos muchos elementos podemos quedarnos sin espacio.
		+	: Horizontalmente intenta darle el espacio que necesita y si el children se expande (como un Container) le dará todo el espacio horizontal hasta su contenedor padre.
		+
		+
		+	* Imaginemos que tenemos un row con un listview en su interior con la dirección de scroll horizontal (os dará un error):
		+	:<syntaxhighlight lang="java" enclose="div" highlight="">
		+	return Scaffold(
		+	appBar: AppBar(
		+	title: const Text('ROWS_COLS'),
		+	),
		+	body: Row(
		+	children: [
		+	ListView(
		+	scrollDirection: Axis.horizontal,
		+	children: [
		+	Text('1111111'),
		+	Text('2222222'),
		+	Text('3333333'),
		+
		+	],
		+	),
		+	);
		+
		+	</syntaxhighlight>
		+
		+	: ¿ Por qué necesario un width en la lista ?
		+	: Porque en el eje main axis del Row no se establece límites y por tanto la lista se intenta expandar horizontalmente para poder añadir sus elementos y al no encontrar límites nos dará un error. Por lo tanto, <u>siempre deberemos poner un límite en el eje de scroll de una lista cuando se encuentre dentro de un row/column</u>
		+	: Verticalmente (que es el Cross Axis del Row) no tenemos problema ya que la lista se va a expandir hasta lo máximo que permite su padre que es el scaffold (en este ejemplo)
		+
		+	:<syntaxhighlight lang="java" enclose="div" highlight="">
		+	return Scaffold(
		+	appBar: AppBar(
		+	title: const Text('ROWS_COLS'),
		+	),
		+	body: Row(
		+	children: [
		+	Container(
		+	width: 100,
		+	color: Colors.blue,
		+	child: ListView(
		+	scrollDirection: Axis.horizontal,
		+	children: [
		+	Text('1111111'),
		+	Text('2222222'),
		+	Text('3333333'),
		+
		+	],
		+	),
		+	],
		+	),
		+	);
		+
		+	</syntaxhighlight>
		+
		+	* Cambiemos ahora la orientación del scroll de la lista a vertical (dará un error):
		+	:<syntaxhighlight lang="java" enclose="div" highlight="">
		+	return Scaffold(
		+	appBar: AppBar(
		+	title: const Text('ROWS_COLS'),
		+	),
		+	body: Row(
		+	children: [
		+	ListView(
		+	scrollDirection: Axis.vertical,
		+	children: [
		+	Text('1111111'),
		+	Text('2222222'),
		+	Text('3333333'),
		+
		+	],
		+	),
		+	);
		+
		+	</syntaxhighlight>
		+
		+
		+	: En este caso necesitamos establecer limitaciones en el ancho y en el alto. ¿ Por qué ?
		+	: En el alto ya que la lista se va a expandir para dar espacio a los elementos que va a añadir (verticalmente) y no tiene un límite de espacio establecido.
		+	: En el ancho ya que la lista también se expande horizontalmente, pero a diferencia del caso anterior, al estar dentro de un row no tiene límite horizontal al ser el main axis del row.
		+
		+
		+	:<syntaxhighlight lang="java" enclose="div" highlight="">
		+	return Scaffold(
		+	appBar: AppBar(
		+	title: const Text('ROWS_COLS'),
		+	),
		+	body: Row(
		+	children: [
		+	Container(
		+	width: 100,
		+	height: 200,
		+	color: Colors.blue,
		+	child: ListView(
		+	scrollDirection: Axis.horizontal,
		+	children: [
		+	Text('1111111'),
		+	Text('2222222'),
		+	Text('3333333'),
		+
		+	],
		+	),
		+	],
		+	),
		+	);
		+
		+	</syntaxhighlight>
		+

@@ Línea 285: / Línea 285: @@
-* Contenedor que permite 'envolver' cualquier widget y con el cual podemos establecer un tamaño, padding y margin.
+* Contenedor que permite 'envolver' cualquier widget y con el cual podemos establecer un tamaño, padding, margin, color de fondo y borde entre otras propiedades.
 : La diferencia entre margin y padding es la misma que en HTML con sus div´s.
 : Todos los contenidos conforman un contenedor de forma rectangular que lo rodea. El marign es el espacio que hay entre dos contenedores y el padding es el espacio que hay entre el contenido y su contenedor. Más información [https://docs.microsoft.com/es-es/xamarin/xamarin-forms/user-interface/layouts/margin-and-padding en este enlace].

@@ Línea 303: / Línea 303: @@
 :'''Nota importante:'''
 :* Si tenemos un contenedor dentro de otro contenedor, el contenedor interior <u>se expandirá hasta ocupar todo el espacio del contenedor padre</u>. Por lo tanto si intentamos alinear el contenido no funcionará. Debemos establecer un tamaño más pequeño en el contenedor hijo y desde el contenedor padre, donde debe situarse el contenedor hijo con la propiedad '''alignment'''.
-:* Se un contenedor tiene la propiedad alignmet, el child del mismo se situará en lo indicado por alignment '''y también expande el container'''. Es decir, para que puede alienar el contenido a una posición (el child) es necesario que el contenedor se expanda.
+:* Se un contenedor tiene la propiedad alignmet, el child del mismo se situará en lo indicado por alignment '''.
 ::<syntaxhighlight lang="java" enclose="div" highlight="">
 Container(

← Revisión anterior		Revisión del 16:41 2 oct 2023
Línea 301:		Línea 301:


−	:'''Nota:''' Si tenemos un contenedor dentro de otro contenedor, el contenedor interior <u>se expandirá hasta ocupar todo el espacio del contenedor padre</u>. Por lo tanto si intentamos alinear el contenido no funcionará. Debemos establecer un tamaño más pequeño en el contenedor hijo y desde el contenedor padre, donde debe situarse el contenedor hijo con la propiedad '''alignment'''.	+	:'''Nota importante:'''
−		+	:* Si tenemos un contenedor dentro de otro contenedor, el contenedor interior <u>se expandirá hasta ocupar todo el espacio del contenedor padre</u>. Por lo tanto si intentamos alinear el contenido no funcionará. Debemos establecer un tamaño más pequeño en el contenedor hijo y desde el contenedor padre, donde debe situarse el contenedor hijo con la propiedad '''alignment'''.
		+	:* Se un contenedor tiene la propiedad alignmet, el child del mismo se situará en lo indicado por alignment '''y también expande el container'''. Es decir, para que puede alienar el contenido a una posición (el child) es necesario que el contenedor se expanda.
		+	::<syntaxhighlight lang="java" enclose="div" highlight="">
		+	Container(
		+	margin: EdgeInsets.all(10.0), // Establece un margin de 10 en todas las direcciones
		+	alignment: Alignment.center, // Expande y centra
		+	color: Colors.yellow,
		+	child: Text('CONTENEDOR 3'),
		+	)
		+	</syntaxhighlight>

← Revisión anterior		Revisión del 16:11 2 oct 2023
Línea 365:		Línea 365:

	</syntaxhighlight>		</syntaxhighlight>
		+
		+
		+
		+	<br />
		+	* El widget Container también tiene entre sus propiedades un constraint de tipo BoxContraints, con lo que podemos establecer un ancho y alto al igual que hacemos con width - height. La diferencia es que de esta forma el tamaño del contenedor puede variar entre un max-min.
		+	:<syntaxhighlight lang="java" enclose="div" highlight="">
		+	Container(
		+
		+	constraints: BoxConstraints(
		+	maxHeight: 100,
		+	maxWidth: 100,
		+	minHeight: 50,
		+	minWidth: 50,
		+	),
		+	color: Colors.red,
		+	),
		+	</syntaxhighlight>
		+

← Revisión anterior		Revisión del 10:18 9 oct 2022
Línea 301:		Línea 301:


−	* '''Nota ~~Importante~~:''' Si tenemos un contenedor dentro de otro contenedor, el contenedor interior <u>se expandirá hasta ocupar todo el espacio del contenedor padre</u> ~~aunque tenga establecido~~ un tamaño~~. Si queremos que esto no sucede, debemos de indicar~~ desde el contenedor padre, donde debe situarse el contenedor hijo con la propiedad '''alignment'''.	+	:'''Nota:''' Si tenemos un contenedor dentro de otro contenedor, el contenedor interior <u>se expandirá hasta ocupar todo el espacio del contenedor padre</u>. Por lo tanto si intentamos alinear el contenido no funcionará. Debemos establecer un tamaño más pequeño en el contenedor hijo y desde el contenedor padre, donde debe situarse el contenedor hijo con la propiedad '''alignment'''.

← Revisión anterior		Revisión del 09:47 9 oct 2022
Línea 275:		Línea 275:

	* Más información en https://api.flutter.dev/flutter/widgets/Container-class.html		* Más información en https://api.flutter.dev/flutter/widgets/Container-class.html
		+	* Ejercicios de diseño empleando Container y sus propiedades: https://medium.com/flutter-espa%C3%B1a/desaf%C3%ADos-con-flutter-container-38842d23e2b7