{"id":27,"date":"2022-02-04T00:32:37","date_gmt":"2022-02-04T00:32:37","guid":{"rendered":"https:\/\/blogs.oregonstate.edu\/yangellen\/?p=27"},"modified":"2022-02-06T00:52:34","modified_gmt":"2022-02-06T00:52:34","slug":"flutter-http-post-request","status":"publish","type":"post","link":"https:\/\/blogs.oregonstate.edu\/yangellen\/2022\/02\/04\/flutter-http-post-request\/","title":{"rendered":"Flutter Http POST request"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

So, I have created a form for my project, how do I send the user input to the database?<\/h2>\n\n\n\n

When the form only has one or two questions such as login form, it’s easy to transfer user input. However, many forms have multiple questions. It will be a lot easier to transfer information with a data transfer object. <\/p>\n\n\n\n

Let’s have simple class to see how this work,<\/p>\n\n\n\n

\n

class<\/code> User {<\/p>

  String userName;<\/p>

  String address;<\/p>

  String zipCode;<\/p>

  String city;<\/p>

  String state;<\/p>

User (this.userName, this.address, this.zipCode , this.city, this.state}<\/p><\/blockquote>\n<\/div><\/div>\n\n\n\n

With the User class, you can create a user object and whenever user enter the information, you can store with it. <\/p>\n\n\n\n

final newUser = User( );<\/strong> <\/p>\n\n\n\n

This newUser will be your data transfer object to store information. For example, <\/p>\n\n\n\n

newUser.userName = “Emily K<\/p>\n\n\n\n

<\/p>\n\n\n\n

What next?<\/h2>\n\n\n\n

This depends on how you are going to store your data in database. Here I’m going to send my data to a POST api since this is what we are doing with our project. <\/p>\n\n\n\n

<\/p>\n\n\n\n

Convert Object to JSON<\/h2>\n\n\n\n

Before I can transfer the information from my object, I need to convert it to JSON. You can use dart:convert<\/strong> libray’s built in jsonEncode() <\/strong>function to convert user object to JSON. But if you call jsonEncode() without creating toJson() <\/strong>method, you will get an error. Remember the User class we created earlier, I want you to add toJson() method there.<\/p>\n\n\n\n

class User {<\/p>

  …………………<\/p>

  Map toJson() => {<\/p>

        “userName”: userName,<\/p>

        “address”: address,<\/p>

        “zipCode”: zipCode,<\/p>

        “city”: city,<\/p>

        “state”: state,<\/p>

      };<\/p>

}<\/p>

<\/p>Now you are ready to convert your object to JSON. In the you are converting the object, import ‘dart: convert’;<\/strong> Assuming you already store all information for newUser object, here is how you can use jsonEncode():<\/cite><\/blockquote>\n\n\n\n

String jsonUser = jsonEncode(newUser);<\/strong><\/p>\n\n\n\n

You don’t need to call toJson( ) here because jsonEncode will call toJson( ) for you. <\/p>\n\n\n\n

<\/p>\n\n\n\n

Send data to the internet<\/h2>\n\n\n\n

In Flutter documentation, you can follow https:\/\/docs.flutter.dev\/cookbook\/networking\/send-data<\/a> using http package to send your data to an API. Their example use {JSON} placeholder, free fake API for testing and prototyping. This method will work for most API but it did not work for the API we created.<\/p>\n\n\n\n

<\/p>\n\n\n\n

What happen???<\/h2>\n\n\n\n

My post request was rejected because my request body wasn’t JSON. What??? Didn’t I just change my object to JSON in the above steps? I verified my jsonUser online, it is a valid JSON and I have specified headers: {“Content-Type”:”application\/json”}.<\/p>\n\n\n\n

<\/p>\n\n\n\n

What they didn’t tell you?<\/h2>\n\n\n\n

It turns out when you use the http package, it changes the request body to application\/json ; charset=utf-8<\/strong>. The server doesn’t expect to see the suffix so it’s being rejected. <\/p>\n\n\n\n

<\/p>\n\n\n\n

Now what?<\/h2>\n\n\n\n

You can contact the server to have the API accept “application\/json ; charset=utf-8<\/strong>” or you can use HttpClient<\/strong>.<\/p>\n\n\n\n

In you file,<\/p>\n\n\n\n

import ‘dart:convert’;<\/p>

import ‘dart:io’;<\/p>

import ‘dart:async’;<\/p>Example code: <\/cite><\/blockquote>\n\n\n\n

  Future<void> submitPostForm() async {<\/p>

    String Url = ‘https:\/\/someapi.wn.r.appspot.com\/’<\/p>

    HttpClient httpClient = HttpClient();<\/p>

    HttpClientRequest request = await httpClient.postUrl(Uri.parse(url));<\/p>

    request.headers.set(‘content-type’, ‘application\/json’);<\/p>

    request.add(utf8.encode(jsonEncode(newUser)));<\/p>

    HttpClientResponse response = await request.close();<\/p>

 ..codes to handle response<\/p>

  }<\/p>

<\/p><\/blockquote>\n\n\n\n

Tada!!! 201 Created!<\/h2>\n\n\n\n
\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"

So, I have created a form for my project, how do I send the user input to the database? When the form only has one or two questions such as login form, it’s easy to transfer user input. However, many forms have multiple questions. It will be a lot easier to transfer information with a… Continue reading Flutter Http POST request<\/span><\/a><\/p>\n","protected":false},"author":12023,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-27","post","type-post","status-publish","format-standard","hentry","category-uncategorized","entry"],"_links":{"self":[{"href":"https:\/\/blogs.oregonstate.edu\/yangellen\/wp-json\/wp\/v2\/posts\/27","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.oregonstate.edu\/yangellen\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.oregonstate.edu\/yangellen\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/yangellen\/wp-json\/wp\/v2\/users\/12023"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/yangellen\/wp-json\/wp\/v2\/comments?post=27"}],"version-history":[{"count":4,"href":"https:\/\/blogs.oregonstate.edu\/yangellen\/wp-json\/wp\/v2\/posts\/27\/revisions"}],"predecessor-version":[{"id":34,"href":"https:\/\/blogs.oregonstate.edu\/yangellen\/wp-json\/wp\/v2\/posts\/27\/revisions\/34"}],"wp:attachment":[{"href":"https:\/\/blogs.oregonstate.edu\/yangellen\/wp-json\/wp\/v2\/media?parent=27"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/yangellen\/wp-json\/wp\/v2\/categories?post=27"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/yangellen\/wp-json\/wp\/v2\/tags?post=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}