Creación de Widgets Stateless en Flutter para Recetario Interactivo

Contenido del curso

Introducción a Flutter y Dart

Widgets en Flutter

Manejo de Recursos y Formularios

Navegación y APIs

Gestión de Estados

Experiencia de Usuario

Publicación de Apps

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:38

Creación de Widgets Stateless en Flutter para Recetario Interactivo

Curso de Flutter

Clase 5 de 26

Clase 5 / 26

Recursos

Aprenderás cómo estructurar y personalizar una aplicación Flutter enfocada en un recetario utilizando StatelessWidget. Exploraremos el uso de propiedades como AppBar, personalización con estilos y colores, y buenas prácticas de desarrollo.

¿Cómo crear y estructurar un StatelessWidget?

Definición de la clase: Crea una nueva clase que extienda de StatelessWidget. Por ejemplo:

class RecipeBook extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold();
  }
}

Scaffold actúa como una hoja en blanco donde añadimos elementos.

Personalización inicial: Añade propiedades clave como:
- AppBar: para mostrar un título y definir colores.
- Body: el espacio principal donde se mostrará el contenido.

¿Cómo personalizar la barra superior con AppBar?

La barra superior se personaliza utilizando la propiedad AppBar. Ejemplo:

return Scaffold(
  appBar: AppBar(
    title: Text(
      'Mi Recetario',
      style: TextStyle(color: Colors.white),
    ),
    backgroundColor: Colors.orange,
  ),
);

La propiedad title define el texto visible.
TextStyle permite modificar el color, tamaño y estilo del texto.
backgroundColor define el color de fondo del AppBar.

¿Cómo eliminar marcas de depuración y warnings?

Eliminar la marca de depuración: Ajusta la propiedad debugShowCheckedModeBanner a false en MaterialApp.

return MaterialApp(
  debugShowCheckedModeBanner: false,
  home: RecipeBook(),
);

Ocultar warnings temporales: Si no afectan el desarrollo actual, coméntalos en el archivo analysis_options.yaml con #.

¿Qué buenas prácticas seguir al construir widgets?

Define widgets constantes si sus datos no cambiarán:
```
const Text('Constante');
```
Usa la estructura jerárquica de widgets para mantener el código organizado.
Personaliza propiedades como colores y estilos para mejorar la experiencia visual.

¿Cómo probar la implementación en el emulador?

Guarda los cambios en el archivo main.dart.
Observa en el emulador cómo se reflejan las personalizaciones.
Ajusta y mejora según el comportamiento observado.

Jess Key

Hace 2 años

Cuando paramos el cursor sobre un Widget ns indica las propiedades o widget que podemos usar pero me resulta confuso este {PreferredSizeWidget? appBar} pues entiendo que es como una bara superior pero porque cuando la usamos escribimos appBar: AppBar(). Ese segundo AppBar() es un nombre que siempre debemos darle o es nosotros lo podemos elegir?, por ejemplo: appBar: MyBarra()

Gerardo Estrella

Hace un año

El AppBar de Flutter implementa PreferredSizeWidget para comunicar su altura preferida a su widget padre, generalmente un Scaffold.

Esto es necesario porque el Scaffold necesita saber cuánto espacio vertical ocupará el AppBar para poder posicionar correctamente el resto de su contenido (el body) debajo de él, sin superposiciones.

En teoria si pudieras generar tu propio AppBar pero tendrías que especificar el Size del tamaño haciendo un override del preferedSize

import 'package:flutter/material.dart';

class GenericAppBar extends StatelessWidget implements PreferredSizeWidget {
  final String title;
  final List<Widget>? actions;
  final Color? backgroundColor;
  final double elevation;

  const GenericAppBar({
    super.key,
    required this.title,
    this.actions,
    this.backgroundColor,
    this.elevation = 4.0, // Default elevation
  });

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text(title),
      actions: actions,
      backgroundColor: backgroundColor,
      elevation: elevation,
    );
  }

  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight);
}
````import 'package:flutter/material.dart';`



`class GenericAppBar extends StatelessWidget implements PreferredSizeWidget {`

`  final String title;`

`  final List<Widget>? actions;`

`  final Color? backgroundColor;`

`  final double elevation;`



`  const GenericAppBar({`

`    super.key,`

`    required this.title,`

`    this.actions,`

`    this.backgroundColor,`

`    this.elevation = 4.0, // Default elevation`

`  });`



`  @override`

`  Widget build(BuildContext context) {`

`    return AppBar(`

`      title: Text(title),`

`      actions: actions,`

`      backgroundColor: backgroundColor,`

`      elevation: elevation,`

`    );`

`  }`



`  @override`

`  Size get preferredSize => const Size.fromHeight(kToolbarHeight);`

`}`

Comentarios (20)20 comentarios

Stiven Gordillo Ruiz

Jose Miguel Lopez

Bibiana Hernández

Dave Juanes

Alison Jimenez

Profesor

Wilmer Alexander Rodriguez Castro

Daniel Valencia Alvarez

Carlos Orjuela

Alexandra Borja

Platzi

Jorge Eduardo Hernández Oropeza

José Galvis

Hace 9 meses

José Antonio De La Paz Fonseca

Eduardo Said Pastrana

Diego Andrés Lopez Rodriguez

Samuel Schulz

Carlos Guerrero Baena

Eliahu Abraham Steynberg

Hace 8 meses

Johan Humberto Castillo rios

Raul Lopez

Fernado Michael Acosta Panchez

Yamid Horacio Rodríguez

Introducción a Flutter y Dart

Flutter para iOS y Android con un código

Configuración de Flutter, Dart y emuladores

Despliegue y Estructura Básica de una App con Flutter

Programación en Dart: Variables, Funciones y Clases Básicas

Widgets en Flutter

Creación de Widgets Stateless en Flutter para Recetario Interactivo

Container, Row y Column en Flutter

Estructuración y Navegación de Pantallas en Flutter

Cómo crear widgets reutilizables en Flutter

Manejo de Recursos y Formularios

Configuración de Imágenes en Flutter: Uso de Carpeta Assets

Formularios y botones en Flutter

Controladores y validadores en formularios Flutter

Navegación y APIs

Navegar entre pantallas y pasar datos en Flutter

Configura una API local con Mockoon en Flutter

Petición GET a una API en Flutter

Gestión de Estados

ListView.builder con FutureBuilder en Flutter

Estados de carga y errores en Flutter

Creación de modelos de datos en Flutter con Dart

Uso de Provider para Gestión de Estado en Flutter

"Gestión de Favoritos en Aplicaciones con Stateful Widgets"

Detalles de Recetas en Flutter: Implementación y Visualización

Experiencia de Usuario

Cómo depurar favoritos con Provider en Flutter

Animaciones personalizadas en Flutter con Tween

Internacionalización y accesibilidad en Flutter

Publicación de Apps

Cómo generar un APK en Flutter

Cómo crear tu cuenta en Google Play Console

Crear y Subir App Bundle en Google Play Store

Creación de Widgets Stateless en Flutter para Recetario Interactivo