How to return a dio output in Flutter

Question

What i am trying to do is i am trying to catch the dio output. Right now i am trying to create an article with flutter future functions. Here are my codes:

Flutter

Future<dynamic> futureArticle;
String articleid;

futureArticle = CreateArticle(user.id, caption.text)

Dio Post Function

CreateArticleImage(String author,String caption,) async {
  try {

    FormData formData = new FormData.fromMap({
      'author' : author.toString(),
      'caption' : caption,
    });

    Response response = await Dio().post("$SERVER_IP/api/articlecreate/", data: formData);
    print(response.toString());
  } catch (e) {
    print(e);
  }
}

Json output

  {

        "id": "6ce0f013-d1fe-4f9f-bb72-0f1c8d21f64f",
        "caption": "Caption",
    },

What i am trying to do is i want to catch the id and return it to flutter as articleid. Does anybody know how to?

Answer 1

When consuming an API, it's recommended to create a Class based on the data we expect to receive:

class Article {
    String id;
    String caption;

    Article({
        this.id,
        this.caption,
    });

}

Since we're using an API that returns JSON objects, we can implement a toJson function and a fromJson factory:

class Article {
    String id;
    String caption;

    Article({
        this.id,
        this.caption,
    });

    factory Article.fromJson(Map<String, dynamic> json) => new Article(
        id: json["id"] == null ? null : json["id"],
        caption: json["caption"] == null ? null : json["caption"],
    );

    Map<String, dynamic> toJson() => {
        "id": id == null ? null : id,
        "caption": caption == null ? null : caption,
    };

}

By doing so, we can create an Article class from the HTTP response:

 FormData formData = new FormData.fromMap({
   'author' : author.toString(),
   'caption' : caption,
 });
 Response response = await Dio().post("$SERVER_IP/api/articlecreate/", data: formData);
 print(response.toString());
 final jsonData = json.decode(response.body);
 Article article = Article.fromJson(Map<String, String>.from(jsonData));

The following snippet wraps a full example based on the scenario you specified:

import 'dart:convert';

void getArticle(var user, var caption) async {
    Future<dynamic> futureArticle;
    String articleid;

    futureArticle = await createArticle(user.id, caption.text);

    print(futureArticle.id);
    print(futureArticle.caption);

    articleid = futureArticle.id;
}

Future<Article> createArticleImage(String author,String caption,) async {
  try {
    FormData formData = new FormData.fromMap({
      'author' : author.toString(),
      'caption' : caption,
    });
    Response response = await Dio().post("$SERVER_IP/api/articlecreate/", data: formData);
    print(response.toString());
    final jsonData = json.decode(response.body);
    Article article = Article.fromJson(Map<String, String>.from(jsonData));
    return article;
  } catch (e) {
    print(e);
  }
}

class Article {
    String id;
    String caption;

    Article({
        this.id,
        this.caption,
    });

    factory Article.fromJson(Map<String, dynamic> json) => new Article(
        id: json["id"] == null ? null : json["id"],
        caption: json["caption"] == null ? null : json["caption"],
    );

    Map<String, dynamic> toJson() => {
        "id": id == null ? null : id,
        "caption": caption == null ? null : caption,
    };
}