Flutter App with Django Backend Using DRF and PostgreSQL | Complete Guide 2025

Combining the power of Flutter for the frontend and Django REST Framework (DRF) for the backend is an excellent choice for modern mobile app development. In this guide, you'll learn how to set up a fully functional Flutter app connected to a Django backend powered by PostgreSQL.

📦 Why Choose This Stack?

• Flutter: Fast, cross-platform mobile UI toolkit by Google
• Django REST Framework: Easy-to-use, scalable Python API framework
• PostgreSQL: Reliable and powerful open-source SQL database

🛠️ Tools & Technologies Used

• Flutter (Frontend)
• Django 4+ with Django REST Framework (Backend)
• PostgreSQL (Database)
• CORS Headers, djangorestframework-simplejwt (for authentication)

🔧 Step 1: Set Up the Django Backend

1. Create a Virtual Environment and Install Packages

python -m venv env
source env/bin/activate  # Mac/Linux
env\Scripts\activate     # Windows

pip install django djangorestframework psycopg2-binary

2. Start a New Django Project

django-admin startproject backend
cd backend
python manage.py startapp api

3. Configure PostgreSQL in settings.py

DATABASES = {
  'default': {
    'ENGINE': 'django.db.backends.postgresql',
    'NAME': 'flutterdb',
    'USER': 'postgres',
    'PASSWORD': 'yourpassword',
    'HOST': 'localhost',
    'PORT': '5432',
  }
}

4. Set Up a Simple DRF API

Create a model, serializer, and view for something basic like a Task or Product. Example model:

class Task(models.Model):
    title = models.CharField(max_length=100)
    completed = models.BooleanField(default=False)

5. Enable CORS and DRF

pip install django-cors-headers

In settings.py:

INSTALLED_APPS = [
    ...
    'corsheaders',
    'rest_framework',
    'api',
]

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    ...
]

CORS_ALLOW_ALL_ORIGINS = True  # Or restrict to Flutter app origin

📲 Step 2: Create the Flutter App

1. Create the Flutter Project

flutter create flutter_django_app
cd flutter_django_app

2. Add HTTP Package

Edit pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.6

3. Fetch Data from Django API

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

Future<List> fetchTasks() async {
  final response = await http.get(Uri.parse('http://127.0.0.1:8000/api/tasks/'));
  if (response.statusCode == 200) {
    return json.decode(response.body);
  } else {
    throw Exception('Failed to load tasks');
  }
}

4. Display Data in Flutter

Use a FutureBuilder widget to show data in a list.

🔐 Step 3: Add Authentication (Optional)

You can use djangorestframework-simplejwt for token-based auth and secure communication with Flutter.

🚀 Step 4: Run the Full Stack App

• Start Django API: python manage.py runserver
• Run your Flutter app: flutter run

Ensure both can communicate – adjust CORS and base URLs as needed.

🔄 Final Folder Structure Overview

backend/
 └── api/
flutter_django_app/
 └── lib/
     └── main.dart

💡 Conclusion

By connecting Flutter with a Django backend and PostgreSQL, you’re building a modern, scalable, and secure mobile app stack. This setup is great for everything from MVPs to production-level apps.

📌 What's Next?

• Implement JWT authentication
• Add CRUD functionality
• Use Flutter Provider or Riverpod for state management
• Deploy Django backend on Heroku or Render

💬 Questions?

Leave a comment below if you have questions or want more advanced examples!