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
|
1 2 3 4 5 6 |
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
|
1 2 3 |
django-admin startproject backend cd backend python manage.py startapp api |
3. Configure PostgreSQL in settings.py
|
1 2 3 4 5 6 7 8 9 10 11 |
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:
|
1 2 3 |
class Task(models.Model): title = models.CharField(max_length=100) completed = models.BooleanField(default=False) |
5. Enable CORS and DRF
|
1 |
pip install django-cors-headers |
In settings.py:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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
|
1 2 |
flutter create flutter_django_app cd flutter_django_app |
2. Add HTTP Package
Edit pubspec.yaml:
|
1 2 3 4 |
dependencies: flutter: sdk: flutter http: ^0.13.6 |
3. Fetch Data from Django API
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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
|
1 2 3 4 5 |
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!