Flutter Diálogos - Historial de revisiones

Angelfg: /* ShowDialog con un TextField */

2022-12-11T16:59:10Z

ShowDialog con un TextField

Angelfg en 16:56 11 dic 2022

2022-12-11T16:56:43Z

Angelfg: /* DatePicker / TimePicker */

2021-09-22T18:17:54Z

DatePicker / TimePicker

Angelfg: /* DatePicker / TimePicker */

2021-09-22T18:17:09Z

DatePicker / TimePicker

Mostrar los cambios

Angelfg: /* DatePicker / TimePicker */

2021-09-22T18:03:49Z

DatePicker / TimePicker

Angelfg: /* AlertDialog */

2021-09-22T17:58:26Z

AlertDialog

Angelfg: /* Intruducción */

2021-09-22T17:54:51Z

Intruducción

Angelfg: /* Intruducción */

2021-09-22T17:53:59Z

Intruducción

Angelfg: /* AlertDialog */

2021-09-22T17:53:29Z

AlertDialog

Angelfg: /* TimePickerDialog */

2021-09-22T17:48:57Z

TimePickerDialog

@@ Línea 101: / Línea 101: @@
 <br />
-===ShowDialog con un TextField===
+===AlertDialog con un TextField===
 * En este ejemplo muestro como emplear un ShowDIalog en el que en su interior aparece un TextField donde recogemos alguna información.

← Revisión anterior		Revisión del 16:56 11 dic 2022
Línea 97:		Línea 97:

	</syntaxhighlight>		</syntaxhighlight>
		+
		+
		+
		+	<br />
		+	===ShowDialog con un TextField===
		+
		+	* En este ejemplo muestro como emplear un ShowDIalog en el que en su interior aparece un TextField donde recogemos alguna información.
		+	: El Widget principal es un StatefulWidget ya que quiero mostrar gráficamente el texto introducido en el diálogo, pero esto no tiene por que ser necesario.
		+	:<syntaxhighlight lang="java" enclose="div" highlight="19,31-50" >
		+	class DialogoConTexto extends StatefulWidget {
		+
		+	DialogoConTexto({Key? key}) : super(key: key);
		+
		+	@override
		+	State<DialogoConTexto> createState() => _DialogoConTextoState();
		+	}
		+
		+	class _DialogoConTextoState extends State<DialogoConTexto> {
		+	var textoAMostrar = '';
		+
		+	@override
		+	Widget build(BuildContext context) {
		+	return Column(
		+	children: [
		+	Text('Texto recogido del Alert Dialogo:$textoAMostrar'),
		+	ElevatedButton(
		+	onPressed: () async {
		+	String? textoDeVuelta = await mostrarDialogo(context);
		+	print(textoDeVuelta); // Podríamos no usar un stateful e trabajar sobre la variable
		+	setState(() {
		+	textoAMostrar = textoDeVuelta ?? '';
		+	});
		+	},
		+	child: Text('Mostrar Dialogo')
		+	),
		+	],
		+	);
		+	}
		+
		+	Future<String?>mostrarDialogo(BuildContext context) async {
		+	var texto = ''; // Texto escrito
		+
		+	return showDialog<String>(
		+	context: context,
		+	builder: ( context ) => AlertDialog(
		+	title: Text('Recogiendo informacion'),
		+	content: TextField(
		+	onChanged: (valor) => texto = valor ,
		+	decoration: InputDecoration(hintText: 'Texto en diálogo'),
		+	),
		+	actions: [
		+	TextButton(
		+	onPressed: () => Navigator.of(context).pop(texto), child: Text('OK') // En el pop mando el texto
		+	)
		+	],
		+	)
		+	);
		+
		+	}
		+	}
		+
		+	</syntaxhighlight>
		+
		+	:* '''Línea 19:''' Fijarse que el diálogo devuelve un Future del tipo de dato que se lee en la caja de texto, en el ejemplo un String.

@@ Línea 297: / Línea 297: @@
 '''<u>Explicaciones:</u>'''
-:* '''Línea 52: Creo un StateFulWidget ya que necesitamos actualizar las dos cajas de texto con la fecha-hora seleccionada.
+:* '''Línea 52:''' Creo un StateFulWidget ya que necesitamos actualizar las dos cajas de texto con la fecha-hora seleccionada.
-:* '''Línea 60-61: Defino las variables que van a guardar la fecha-hora seleccionada y que van a visualizar las dos cajas de texto.
+:* '''Línea 60-61:''' Defino las variables que van a guardar la fecha-hora seleccionada y que van a visualizar las dos cajas de texto.
-:* '''Línea 64-65: Creo dos TextEditingController para poder modificar el texto de las dos cajas de texto.
+:* '''Línea 64-65:''' Creo dos TextEditingController para poder modificar el texto de las dos cajas de texto.
-:* '''Línea 104-108: Gestionamos el método onTap de las dos cajas de texto (TextField) para lanzar el diálogo que muestra la fecha/hora a escojer.
+:* '''Línea 104-108:''' Gestionamos el método onTap de las dos cajas de texto (TextField) para lanzar el diálogo que muestra la fecha/hora a escojer.
-:* '''Línea 126-138: Método _mostrarDatePicker. Visualiza un DatePicker.
+:* '''Línea 126-138:''' Método _mostrarDatePicker. Visualiza un DatePicker.
-:* '''Línea 148-156: Método _mostrarTimePicker. Visualiza un TimePicker.
+:* '''Línea 148-156:''' Método _mostrarTimePicker. Visualiza un TimePicker.

← Revisión anterior		Revisión del 18:03 22 sep 2021
Línea 110:		Línea 110:
	:* https://api.flutter.dev/flutter/material/TimePickerDialog-class.html		:* https://api.flutter.dev/flutter/material/TimePickerDialog-class.html
	:* https://api.flutter.dev/flutter/material/showTimePicker.html		:* https://api.flutter.dev/flutter/material/showTimePicker.html
−
−
−	* Creamos una nueva página en la [https://wiki.cifprodolfoucha.es/index.php?title=Flutter_Widget#Estructura_de_p.C3.A1ginas carpeta pages] de nombre '''formulario_page.dart'''
−	~~: En todas las páginas haremos lo mismo:~~
−	~~:* Importamos la librería de 'material' (recordar que existe un [https://github.com/marius-h/flutter_enhancement_suite/blob/main/SNIPPETS.md#flutter-widget-snippets snippet] que lo hace automático).~~
−	~~:* Creamos una clase (FormularioPage) que derive de '''StatefulWidget'''. Se creará (si lo hacéis con un Snippet) una clase asociada que deriva de State.~~
−	~~:* Modificamos la clase State y en su métod build hacemos que devuelva un Scaffold con una Appbar (hacerlo con un Snippet)~~
−

@@ Línea 47: / Línea 47: @@
 <br />
-:<syntaxhighlight lang="java" enclose="div" highlight="15,25-46" >
+:<syntaxhighlight lang="java" enclose="div" highlight="14,23-46" >
 import 'package:flutter/material.dart';
-class AlertPage extends StatelessWidget {
+class DialogosPage extends StatelessWidget {
    @override
@@ Línea 58: / Línea 58: @@
            title: Text('Ejemplos de Alert'),
          ),
-         body: Row (
+         body: ListView(
            children: [
-            TextButton(
+              TextButton(
-              onPressed: () => _mostrarAlerta1(context).then((value) => print(value)),    // El then no es obligatorio. Lo pondríamos si queremos recibir información de vuelta
+                onPressed: () => _mostrarAlerta1(context).then((value) => print(value)),    // El then no es obligatorio. Lo pondríamos si queremos recibir información de vuelta
-              child: Text('Alerta 1',style: TextStyle(color: Colors.yellow),),
+                child: Text('Alerta 1',style: TextStyle(color: Colors.yellow),),
-              style: ElevatedButton.styleFrom(primary: Colors.blue,shape: StadiumBorder())
+                style: ElevatedButton.styleFrom(primary: Colors.blue,shape: StadiumBorder())
-−
+              )
-          ],
+            ],
+          ),
      );
+   }
-   Future _mostrarAlerta1(BuildContext context){    // Si no vamos a 'devolver' información podríamos definir el método como void y no hacer el return del showDialog.
+   Future _mostrarAlerta1(BuildContext context){
         return showDialog(context: context,
                   builder: (BuildContext context) {

@@ Línea 7: / Línea 7: @@
-* Creamos una nueva página en la [https://wiki.cifprodolfoucha.es/index.php?title=Flutter_Widget#Estructura_de_p.C3.A1ginas carpeta pages] de nombre '''alert_pages.dart'''
+* Creamos una nueva página en la [https://wiki.cifprodolfoucha.es/index.php?title=Flutter_Widget#Estructura_de_p.C3.A1ginas carpeta pages] de nombre '''dialogos_page.dart'''
 : En todas las páginas haremos lo mismo:
 :* Importamos la librería de 'material' (recordar que existe un [https://github.com/marius-h/flutter_enhancement_suite/blob/main/SNIPPETS.md#flutter-widget-snippets snippet] que lo hace automático).
-:* Creamos una clase que derive de StatelessWidget (al hacerlo será necesario implementar el método build, ya os da un aviso el Android Studio) de nombre AlertPage.
+:* Creamos una clase (DialogosPage) que derive de '''StatefulWidget'''. Se creará (si lo hacéis con un Snippet) una clase asociada que deriva de State.
-:* Dentro del método build, retornamos un widget Scaffold (recordar que existe un [https://github.com/marius-h/flutter_enhancement_suite/blob/main/SNIPPETS.md#flutter-widget-snippets snippet] que lo hace automático).
+:* Modificamos la clase State y en su métod build hacemos que devuelva un Scaffold con una Appbar (hacerlo con un Snippet)

← Revisión anterior		Revisión del 17:53 22 sep 2021
Línea 14:		Línea 14:


−	* En todos los tipos de diálogos vamos a tener que 'mostrarlo'. Para ello vamos a hacer uso de la [https://api.flutter.dev/flutter/material/showDialog.html clase showDialog] a la que vamos a tener que:
−	~~:* Enviar en forma de parámetro el '''buildcontext'''.~~
−	~~:* Devolver el Widget que queremos que se visualice como 'contenido' del diálogo. Esto lo indicamos en el parámetro '''builder'''.~~

−	~~:* barrierDismissible: Indicamos si queremos que se pueda cerrar el diálogo al pulsar fuera del mismo (por defecto es true).~~	+	<br />

−
−	:: Al instanciar esta clase, se devuelve un Future. En dicho Future puede venir información sobre qué opción fue pulsada por parte del usuario (al cerrar al diálogo con el método pop de la clase Navigator, se puede enviar información de vuelta a quien llamó al showDialog).
−
−
−	~~<br />~~
	==AlertDialog==		==AlertDialog==

@@ Línea 26: / Línea 26: @@
 <br />
 ==AlertDialog==
 * Más información en https://api.flutter.dev/flutter/material/AlertDialog-class.html
 * Este tipo de diálogos suelen ser empleados para informar al usuario de algo o para que escoga entre un número limitado de opciones (normalmente dos) la acción a seguir.

← Revisión anterior		Revisión del 17:48 22 sep 2021
Línea 448:		Línea 448:
	<br />		<br />

−	~~==TimePickerDialog==~~