CRUD Operation with Flutter & Node.js

Welcome to this tutorial series where you will learn about making an application with a Flutter as front-end and Node.js, express, MongoDB as back-end.

In this tutorial you will learn :

1. Setting up the front-end and the back-end.
2. POST REST API
3. GET REST API
4. Update and Delete REST API
5. Connection with MongoDB

Lets Get Started:

To install flutter into your machine you can have a look at Flutter.

To install node into your machine you can have a look at Node.

Setting up the Back-End :

1. Open your favorite IDE and start the terminal in it
2. Make a folder in your Local PC for me I am naming it “crud” and placing it into my D: drive, So to install node into that folder

cd D:\\crud\

3. Run the following command to add node to your project

npm init

3. Enter the name of the package and press enter for rest of all the asked items.

4. This will create a package.json file

(if the package.json file is not visible in your IDE then refer your terminal path and see where it has been created. Then open that file in your IDE using File tab)

Your package.josn should look like this (name may vary)

{
  "name": "crud",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Installing Node Packages:

1. Express

npm i express

2. Create a new file in the IDE named index.js this will be your entry point.

So far your IDE should look similar:

3. In the index.js create the server using express package :

const express = require("express");

const app = express();

app.listen(2000, ()=>{
    console.log("listening to port 2000");
});

(here when the server launches the terminal should print listening to post 2000)

4. Also you can use nodemon package as it refreshes automatically whenever the file is saved :

npm i nodemon

5. Start the server with the following command in the terminal:

modemon index.js

6. Your terminal should be look like this

7. In your web browser type in the search bar

http://localhost:2000/

If you see “Cannot Get /”, VOILA!! you have done everything correctly.

Now setting up the Front-End :

1. Open another window of your IDE > Open new Flutter project > name it anything you like for me its crud_frontend.

2. As this is the tutorial to make you understand the basics of CRUD operations from flutter to node so we’ll keep the UI very basic.

3. In the main.dart add 4 buttons for 4 operations POST, GET, UPDATE, DELETE.

import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            children: [
              ElevatedButton(onPressed: () {}, child: const Text("POST")),
               ElevatedButton(onPressed: () {}, child: const Text("GET")),
                ElevatedButton(onPressed: () {}, child: const Text("UPDATE")),
                 ElevatedButton(onPressed: () {}, child: const Text("DELETE"))
            ],
          ),
        ),
      ),
    );
  }
}

4. In your android > app > build.gradle set the compileSdkVersion to 33, minSdkVersion to 21 and targetSdkVersion to 33.

android {
    compileSdkVersion 33
    ndkVersion flutter.ndkVersion

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    kotlinOptions {
        jvmTarget = '1.8'
    }

    sourceSets {
        main.java.srcDirs += 'src/main/kotlin'
    }

    defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "com.example.crud_frontend"
        // You can update the following values to match your application needs.
        // For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-gradle-build-configuration.
        minSdkVersion 21
        targetSdkVersion 33
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }

5. Add http dependency to your flutter project.

flutter pub add http

Now your Front-End and Back-End is all setup, I’ll meet you in the next tutorial in which your be able to POST request from the Front-End.

GitHub - Saransh1650/crud_frontend

GitHub - Saransh1650/crud_backend

POST request using Flutter and Node.js :

CRUD Operations with Flutter and Node.js (POST REST API)

GET request using FLutter and Node.js :

CRUD Operations with Flutter and Node.js (GET REST API)

LinkedIn : https://www.linkedin.com/in/saransh-singhal-359082238/