HTTP Requests in Flutter with Dio Library | Node JS | MongoDB

Making HTTP requests in mobile application is one of the common tasks. Thanks to http requests application can communicate with backend and selects data.

Flutter framework offers http package which works great when we need do basic stuff. When we need to do something more advanced we something bigger. And this can be done by using Dio. Dio is http connection library which has extra features like interceptors which will be helpful in many tasks (adding token authentication for each request, logging requests). Dio API is pretty easy and the library is being maintained by the authors. It’s really worth trying.

Node JS and Express Framework

Express is one of the most popular web frameworks for node.js. It is built on top of node.js http module, and adds support for routing, middleware, view system etc. It is very simple and minimal, unlike other frameworks that try do way to much, thereby reducing the flexibility for developers to have their own design choices.

I’ll be following the tutorial by Callicoder.com to build a Node Js application with MongoDB to build our restful api service

It covers

  1. Mongodb
  2. GET Request
  3. POST Request
  4. PUT Request/ Update
  5. DELETE Request

Flutter Notes App

Our application will have the following option

  • Create Note
  • Update Note
  • Delete Note

We will be using Future Builder to fetch the notes and Dio library to create HTTP requests.

Dio is a powerful Http client for Dart, which supports Interceptors, Global configuration, FormData, Request Cancellation, File downloading, Timeout etc.

DIO GET REQUEST EXAMPLE

import 'package:dio/dio.dart';

void getHttp() async {
  try {
    Response response = await Dio().get("http://www.google.com");
    print(response);
  } catch (e) {
    print(e);
  }
}

Notes Service Class

Let’s create a singleton class named NotesService to provide the HTTP services.

import 'dart:async';
import 'dart:convert';
import 'dart:io';

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';


class NotesService {
  Dio _dio;
  static const _baseUrl = 'http://localhost:3000';

  static final NotesService _singleton = NotesService._internal();

  factory NotesService() {
    return _singleton;
  }

  NotesService._internal() {
    _dio = Dio();
   }

}

Get Notes

The GET notes service will be a GET request, which fetches all the available notes in the DB

Future<String> getNotes() async {
  Response response;
  try {
    response = await _dio.get("$_baseUrl/notes");
    debugPrint(response.statusMessage);

    return json.encode(response.data);
  } catch (e) {
    throw e;
  }
}

Create Notes

The CREATE notes service will be a POST request, will CREATE a new OBJECT in the DB

Future<String> createNote(Map<String, dynamic> map) async {
  Response response;
  response = await _dio.post(
    "$_baseUrl/notes",
    data: map,
    options: Options(
      headers: {HttpHeaders.contentTypeHeader: 'application/json'},
    ),
  );

  debugPrint(response.statusMessage);

  return response.data.toString();
}

Update & Delete Note

The update and delete note will update the notes or delete the note based on the given ID.

UPDATE notes will be a PUT request and DELETE will be a DELETE request

Below is the complete NotesService Class

import 'dart:async';
import 'dart:convert';
import 'dart:io';

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';

class NotesService {
  Dio _dio;
  static const _baseUrl = 'http://localhost:3000';

  static final NotesService _singleton = NotesService._internal();

  factory NotesService() {
    return _singleton;
  }

  NotesService._internal() {
    _dio = Dio();
  }

  Future<String> getNotes() async {
    Response response;
    try {
      response = await _dio.get("$_baseUrl/notes");
      debugPrint(response.statusMessage);

      return json.encode(response.data);
    } catch (e) {
      throw e;
    }
  }

  Future<String> deleteNote(String noteID) async {
    Response response;
    try {
      response = await _dio.delete("$_baseUrl/notes/$noteID");
      debugPrint(response.statusMessage);

      return json.encode(response.data);
    } catch (e) {
      throw e;
    }
  }

  Future<String> updateNote(String noteId, Map<String, dynamic> map) async {
    Response response;
    response = await _dio.put("$_baseUrl/notes/$noteId", data: map);
    debugPrint(response.statusMessage);

    return response.data.toString();
  }

  Future<String> createNote(Map<String, dynamic> map) async {
    Response response;
    response = await _dio.post(
      "$_baseUrl/notes",
      data: map,
      options: Options(
        headers: {HttpHeaders.contentTypeHeader: 'application/json'},
      ),
    );
    debugPrint(response.statusMessage);

    return response.data.toString();
  }
}

NotesController Class

NotesController will help us to keep in control of the data between the UI and Service class

import 'package:flutter/material.dart';
import 'package:flutter_widgets/note_app/dto/notes_dto.dart';
import 'package:flutter_widgets/note_app/service/notes_service.dart';

class NotesController {
  NotesService _notesService;

  static final NotesController _singleton = NotesController._internal();

  factory NotesController() {
    return _singleton;
  }

  NotesController._internal() {
    _notesService = NotesService();
  }

  Future<List<NotesDto>> getNotes() async {
    try {
      String response = await _notesService.getNotes();
      debugPrint(response);
      return notesDtoFromJson(response);
    } catch (e) {
      throw e;
    }
  }

  Future<String> deleteNote(String noteID) async {
    try {
      String response = await _notesService.deleteNote(noteID);
      debugPrint(response);
      return '';
    } catch (e) {
      throw e;
    }
  }

  Future<String> createNotes(String title, String content) async {
    try {
      Map<String, dynamic> map = {
        'title': title,
        'content': content,
      };
      String response = await _notesService.createNote(map);
      debugPrint(response);
      return '';
    } catch (e) {
      throw e;
    }
  }

  Future<String> updateNote(String id, String title, String content) async {
    try {
      Map<String, dynamic> map = {
        'title': title,
        'content': content,
      };
      String response = await _notesService.updateNote(id, map);
      debugPrint(response);
      return '';
    } catch (e) {
      throw e;
    }
  }
}

The UI and rest of the integration are available in Flutter Ui Kit

Connect with me on LinkedIn

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s