DEV Community

Cover image for Flutter: Extending http class #1
Fatih Mert Doğancan
Fatih Mert Doğancan

Posted on

Flutter: Extending http class #1

Hi everyone,

I'm frontend developer mostly using Javascript (Vue, vs.) with Axios. I'm using Flutter for mobile development. Axios has a lot of easily functions, for example; like default settings etc.

It can do it using Flutter like using Axios preferences, it should be extending http.BaseClient http package (http: ^0.12.2).

I'm developing development kit for Flutter, I created sample Request class extending from http package for thats my kit. (See my kit here)

Now, this class these settings easily using like axios follow then;

axios.defaults.headers
axios.defaults.baseURL = 'https://api.example.com';
Enter fullscreen mode Exit fullscreen mode

How to use my Request class follow then;

class JsonPlaceholderService {
  Request rq = new Request();

  // Example;
  // https://jsonplaceholder.typicode.com/todos/1
  Future<TestTodoModel> getTodo(int todoId) async {
    return TestTodoModel.fromJson(
        json.decode((await rq.get('todos/${todoId.toString()}')).body));
  }
}
Enter fullscreen mode Exit fullscreen mode

Request class full code for Flutter;

import 'dart:convert';

import 'package:http/http.dart';
import 'package:http/http.dart' as http;

class Request extends http.BaseClient {
  final Client _client = Client();

  Request();

  String endpoint(String url) {
    return "https://jsonplaceholder.typicode.com/$url";
  }

  void _logEndpoint(String method, String url) {
    print('[${method.toUpperCase().toString()}] ${endpoint(url).toString()}');
  }

  @override
  Future<http.StreamedResponse> send(http.BaseRequest request) {
    request.headers['Content-type'] = 'application/json';
    request.headers['Accept'] = 'application/json';
    request.headers['Cache-Control'] = 'no-cache';

    return this._client.send(request);
  }

  @override
  Future<http.Response> head(url, {Map<String, String> headers}) {
    this._logEndpoint('head', url);
    return this._client.head(endpoint(url), headers: headers);
  }

  @override
  Future<http.Response> get(url, {Map<String, String> headers}) {
    this._logEndpoint('get', url);
    return this._client.get(endpoint(url), headers: headers);
  }

  @override
  Future<http.Response> post(url,
      {Map<String, String> headers, body, Encoding encoding}) {
    this._logEndpoint('post', url);
    return this
        ._client
        .post(endpoint(url), headers: headers, body: body, encoding: encoding);
  }

  @override
  Future<http.Response> put(url,
      {Map<String, String> headers, body, Encoding encoding}) {
    this._logEndpoint('put', url);
    return this
        ._client
        .put(endpoint(url), headers: headers, body: body, encoding: encoding);
  }

  @override
  Future<http.Response> patch(url,
      {Map<String, String> headers, body, Encoding encoding}) {
    this._logEndpoint('patch', url);
    return this
        ._client
        .patch(endpoint(url), headers: headers, body: body, encoding: encoding);
  }

  @override
  Future<http.Response> delete(url, {Map<String, String> headers}) {
    this._logEndpoint('delete', url);
    return this._client.delete(endpoint(url), headers: headers);
  }
}
Enter fullscreen mode Exit fullscreen mode

Thank you for reading,
My first English blog post item, sorry for grammer or anything.

Enjoy coding..

Discussion (1)

Collapse
ouzkagan profile image
ouzkagan

wow. that is exactly what i needed. thanks