Flutter Widget - Historial de revisiones

Angelfg: /* Añadiendo nuevos widgets */

2026-04-10T18:10:16Z

Añadiendo nuevos widgets

Angelfg: /* Estructura de páginas */

2026-04-10T18:09:29Z

Estructura de páginas

Angelfg: /* Widget Scafold */

2025-09-28T09:45:25Z

Widget Scafold

Angelfg: /* Widget MaterialApp */

2025-09-28T09:39:22Z

Widget MaterialApp

Angelfg: /* Widget Scafold */

2025-09-28T09:29:31Z

Widget Scafold

Angelfg: /* Widget MaterialApp */

2025-09-28T09:29:05Z

Widget MaterialApp

Angelfg: /* Estructura de páginas */

2025-09-28T09:22:40Z

Estructura de páginas

Angelfg: /* Estructura de páginas */

2025-09-28T09:22:22Z

Estructura de páginas

Angelfg: /* Estructura de páginas */

2025-09-28T09:22:06Z

Estructura de páginas

Angelfg: /* Estructura de páginas */

2025-09-28T09:17:36Z

Estructura de páginas

@@ Línea 456: / Línea 456: @@
 : Supongamos que queremos emplear un widget que nos permita mostrar mensajes informativos a un usuario de nuestra aplicación.
-<gallery caption="Obtener widget visualización de mensajes" widths="350" heights="300px" perrow="2">
+<gallery caption="Obtener widget 'visualización de mensajes'" widths="350" heights="300px" perrow="2">
 Image:Flutter_instalar_widget_1.png| Primero buscamos en el icono de lupa por la cadena '''show message''' y aparecerán una serie de resultados. Fijarse que podemos filtrar por plataforma, indicando que plataformas debe soportar el widget que queremos incorporar.
 Image:Flutter_instalar_widget_2.png| Fijarse que en el listado anterior y cuando presionamos el widget aparecen la lista de plataformas que soporta. También se debe de fijar en popularidad del widget o paquete (Point, Likes y Downloads). Aparecen una serie de pestañas.

← Revisión anterior		Revisión del 18:09 10 abr 2026
Línea 437:		Línea 437:

	</syntaxhighlight>		</syntaxhighlight>
		+
		+
		+
		+
		+
		+	<br />
		+
		+	==Añadiendo nuevos widgets==
		+
		+	* En Flutter existen muchos widgets ya hechos por programadores y que se ponen a disposición de los usuarios.
		+	: También existen paquetes que aumentan la funcionalidad de nuestro proyecto (por ejemplo, tenemos el paquete [https://pub.dev/packages/firebase_messaging firebase messaging] que nos permite usar el servicio de Firebase para enviar mensajes a dispositivos usando FCM (Firebase Cloud Messaging).
		+
		+
		+	* El sitio web se llama: [https://pub.dev/ https://pub.dev/].
		+	: En dicho sitio podemos consultar cuales son los widget o paquetes más populares o buscar por un widget o paquete concreto.
		+
		+	* Vamos a ver un ejemplo de como integrar un nuevo widget a nuestro proyecto.
		+	: Supongamos que queremos emplear un widget que nos permita mostrar mensajes informativos a un usuario de nuestra aplicación.
		+
		+	<gallery caption="Obtener widget visualización de mensajes" widths="350" heights="300px" perrow="2">
		+	Image:Flutter_instalar_widget_1.png\| Primero buscamos en el icono de lupa por la cadena '''show message''' y aparecerán una serie de resultados. Fijarse que podemos filtrar por plataforma, indicando que plataformas debe soportar el widget que queremos incorporar.
		+	Image:Flutter_instalar_widget_2.png\| Fijarse que en el listado anterior y cuando presionamos el widget aparecen la lista de plataformas que soporta. También se debe de fijar en popularidad del widget o paquete (Point, Likes y Downloads). Aparecen una serie de pestañas.
		+	Image:Flutter_instalar_widget_3.png\| '''Versiones''': En esta pestaña podemos ver cual es la última versión desarrollada y que versión de dart necesitamos para poder usarla. La podemos emplear para saber si el widget sigue recibiendo actualizaciones. En caso de que no, es mejor buscar otro widget con la misma funcionalidad.
		+	Image:Flutter_instalar_widget_4.png\| <u>Para instalar el widget necesitamos saber la versión de dart que tenemos instalada.</u>. Para ello, desde el terminal de VSCode podemos escribir: '''dart --version'''. En la captura tenemos la versión 3.8.1 y la mínima versión para instalar es la 3.0 por lo que no tenemos problema.
		+	Image:Flutter_instalar_widget_5.png\| En la sección '''Installation''' nos viene indicando como instalar el widget y que import tenemos que realizar para poder emplearlo en una pantalla de nuestra aplicación. Indicar que si usamos la opción de '''flutter pub add ....''' siempre instalará la última versión por lo que sino tenemos el min DART no funcionará.
		+	Image:Flutter_instalar_widget_6.png\| Una vez instalado, si usamos la opción de copiar y pegar el código en el pubspec.yaml, necesitamos descargar el widget. Para ello debemos presionar el botón de descarga que está arriba a la derecha en VSCode. Si usamos la opción de flutter pub add ... no es necesario. '''IMPORTANTE:''' Cualquier cambio que se realice en el archivo pubspec.yaml lleva consigo <u>parar la aplicación si está en ejecución</u>.'''.
		+	Image:Flutter_instalar_widget_7.png\| Una vez añadido en el pubspec.yaml ya podemos usarlo empleando el import indicado y podemos consultar un ejemplo tanto en la sección 'Example' como en la sección 'Readme'.
		+	</gallery>
		+

@@ Línea 269: / Línea 269: @@
+   }
+}
 </syntaxhighlight>

← Revisión anterior		Revisión del 09:39 28 sep 2025
Línea 177:		Línea 177:


−	<u>Ejercicio propuesto:</u> Crea un nuevo StatelessWidget y haz que devuelva un widget MaterialApp. Haz que la función runApp cargue dicho widget.	+	: <u>Ejercicio propuesto:</u> Crea un nuevo StatelessWidget y haz que devuelva un widget MaterialApp. Haz que la función runApp cargue dicho widget.

@@ Línea 246: / Línea 246: @@
 :* La clase MiMaterialApp (que es un StatelessWidget) devuelve (método build) un Widget que es un objeto de la clase MaterialApp. Dicha clase me permite inhabilitar el banner de debugger y tiene como parámetro el Widget que va a visualizar como contenido. Dicho widget es un objeto de la clase MiWidget.
 :* La clase MiWidget (que es un StatelessWidget) devuelve (método build) un objeto de la clase Scaffold el cual permite establecer, entre otras muchas cosas, una AppBar y un contenido.
 <br />

← Revisión anterior		Revisión del 09:29 28 sep 2025
Línea 186:		Línea 186:

	<br />		<br />
−	* '''NOTA:'''
−	~~:* Existen unas guías de diseño (Google Material Design) que son definidas por Goole para dar un aspecto homogéneo a las aplicaciones: https://m3.material.io/~~
−	~~:: Actualmente (Noviembre 2024) van por la versión 3.~~
−	:: En esta nueva versión la AppBar del Scaffold (visto a continuación) no aparece con un color diferente. Para solucionarlo podemos poder en background-color en la AppBar o decirle a MaterialApp que emplee la versión 2 de Material de la siguiente forma:
−	~~:<syntaxhighlight lang="java" enclose="div" highlight="9-11" >~~
−	~~class MiMaterial extends StatelessWidget {~~
−	~~const MiMaterial({ super.key });~~
−
−	~~@override~~
−	~~Widget build(BuildContext context){~~
−	~~return MaterialApp(~~
−	~~debugShowCheckedModeBanner: false,~~
−	~~home: HomeScreen(),~~
−	~~theme: ThemeData( // TAMBIEN VALDRIA: theme: ThemeData.light(useMaterial3: true)~~
−	~~useMaterial3: false~~
−	),
−	);
−	}
−	}
−	~~</syntaxhighlight>~~

	==Widget Scafold==		==Widget Scafold==

@@ Línea 290: / Línea 290: @@
 │   ├── utils/               # Utilidades y funciones compartidas
 │   ├── widgets/             # Widgets reutilizables en toda la app (componentes compartidos)
-│   └── MaterialApp.dart     # Clase en la que se cargan las rutas definidas en app_routes.dart, se establece el theme y se indica la ruta incial de carga.
+│   └── material_app.dart     # Clase en la que se cargan las rutas definidas en app_routes.dart, se establece el theme y se indica la ruta incial de carga.
 │
 ├── models/                  # Modelos de datos (opcional, si usas un patrón basado en datos)

@@ Línea 303: / Línea 303: @@
      ├── home/                # Directorio de la pantalla principal (Home)
      │   ├── home_screen.dart # Pantalla Home
-     │   └── home_widgets.dart# Widgets específicos de la pantalla Home (opcional). Si no se va a crear podemos crear un único archivo home_screnn.dart y no crear el directorio home.
+     │   └── home_widgets.dart# Widgets específicos de la pantalla Home (opcional). Si no se va a crear podemos crear un único archivo home_screen.dart y no crear el directorio
      │
      ├── login/               # Directorio de la pantalla de inicio de sesión