DEV Community

Cover image for HTTP 🤩🤩 !!!! Flutter
Prakash S
Prakash S

Posted on

3 1

HTTP 🤩🤩 !!!! Flutter

Flutter is meant to create UI/Client oriented stack, but without a backend we cannot deliver a full fledged business functionality to the user.

In this post we are going to see how we can consume the http services.

Let see in action 😇
Our first step would be add the package HTTP to pubspec.yaml file

We are going to see the Four major methods of HTTP (GET, PUT, POST, DELETE) using the open API JsonPlaceholder.

Package ❤️🥰 http ❤️🥰 does all the things for us, we just need to use it as rest client like PostMan

Get🧐

import 'dart:convert';
import 'package:http/http.dart';
import 'models/post.dart';

Future<List<Post>> getPosts() async {
    Client client = Client();
    try {
      var response =
          await client.get('https://jsonplaceholder.typicode.com/posts');
      List posts = jsonDecode(response.body);
      return posts.map((post) => Post.fromJson(post)).toList();
    } finally {
      client.close();
    }
  }
Enter fullscreen mode Exit fullscreen mode

POST😮

Future<Post> newPost(Post editedPost) async {
    Client client = Client();
    try {
      String url = 'https://jsonplaceholder.typicode.com/posts/';
      var body = jsonEncode(editedPost.toJson());
      var response = await client.post(
        url,
        body: body,
        headers: <String, String>{
          'Content-Type': 'application/json; charset=UTF-8',
        },
      );
      var post = jsonDecode(response.body);
      return Post.fromJson(post);
    } finally {
      client.close();
    }
  }
Enter fullscreen mode Exit fullscreen mode

PUT🙄

Future<Post> editPost(Post editedPost) async {
    Client client = Client();
    try {
      String url = 'https://jsonplaceholder.typicode.com/posts/${editedPost.id}';
      var body = jsonEncode(editedPost.toJson());
      var response = await client.put(
        url,
        body: body,
        headers: <String, String>{
          'Content-Type': 'application/json; charset=UTF-8',
        },
      );
      var post = jsonDecode(response.body);
      return Post.fromJson(post);
    } finally {
      client.close();
    }
  }
Enter fullscreen mode Exit fullscreen mode

DELETE🥺

Future deletePost(int id) async {
    Client client = Client();
    try {
      String url = 'https://jsonplaceholder.typicode.com/posts/${id}';
      await client.delete(url);
      print('post deleted succesfully');
    } finally {
      client.close();
    }
  }
Enter fullscreen mode Exit fullscreen mode

for full sample GitHubRepo

Happy Fluttering 😇😇

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Sentry mobile image

Improving mobile performance, from slow screens to app start time

Based on our experience working with thousands of mobile developer teams, we developed a mobile monitoring maturity curve.

Read more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay