Building a Full-Stack Flutter App with Node.js and MongoDB

Modern mobile applications rarely exist in isolation. Most production apps rely on backend services for authentication, data persistence, real-time updates, and business logic. Flutter excels at building high-quality cross-platform UIs, but to deliver a complete product, it must be paired with a robust backend.

In this guide, we will walk through how to build a full-stack Flutter application using Node.js, Express, and MongoDB. You will learn how the frontend and backend communicate, how data flows across the system, and how to structure both sides for scalability and maintainability.

This article focuses on clarity and practical architecture rather than shortcuts, making it suitable for developers who want to build real-world applications.

What We Are Building

We will build a simple but realistic application:

• A Flutter mobile app
• A Node.js REST API
• A MongoDB database

Core features:

• Create and fetch data from MongoDB
• Expose REST endpoints via Express
• Consume APIs from Flutter
• Clean separation between frontend and backend

High-Level Architecture

Flutter App

   ↓ HTTP (JSON)

Node.js (Express API)

   ↓ ODM (Mongoose)

MongoDB Database

• Flutter handles UI and user interactions
• Node.js manages business logic and validation
• MongoDB stores application data

This separation allows independent scaling and testing of each layer.

Tech Stack Overview

Frontend

• Flutter – Cross-platform UI framework
• Dart – Programming language
• HTTP / Dio – API communication

Backend

• Node.js – JavaScript runtime
• Express.js – Web framework
• MongoDB – NoSQL database
• Mongoose – MongoDB ODM

Step 1: Setting Up the Backend (Node.js + Express)

Initialize the Project

mkdir backend
cd backend
npm init -y
npm install express mongoose cors dotenv

Create a basic server file:

// index.js
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');

const app = express();
app.use(cors());
app.use(express.json());
app.get('/', (req, res) => {
  res.send('API is running');
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

Step 2: Connect to MongoDB

Create a MongoDB database using MongoDB Atlas or a local instance.

mongoose.connect(process.env.MONGO_URI)
  .then(() => console.log('MongoDB connected'))
  .catch(err => console.error(err));
Use a .env file:
MONGO_URI=mongodb+srv://<username>:<password>@cluster.mongodb.net/app

Step 3: Define a Data Model

Mongoose models define the shape of your data.

// models/Todo.js
const mongoose = require('mongoose');
const TodoSchema = new mongoose.Schema({
  title: { type: String, required: true },
  completed: { type: Boolean, default: false },
}, { timestamps: true });
module.exports = mongoose.model('Todo', TodoSchema);

Step 4: Create REST API Endpoints

// routes/todoRoutes.js
const express = require('express');
const Todo = require('../models/Todo');
const router = express.Router();
router.post('/', async (req, res) => {
  const todo = await Todo.create(req.body);
  res.json(todo);
});
router.get('/', async (req, res) => {
  const todos = await Todo.find();
  res.json(todos);
});

module.exports = router;

‍

Register the routes:

app.use('/api/todos', require('./routes/todoRoutes'));

Step 5: Setting Up the Flutter App

Create a new Flutter project:

flutter create frontend
cd frontend
Add dependencies:
dependencies:
  flutter:
    sdk: flutter
  dio: ^5.0.0

Step 6: Define a Data Model in Flutter

class Todo {
  final String id;
  final String title;
  final bool completed;

  Todo({required this.id, required this.title, required this.completed});
  factory Todo.fromJson(Map<String, dynamic> json) {
    return Todo(
      id: json['_id'],
      title: json['title'],
      completed: json['completed'],
    );
  }
}

Step 7: API Service Layer

class ApiService {
  final Dio dio = Dio(BaseOptions(baseUrl: 'http://localhost:3000'));
  Future<List<Todo>> fetchTodos() async {
    final response = await dio.get('/api/todos');
    return (response.data as List)
        .map((json) => Todo.fromJson(json))
        .toList();
  }
}

This layer isolates network logic from UI code.

Step 8: Display Data in Flutter UI

FutureBuilder<List<Todo>>(
  future: ApiService().fetchTodos(),
  builder: (context, snapshot) {
    if (!snapshot.hasData) {
      return CircularProgressIndicator();
    }
    return ListView(
      children: snapshot.data!
          .map((todo) => ListTile(title: Text(todo.title)))
          .toList(),
    );
  },
)