json_serializable en acción
Genere automáticamente la serialización de modelos
json_serializable en acción es una lección gratuita de Dart Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Dart Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Dart Academy incluye 4 lecciones en total.
El problema del código repetitivo de JSON
Escribir fromJson y toJson manualmente resulta tedioso y propenso a errores. El paquete json_serializable genera ambos métodos a partir de un modelo. 📦
Añadir los paquetes
Necesita json_annotation como dependencia normal, además de json_serializable y build_runner como dependencias de desarrollo para la generación.
dependencies:
json_annotation: ^4.9.0Anotar la clase
Marque el modelo con @JsonSerializable. Esta anotación indica al generador que produzca el código de serialización para esa clase.
@JsonSerializable()
class User {
final String name;
User(this.name);
}Declarar el archivo part
Añada una directiva part para que el archivo pueda incluir los auxiliares generados. Su nombre refleja el de su archivo y termina en .g.dart.
part 'user.g.dart';Conectar fromJson
Añada una factoría que delegue en la función generada. El auxiliar _$UserFromJson lo crea automáticamente el builder.
factory User.fromJson(Map<String, dynamic> j) =>
_$UserFromJson(j);Conectar toJson
Añada un método que llame al generador de escritura. El auxiliar _$UserToJson convierte de nuevo el objeto en un mapa JSON.
Map<String, dynamic> toJson() => _$UserToJson(this);Generar el código
Ejecute build_runner una vez y aparecerá el archivo user.g.dart, con ambas funciones auxiliares completamente implementadas y listas para usar.
dart run build_runner buildCambiar una clave JSON
Cuando el campo de la API difiere del nombre de Dart, use @JsonKey para establecer la correspondencia. Su código se mantiene limpio y el JSON coincide con el servidor.
@JsonKey(name: 'full_name')
final String fullName;Proporcionar un valor predeterminado
Puede proporcionar un valor alternativo para los campos ausentes. La opción defaultValue asigna un valor cuando la clave no está presente en el JSON.
@JsonKey(defaultValue: 0)
final int score;Los modelos anidados funcionan automáticamente
Si un campo es otra clase @JsonSerializable, el generador la serializa de forma recursiva. Los objetos anidados no requieren ningún trabajo adicional.
Usarlo como Dart normal
Una vez generado el código, puede analizar y codificar mediante llamadas normales a métodos. Los helpers generados permanecen ocultos, por lo que las llamadas resultan naturales.
final u = User.fromJson(data);
final back = u.toJson();Comprobación rápida
¿Qué anotación marca una clase para generar código JSON?
Resumen
Anote la clase con @JsonSerializable, conecte fromJson y toJson y ejecute build_runner. Use @JsonKey para establecer nombres de campos y valores predeterminados. 🎉
Preguntas frecuentes
¿La lección «json_serializable en acción» es gratis?
Sí — el texto completo de «json_serializable en acción» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Dart Academy, actualiza a CoddyKit PRO. El curso de Dart Academy incluye 4 lecciones en total.
¿Qué aprenderé en «json_serializable en acción»?
Genere automáticamente la serialización de modelos Practicas Dart Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Dart Academy?
No se requiere experiencia previa. Dart Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «json_serializable en acción»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Dart Academy?
Sí. Cada lección de Dart Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Anotaciones integradas: override, deprecated
- Escritura de anotaciones personalizadas
- Generación de código con build_runner
- json_serializable en acción