Scribd
Upload
3 views3 pages

Flutter Django Integration

This document outlines how to connect a Flutter frontend with a Django backend, detailing the setup process for both frameworks. It includes steps for creating a Django project, setting up API endpoints, and fetching data in a Flutter app. Additionally, it provides best practices such as using Django Rest Framework and JWT authentication for secure user access.

Uploaded by

gcettscse
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views3 pages

Flutter Django Integration

This document outlines how to connect a Flutter frontend with a Django backend, detailing the setup process for both frameworks. It includes steps for creating a Django project, setting up API endpoints, and fetching data in a Flutter app. Additionally, it provides best practices such as using Django Rest Framework and JWT authentication for secure user access.

Uploaded by

gcettscse
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Page 1 of 3

Table of Contents
🔹 How to Connect Flutter with Django
🔹 Best Practices

can i use flutter with django backend

Yes, you can useFlutter with a Django backend! Flutter will handle the frontend (mobile or web UI),
while Django will serve as the backend (API, database, business logic).

🔹 How to Connect Flutter with Django


1. Set Up Django Backend
Create a Django project:
sh

django-admin startproject mybackend


cd mybackend

Install Django REST Framework (DRF):


sh

pip install djangorestframework

Add it to INSTALLED_APPS in settings.py :

python

INSTALLED_APPS = [
'rest_framework',
'your_app_name',
]

Create API endpoints in Django views using DRF:


python

from rest_framework.decorators import api_view


from rest_framework.response import Response

@api_view(['GET'])
def hello_world(request):
return Response({"message": "Hello from Django!"})

2. Run Django Server


sh
Page 2 of 3

python manage.py runserver

Your API will be available at http://127.0.0.1:8000/ .

3. Set Up Flutter App


Create a Flutter project:
sh

flutter create myapp


cd myapp

Add the http package to pubspec.yaml :

yaml

dependencies:
http: ^0.13.4

java

- Fetch data from Django in Flutter:


```dart
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

void main() {
runApp(MyApp());
}

class MyApp extends StatefulWidget {


@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {


String message = "Loading...";

@override
void initState() {
super.initState();
fetchMessage();
}

Future<void> fetchMessage() async {


final response = await http.get(Uri.parse('http://127.0.0.1:8000/'));
if (response.statusCode == 200) {
setState(() {
message = jsonDecode(response.body)['message'];
});
} else {
setState(() {
message = "Failed to load message";
});
Page 3 of 3
}
}

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Flutter + Django')),
body: Center(child: Text(message)),
),
);
}
}

4. Run the Flutter App


sh

flutter run

The app should now display "Hello from Django!" 🎉

🔹 Best Practices
Use Django Rest Framework (DRF) to build RESTful APIs.
Use JWT authentication (via djangorestframework-simplejwt ) for secure user authentication.

Use Flutter's Dio package for more advanced HTTP requests.

Deploy Django backend on Heroku, AWS, or DigitalOcean and connect it to Flutter.

Want help setting up authentication, database, or deployment? 🚀

You might also like