Flutter Widget Componentes - Historial de revisiones

Angelfg: /* Escalando las imágenes */

2026-10-14T07:32:51Z

Escalando las imágenes

Angelfg: /* Card Widget */

2026-10-07T17:10:06Z

Card Widget

Angelfg: /* Card Widget */

2026-10-07T17:09:23Z

Card Widget

Angelfg: /* CircleAvatar */

2026-10-07T17:06:13Z

CircleAvatar

Angelfg: /* CircleAvatar */

2026-10-07T17:05:24Z

CircleAvatar

Angelfg: /* CircleAvatar */

2026-10-07T17:00:55Z

CircleAvatar

Angelfg: /* Resumen de cambios respecto a versiones antiguas */

2026-10-07T16:24:37Z

Resumen de cambios respecto a versiones antiguas

Mostrar los cambios

Angelfg: /* Exercicios propostos sen solución */

2026-10-07T16:20:28Z

Exercicios propostos sen solución

Angelfg: /* Exercicios propostos */

2026-10-07T16:11:50Z

Exercicios propostos

Angelfg: /* Card Widget */

2026-10-07T08:41:04Z

Card Widget

@@ Línea 788: / Línea 788: @@
 </syntaxhighlight>
 * También podemos utilizar '''FittedBox''' para ajustar cualquier widget a las restricciones de su contenedor.
 <br />

@@ Línea 2432: / Línea 2432: @@
 '''Ejemplo'''
-[[Imagen::Flutter_dart_widget_32.png|300px|center]]
+[[Imagen:Flutter_dart_widget_32.png|300px|center]]
 :<syntaxhighlight lang="dart">

@@ Línea 2427: / Línea 2427: @@
 * El aspecto final depende del tema de la aplicación, por lo que es preferible aprovechar el '''ThemeData''' en lugar de establecer manualmente colores y elevaciones en todos los widgets.
 '''Ejemplo'''
 :<syntaxhighlight lang="dart">

← Revisión anterior		Revisión del 17:06 7 oct 2026
Línea 2527:		Línea 2527:


−	[[Imagen:Flutter_dart_widget_33.png\|~~500px~~\|center]]	+	[[Imagen:Flutter_dart_widget_33.png\|300px\|center]]

	:<syntaxhighlight lang="dart">		:<syntaxhighlight lang="dart">

@@ Línea 2524: / Línea 2524: @@
    :* '''foregroundColor'''.
-'''Ejemplo actualizado'''
+'''Ejemplo'''
 :<syntaxhighlight lang="dart">

@@ Línea 2527: / Línea 2527: @@
 :<syntaxhighlight lang="dart">
-import 'package/material.dart';
+import 'package:flutter/material.dart';
-class CircleAvatarPage
+class CircleAvatarPage extends StatelessWidget {
-extends StatelessWidget {
+  const CircleAvatarPage({super.key});
-static const usuarios =
+  static const usuarios = <String, String>{
-<String, String>{
+    'Luisa Sanz': 'https://randomuser.me/api/portraits/women/1.jpg',
-'Luisa Sanz':
+    'Ana Pérez': 'https://randomuser.me/api/portraits/women/2.jpg',
-'https://randomuser.me/api/portraits/women/1.jpg',
+    'Miguel López': 'https://randomuser.me/api/portraits/men/3.jpg',
-'Ana Pérez':
+    'Carmen San Juan': 'https://randomuser.me/api/portraits/women/4.jpg',
-'https://randomuser.me/api/portraits/women/2.jpg',
+  };
-@override
+  @override
-Widget build(BuildContext context) {
+  Widget build(BuildContext context) {
-final entradas =
+    final entradas = usuarios.entries.toList();
-```
+    return Scaffold(
-return Scaffold(
+      appBar: AppBar(title: const Text('Ejemplo de CircleAvatar')),
-  appBar: AppBar(
+      body: ListView.separated(
-    title: const Text(
+        itemCount: entradas.length,
-      'Ejemplo de CircleAvatar',
+        separatorBuilder: (context, index) => const Divider(),
-    ),
+        itemBuilder: (context, index) {
-  ),
+          final usuario = entradas[index];
-      return ListTile(
+          return ListTile(
-        leading: CircleAvatar(
+            leading: CircleAvatar(backgroundImage: NetworkImage(usuario.value)),
-          backgroundImage:
+            title: Text(usuario.key),
-              NetworkImage(
+            trailing: CircleAvatar(child: Text(_iniciales(usuario.key))),
-            usuario.value,
+            onTap: () {},
-          ),
+          );
-        ),
+        },
-        title:
+      ),
-            Text(usuario.key),
+    );
-        trailing: CircleAvatar(
+  String _iniciales(String nombre) {
-String _iniciales(String nombre) {
+    if (partes.isEmpty) {
-final partes = nombre
+      return '';
-.trim()
-```
+    if (partes.length == 1) {
-if (partes.isEmpty) {
+      return partes.first.substring(0, 1).toUpperCase();
-  return '';
-if (partes.length == 1) {
+    return (partes.first.substring(0, 1) + partes.last.substring(0, 1))
-  return partes.first
+        .toUpperCase();
-      .substring(0, 1)
+}
 </syntaxhighlight>

← Revisión anterior		Revisión del 16:20 7 oct 2026
Línea 1601:		Línea 1601:

	</syntaxhighlight>		</syntaxhighlight>
−
−	~~<br />~~
−
−	~~====Exercicios propostos sen solución====~~
−
−	* '''Exercicio 6'''
−
−	~~:<syntaxhighlight lang="dart">~~
−	~~final datosExercicio6 =~~
−	~~[1, 2, 3, 4, 5, 6];~~
−	~~</syntaxhighlight>~~
−
−	~~: Crea unha lista onde cada elemento mostre:~~
−
−	~~:<syntaxhighlight lang="text">~~
−	~~Número: 1 → Resultado: 10~~
−	~~</syntaxhighlight>~~
−
−	~~: Cada elemento debe estar dentro dun '''Card''' e separado mediante '''Padding'''.~~
−
−	~~<br />~~
−
−	* '''Exercicio 7'''
−
−	~~:<syntaxhighlight lang="dart">~~
−	~~final datosExercicio7 = <String>[~~
−	~~'Lugo',~~
−	~~'Ourense',~~
−	~~'A Coruña',~~
−	~~'Pontevedra',~~
−	];
−	~~</syntaxhighlight>~~
−
−	~~: Crea unha lista de elementos formados por:~~
−	~~:* Un '''CircleAvatar'''.~~
−	~~:* O nome da cidade debaixo.~~
−	~~:* Unha '''Column''' para agrupalos.~~
−
−	~~<br />~~
−
−	* '''Exercicio 8'''
−
−	~~:<syntaxhighlight lang="dart">~~
−	~~final datosExercicio8 =~~
−	~~<Map<String, dynamic>>[~~
−	{
−	~~'titulo': 'Aprender Flutter',~~
−	~~'autor': 'Ana',~~
−	},
−	{
−	~~'titulo': 'Widgets e Layouts',~~
−	~~'autor': 'Brais',~~
−	},
−	{
−	~~'titulo': 'Listas e Datos',~~
−	~~'autor': 'Clara',~~
−	},
−	{
−	~~'titulo': 'Eventos e Accións',~~
−	~~'autor': 'Diego',~~
−	},
−	];
−	~~</syntaxhighlight>~~
−
−	~~: Crea unha clase '''Libro''' con:~~
−	~~:* Atributos '''final'''.~~
−	~~:* Constructor con parámetros obrigatorios e por nome.~~
−	~~:* Constructor '''factory Libro.fromMap'''.~~
−
−	~~: Converte os mapas en obxectos '''Libro''' e visualízaos mediante '''ListTile'''.~~
−
−	~~<br />~~
−
−	* '''Exercicio 9'''
−
−	~~:<syntaxhighlight lang="dart">~~
−	~~final datosExercicio9 =~~
−	~~<Map<String, dynamic>>[~~
−	{
−	~~'nome': 'Ana',~~
−	~~'idade': 25,~~
−	~~'foto':~~
−	~~'https://randomuser.me/api/portraits/women/1.jpg',~~
−	},
−	{
−	~~'nome': 'Brais',~~
−	~~'idade': 30,~~
−	~~'foto':~~
−	~~'https://randomuser.me/api/portraits/men/2.jpg',~~
−	},
−	];
−	~~</syntaxhighlight>~~
−
−	~~: Crea unha clase '''Persona''' e representa os datos utilizando '''Card''' e '''CircleAvatar'''.~~
−
−	~~<br />~~
−
−	* '''Exercicio 10'''
−
−	~~:<syntaxhighlight lang="dart">~~
−	~~final datosExercicio10 =~~
−	~~<Map<String, dynamic>>[~~
−	{
−	~~'produto': 'Camiseta',~~
−	~~'prezo': 19.99,~~
−	~~'foto':~~
−	~~'https://picsum.photos/100?1',~~
−	},
−	{
−	~~'produto': 'Pantalón',~~
−	~~'prezo': 29.99,~~
−	~~'foto':~~
−	~~'https://picsum.photos/100?2',~~
−	},
−	];
−	~~</syntaxhighlight>~~
−
−	~~: Crea unha clase '''Produto''' e unha lista de '''ListTile''' con:~~
−	~~:* Imaxe no '''leading'''.~~
−	~~:* Nome no '''title'''.~~
−	~~:* Prezo no '''subtitle'''.~~
−	~~:* '''IconButton''' cunha cesta no '''trailing'''.~~
−
−	~~<br />~~
−
−	* '''Exercicio 11'''
−
−	~~: Define unha clase '''ProductoFitbit''' onde '''prezo''' e '''valoracion''' sexan '''double'''.~~
−
−	~~: No método '''fromMap''', lembra que un valor JSON pode chegar como '''int''' ou como '''double'''.~~
−
−	~~: Para convertelo correctamente:~~
−
−	~~:<syntaxhighlight lang="dart">~~
−	~~prezo:~~
−	~~(map['prezo'] as num).toDouble(),~~
−	~~valoracion:~~
−	~~(map['valoracion'] as num)~~
−	~~.toDouble(),~~
−	~~</syntaxhighlight>~~
−
−	~~: Se a valoración é maior ou igual a 4.5:~~
−	~~:* Mostrar '''Icons.star'''.~~
−	~~:* Mostrar o prezo en verde.~~
−
−	~~: En caso contrario:~~
−	~~:* Mostrar '''Icons.star_border'''.~~
−	~~:* Mostrar o prezo en vermello.~~

	<br />		<br />

@@ Línea 1358: / Línea 1358: @@
 </syntaxhighlight>
-: Crea unha lista na que cada elemento conteña un texto e unha imaxe.
+: Crea una lista en la que cada elemento contenga un texto y una imagen.
-: A imaxe debe ocupar as dimensións indicadas sen deformarse.
+'''<u>Nota de tipos:</u>'''
-* Os valores anteriores son '''int''', mentres que '''width''' e '''height''' esperan un '''double?'''.
+:* Si consideramos que los datos vienen de un servicio externo en el que no podemos garantizar la existencia de claves y tipos de valores tendríamos que usar esta forma:
@@ Línea 1404: / Línea 1407: @@
 </syntaxhighlight>
-: Crea unha lista na que cada elemento conteña:
+: Crea una lista en la que cada elemento contenga:
-:* O texto principal.
+:* El texto principal.
 :* Un '''IconButton'''.
-:* O texto almacenado en '''elemento''' coa cor indicada.
+:* El texto almacenado en '''elemento''' con el color indicado.
 <br />
-=====Solucións Exercicios Propostos=====
+=====Soluciones a Ejercicios Propuestos=====
-* '''Exercicio 1'''
+* '''Ejercicio 1'''
 :<syntaxhighlight lang="dart">
@@ Línea 1445: / Línea 1448: @@
 <br />
-* '''Exercicio 2'''
+* '''Ejercicio 2'''
 :<syntaxhighlight lang="dart">
@@ Línea 1485: / Línea 1488: @@
 <br />
-* '''Exercicio 3'''
+* '''Ejercicio 3'''
 :<syntaxhighlight lang="dart">
@@ Línea 1521: / Línea 1524: @@
 <br />
-* '''Exercicio 4'''
+* '''Ejercicio 4'''
 :<syntaxhighlight lang="dart">
@@ Línea 1536: / Línea 1540: @@
        children: datos
            .map((e) {
-             final anchura = (e['anchura'] as num).toDouble();
+             final altura = double.tryParse(e['altura']?.toString() ?? '') ?? 0.0;
+             final anchura = double.tryParse(e['anchura']?.toString() ?? '') ?? 0.0;
              return Row(
@@ Línea 1544: / Línea 1547: @@
                  Expanded(child: Text('Texto: ${e['texto']}')),
                  Image.network(
-                   e['url'] as String,
+                   e['url']?.toString() ?? 'https://picsum.photos/200/300',
                    width: anchura,
                    height: altura,

@@ Línea 2575: / Línea 2575: @@
 :<syntaxhighlight lang="dart">
-import 'package/material.dart';
+import 'package:flutter/material.dart';
 class CardsPage extends StatelessWidget {
-const CardsPage({super.key});
+  const CardsPage({super.key});
-@override
+  @override
-Widget build(BuildContext context) {
+  Widget build(BuildContext context) {
-return Scaffold(
+    return Scaffold(
-appBar: AppBar(
+      appBar: AppBar(title: const Text('Ejemplo de Cards')),
-title:
+      body: ListView(
-const Text('Ejemplo de Cards'),
+        padding: const EdgeInsets.all(12),
-),
+        children: [
-body: ListView(
+          _crearTarjeta1(),
-padding:
+          const SizedBox(height: 12),
-const EdgeInsets.all(12),
+          _crearTarjeta2(),
-children: [
+          const SizedBox(height: 12),
-_crearTarjeta1(),
+          _crearTarjeta3(),
-const SizedBox(height: 12),
+        ],
-_crearTarjeta2(),
+      ),
-const SizedBox(height: 12),
+    );
 _crearTarjeta3(),
 ],
-),
+  Widget _crearTarjeta1() {
-);
+    return Card(
+      clipBehavior: Clip.antiAlias,
-Widget _crearTarjeta1() {
+  Widget _crearTarjeta2() {
-return Card(
+    return const Card.filled(
-clipBehavior:
+      child: ListTile(
-Clip.antiAlias,
+        leading: Icon(Icons.accessibility),
-elevation: 4,
+        title: Text('Ejemplo de texto'),
-shape:
+        trailing: Icon(Icons.delete),
-RoundedRectangleBorder(
+      ),
-side: const BorderSide(
+    );
-width: 2,
-Widget _crearTarjeta2() {
+  Widget _crearTarjeta3() {
-return const Card.filled(
+    return const Card.outlined(
-child: ListTile(
+      child: Padding(
-leading: Icon(
+        padding: EdgeInsets.all(24),
-Icons.accessibility,
+        child: Icon(Icons.access_alarm, size: 80),
-),
+      ),
-title: Text(
+    );
-'Ejemplo de texto',
+}
 </syntaxhighlight>