DEV Community

Afolayan Ademola Segun
Afolayan Ademola Segun

Posted on

How To Send Data To The Internet In Flutter!

Hey Guys,

In My Last Article, we learned how to Fetch Data from the internet using the http package.
 
Now what about Sending Data to the Internet ūü§Ē, yeah it so easy also...

Sending data to the Internet is necessary for most apps. The http package has got that covered, too.

These few steps below show us how we can achieve this.

  • Add the¬†http¬†package.

  • Send data to a server using the¬†http¬†package.

  • Convert the response into a custom Dart object.

  • Get a¬†title¬†from user input.

  • Display the response on the Screen.

So we will go through these steps together,

Add the http package

To install the¬†http¬†package, add it to the dependencies section of the popular¬†pubspec.yaml¬†file (pronounced pubspec dot yamul or yaamu file ūüėā).
You can find the latest version of the http package on pub.dev.

article1.png

-Sending data to Server

We will be using the instance of sending an Album to the Server and we can do that by sending an Album title to JSONplaceholder using the http.post() method.

 Future<http.Response> createAlbum(String title) {  
    return http.post( Uri.parse(
    'https://jsonplaceholder.typicode.com/albums'
      ), 
    headers: <String, String>{ 
     'Content-Type': 'application/json; charset=UTF-8', 
     }, 
  body: jsonEncode(<String, String>{
   'title': title,
    }),
   );
 }
Enter fullscreen mode Exit fullscreen mode

The http.post() method returns a Future that contains a Response.
Just like we have learned previously:

  • Future¬†is a core Dart class for working with asynchronous operations. A Future object
    represents a potential value or error that will be available at some time in the future.

  • The¬†http.Response¬†class contains the data received from a successful http call.
    The createAlbum() method takes an argument title that is sent to the server to create
    an Album.

Convert the http.Response  to a custom Dart object

To make your life easier, it is better to convert raw data into Dart objects. 
How do we convert our Data into Dart object?

  • Create an Album Class

  • Convert the http.Response to an Album

But I don't know how to create an album class, and I can't even converts http.Response to an Album!!!¬† Dont worry mate. I gat you covered! ūü§Ě
Just follow this instance of a class.

class Album {
  final int id;
  final String title; 
 Album({required this.id, required this.title}); 
   factory Album.fromJson(Map<String, dynamic> json) { 
  return Album( 
      id: json['id'], title: json['title'], 
       );
   }
  }
Enter fullscreen mode Exit fullscreen mode

Converting http.Response to an album, very easy:
Use the following steps to update the createAlbum() function to return
a Future:

  • Convert the response body into a JSON¬†Map¬†with the¬†dart:convert¬†package.

  • If the server returns a¬†CREATED¬†response with a status code of 201, then convert the JSON¬†Map¬†into an¬†Album¬†using the¬†fromJson()¬†factory method.

  • If the server doesn‚Äôt return a¬†CREATED¬†response with a status code of 201, then throw an exception. (Even in the case of a ‚Äú404 Not Found‚ÄĚ server response, throw an exception. Do not return¬†null. This is important when examining the data in¬†snapshot,
    as shown below.)

I hope this is not too difficult to do, check this code snippet below to have a better understanding...

Future<Album> createAlbum(String title) async {  
   final response = await http.post( 
   Uri.parse(
    'https://jsonplaceholder.typicode.com/albums'), headers: <String, String>{ 
     'Content-Type': 'application/json; charset=UTF-8', 
       }, 
  body: jsonEncode(<String, String>{
   'title': title,
    }), 
    ); 
  if (response.statusCode == 201) { 
      // If the server did return a 201 CREATED response,\
     // then parse the JSON. 
   return Album.fromJson(jsonDecode(response.body)); 
 } else { 
  // If the server did not return a 201 CREATED response, 
 // then throw an exception.
 throw Exception('Failed to create album.'); 
   }
 }
Enter fullscreen mode Exit fullscreen mode

YES!!! Now you’ve got a function that sends the title to a server to create an album.

-Get a title from user input

Next, create a TextField to enter a title and an ElevatedButton to send data to the Server. Also, define a TextEditingController to read the user input from a TextField.

When the ElevatedButton is pressed, the _futureAlbum is set to the value returned by createAlbum() method.
Something Like this: ūüĎáūüĎáūüĎáūüĎáūüĎáūüĎáūüĎáūüĎáūüĎáūüĎáūüĎáūüĎáūüĎá

Column( 
   mainAxisAlignment: MainAxisAlignment.center, 
   children: <Widget>[ 
     TextField( controller: _controller, decoration: const InputDecoration(
        hintText:  'Enter Title'
      ), ), 
     ElevatedButton( onPressed: () { 
      setState(() { 
          _futureAlbum = 
         createAlbum(_controller.text); 
     }); 
    },
  child: const Text('Create Data'), 
   ),
   ], 
  )
Enter fullscreen mode Exit fullscreen mode

On pressing the Create Data button, make the network request, which sends the data in the TextField to the server as a POST request. The Future, _futureAlbum, is used in the next step.

From Here its as simple as saying ABC ‚úĆÔłŹ

- Display the Response on the Screen 

To display the data on the screen, use the FutureBuilder widget. The FutureBuilder widget comes with Flutter and makes it easy to work with asynchronous data sources. You must provide two parameters:

  • The¬†Future¬†you want to work with. In this case, the future returned from
    the createAlbum() function.

  • A¬†builder¬†function that tells Flutter what to render, depending on the state of
    the Future: loading, success, or error.

Note: The¬†snapshot.hasData¬†only returns¬†true¬†when the snapshot contains a non-null data value. This is why the¬†createAlbum()¬†function should throw an exception even in the case of a ‚Äú404 Not Found‚ÄĚ server response. If¬†createAlbum()¬†returns¬†null, then¬†CircularProgressIndicator¬†displays indefinitely.

FutureBuilder<Album>(  
     future: _futureAlbum, builder: (context, snapshot) {
      if (snapshot.hasData) { 
          return Text(snapshot.data!.title); 
       } else if (snapshot.hasError) {
         return Text('${snapshot.error}'); 
         } 
      return const CircularProgressIndicator(); 
     },)
Enter fullscreen mode Exit fullscreen mode

*Done! * You have successfully, sent Data to a server on the Internet!!! what you can't do doesn't exist¬†¬†ūüėČ. congratulations

if you would like to discuss this or any related issue Chat Me.
Follow me on Twitter for More...

Top comments (1)

Collapse
 
tayeb66 profile image
Tayeb Ahmed • Edited

It looks like flutter docs Example ūüėČ