Flutter json_serializable generated json code gets save as string in Firebase database

Question

I am trying to work with firebase database from flutter. I have made a model class which I am converting to json and from json via plugin json_serializable. Where model class works perfectly fine with hard coded json data but when I am trying to save the encoded data to firebase database it's getting saved as a string instead of key value pair in firebase database.Below is my code to convert it and save it

    List<Action> actions = [];
    actions.add(new Action('This is label', 'mranuran.com'));
    EgluCard egluCard = new EgluCard(true, true, "HI", "World", "Awesome",CardType.TYPE_1 , ["images"], 123, 125, "#FFFFFF", PlatformType.IOS, actions);
    //print(json.encode(egluCard));
    // var jsonString = '{"isInternal":true,"isPublished":true,"title":"HI","body":"World","caption":"Awesome","cardType":"TYPE_1","images":["images"],"expiry":123,"showAt":125,"bgColor":"#FFFFFF","platformType":"IOS","actions":[{"label":"This is label","url":"mranuran.com"}]}';
    // Map<String,dynamic> cardMap = json.decode(jsonString);
    // EgluCard egluCard = EgluCard.fromJson(cardMap);
    // print(egluCard.actions[0].label);
    var jsonString = json.encode(egluCard);
    var trimmedString = jsonString.substring(0,jsonString.length);
    print(trimmedString);
    cardsDBRef.push().set(jsonString)
    .then((_){
      print('saved!!');
    });

when I am printing the json.encode(eGluCard) then it's printing a valid json but when it's getting saved into firebase I am getting the following from firebase. It was supposed to save as key value pair but it was saved as a whole string.

"{\"isInternal\":true,\"isPublished\":true,\"title\":\"HI\",\"body\":\"World\",\"caption\":\"Awesome\",\"cardType\":\"TYPE_1\",\"images\":[\"images\"],\"expiry\":123,\"showAt\":125,\"bgColor\":\"#FFFFFF\",\"platformType\":\"IOS\",\"actions\":[{\"label\":\"This is label\",\"url\":\"mranuran.com\"}]}"

what can be wrong in this approach? below are my model classed and their generated serializer respectively

EgluCard.dart

import 'card_type.dart';
import 'platform_type.dart';
import 'action.dart';
import 'package:json_annotation/json_annotation.dart';

part 'eglu_card.g.dart';

@JsonSerializable()

class EgluCard {

  bool isInternal;
  bool isPublished;
  String title;
  String body;
  String caption;
  CardType cardType;
  List<String> images;
  int expiry;
  int showAt;
  String bgColor;
  PlatformType platformType;
  List<Action> actions;

  EgluCard(this.isInternal,this.isPublished,this.title,this.body,this.caption,this.cardType,this.images,
  this.expiry,this.showAt,this.bgColor,this.platformType,this.actions);

  factory EgluCard.fromJson(Map<String, dynamic> json) => _$EgluCardFromJson(json);

  Map<String, dynamic> toJson() => _$EgluCardToJson(this);

}

EgluCard Serializer

// GENERATED CODE - DO NOT MODIFY BY HAND

part of 'eglu_card.dart';

// **************************************************************************
// JsonSerializableGenerator
// **************************************************************************

EgluCard _$EgluCardFromJson(Map<String, dynamic> json) {
  return EgluCard(
      json['isInternal'] as bool,
      json['isPublished'] as bool,
      json['title'] as String,
      json['body'] as String,
      json['caption'] as String,
      _$enumDecodeNullable(_$CardTypeEnumMap, json['cardType']),
      (json['images'] as List)?.map((e) => e as String)?.toList(),
      json['expiry'] as int,
      json['showAt'] as int,
      json['bgColor'] as String,
      _$enumDecodeNullable(_$PlatformTypeEnumMap, json['platformType']),
      (json['actions'] as List)
          ?.map((e) =>
              e == null ? null : Action.fromJson(e as Map<String, dynamic>))
          ?.toList());
}

Map<String, dynamic> _$EgluCardToJson(EgluCard instance) => <String, dynamic>{
      'isInternal': instance.isInternal,
      'isPublished': instance.isPublished,
      'title': instance.title,
      'body': instance.body,
      'caption': instance.caption,
      'cardType': _$CardTypeEnumMap[instance.cardType],
      'images': instance.images,
      'expiry': instance.expiry,
      'showAt': instance.showAt,
      'bgColor': instance.bgColor,
      'platformType': _$PlatformTypeEnumMap[instance.platformType],
      'actions': instance.actions
    };

T _$enumDecode<T>(Map<T, dynamic> enumValues, dynamic source) {
  if (source == null) {
    throw ArgumentError('A value must be provided. Supported values: '
        '${enumValues.values.join(', ')}');
  }
  return enumValues.entries
      .singleWhere((e) => e.value == source,
          orElse: () => throw ArgumentError(
              '`$source` is not one of the supported values: '
              '${enumValues.values.join(', ')}'))
      .key;
}

T _$enumDecodeNullable<T>(Map<T, dynamic> enumValues, dynamic source) {
  if (source == null) {
    return null;
  }
  return _$enumDecode<T>(enumValues, source);
}

const _$CardTypeEnumMap = <CardType, dynamic>{CardType.TYPE_1: 'TYPE_1'};

const _$PlatformTypeEnumMap = <PlatformType, dynamic>{
  PlatformType.ANDROID: 'ANDROID',
  PlatformType.IOS: 'IOS',
  PlatformType.ANDROID_THING: 'ANDROID_THING',
  PlatformType.ANY: 'ANY'
};

Action.dart

import 'package:json_annotation/json_annotation.dart';

part 'action.g.dart';

@JsonSerializable()

class Action {
  String label;
  String url;

  Action(this.label,this.url);

  factory Action.fromJson(Map<String, dynamic> json) => _$ActionFromJson(json);

  Map<String, dynamic> toJson() => _$ActionToJson(this);
}

Action Serializer

// GENERATED CODE - DO NOT MODIFY BY HAND

part of 'action.dart';

// **************************************************************************
// JsonSerializableGenerator
// **************************************************************************

Action _$ActionFromJson(Map<String, dynamic> json) {
  return Action(json['label'] as String, json['url'] as String);
}

Map<String, dynamic> _$ActionToJson(Action instance) =>
    <String, dynamic>{'label': instance.label, 'url': instance.url};

PlatformType and CardType are enums

Answer 1

Okay turns out I have to decode and encoded string before passing it to firebase. So code to save the model class to firebase will be like this:

    List<Action> actions = [];
    actions.add(new Action('This is label', 'mranuran.com'));
    EgluCard egluCard = new EgluCard(true, true, "HI", "World", "Awesome",CardType.TYPE_1 , ["images"], 123, 125, "#FFFFFF", PlatformType.IOS, actions);
    var jsonString = json.encode(egluCard);
    print(json.decode(jsonString));
    cardsDBRef.push().set(json.decode(jsonString))
    .then((_){
      print('saved!!');
    });