Custom data

Custom data class

As you know from handling response section, we have a FlusmicResponse object holding all the results from our query.

The data json object that every result have, can be converted to a custom class with the help of JsonSerializable and the Freezed package.

Quickstart

Include JsonSerializable in your dependencies.

dependencies:
  flusmic: ^2.0.0
  freezed_annotation: <latest-version>
  json_annotation: <latest-version>  

dev_dependencies:
  flutter_test:
    sdk: flutter
  build_runner: <latest-version>
  freezed: <latest-version>
  json_serializable: <latest-version>

NOTE: You can exclude Freezed package and work only with JsonSerializable. Here is included because is one of our favorite ways to handle data and we will continue this custom class structure example using it.

Creating our class

Let's say that in our data object, comes the next objects:

• A Image named image
• A Key Text named single_text
• A GeoPoint named location
• And a number named number

Flusmic includes predifined classes that handle some of these values:

Available types

• DocumentReference: A Document without data (like in content relationship).
• EmbedImage: A Image inside a RichText.
• EmbedText: A Text inside a RichText.
• Geopoint: A location, with latitude and logitude.
• Media: An audio, image or any other document in the library.
• SimpleImage: A image.
• SimpleText: A text.
• Slice: A slice an it structure.
• Span: A text with style.
• Weblink: A link to an URL outside Prismic.io.

Creating our class

Now, we can create our Data object, including this Flusmic types:

import 'package:flusmic_ui/flusmic_ui.dart';
import 'package:freezed_annotation/freezed_annotation.dart';

part 'data.freezed.dart';
part 'data.g.dart';

///Data model
@freezed
abstract class Data with _$Data {
  ///Deafult factory constructor for Data
  factory Data({
    @required SimpleImage image,
    @required @JsonKey(name: 'simple_text') String single_text,
    @required Geopoint location,
    @required double number,
  }) = _Data;

  ///Creates a Data object from json
  factory Data.fromJson(Map<String, dynamic> json) =>
      _$DataFromJson(json);
}

Now we only need to run:

pub run build_runner build

or if you are working with Flutter:

flutter pub run build_runner build

And all left you need to do is parsing the data object to your brand new Data class:

FlusmicResponse response = await flusmic.getRootDocument();

final firstResult = response.results.first;
Data data = Data.fromJson(firstResult.data);

Working with RichText

RichText data type in Flusmic can include images and text. To handle this, you need to include the field as:

@freezed
abstract class Data with _$Data {
  factory Data({
    @required List<Richable> richTextField // <- Handles RichText fields
  }) = _Data;
}

Working with Links

Links in Flusmic can include media, a document reference or a URL to an extenal website. To handle this, you need to include the field as:

@freezed
abstract class Data with _$Data {
  factory Data({
     @required Linkeable linkField, // <- Handles Link fields
  }) = _Data;
}