Question 245581 in Flutter Question posted in
The official Flutter documentation can be found here.

How to link a frontend flutter app with django, Mongodb backend?

I’m new to app development and have been creating a app with flutter UI and creating a backend with django and Mongodb.. How to link this with each other.. I don’t know which file should i write the link code.

I opened flutter app with dependencies with flutter create newapp and django app.

Tags:

3

Answers


  1. 0

    Hi Nithin i understand your question

    Django will be used for the api and mongodb is the non relational database.

    You have two options to get data from mongodb to flutter application

    1. Directly using mongodb link and get the data using packages (This will be simple if you want to learn) (Less secure)
    2. Using django and create apis where you will use mongodb , Use those apis in the application and get the data and use it.It will be more secure
    Login or Signup to reply.
  2. 0

    Django is a really good framework for web applications.
    Nevertheless it is not adapted natively to work with nosql databases like mongodb. See the doc

    As you are new to app development, I would advice you to use Mysql with Django, or to change to another framework if you want to keep mongodb. App development is difficult, so if I were you I would try to not add more difficulty in using tools not designed to work together.

    If you want to continue with Django, you can use Rest Framework to create an API in order to connect your frontend with your backend.

    Login or Signup to reply.
  3. 0

    First of all I don´t recommed to call the database directly from the frontend, you have to develop a backend so you can call it´s endpoints. If you are using backend-as-a-service you´ll have boilerplate in your code and configuration it´s limited.

    To connect with the backend you need an Http client to do it (I recommend dio), you should have exposed enpoints in your backend so you must create a repository in your flutter app:

    Add the package in your pubspec.yaml

    dependencies:
  flutter:
    sdk: flutter
  dio: ^4.0.5 # Use the latest version of the Dio package

    Use example, simple CRUD of Task object:

    import 'package:dio/dio.dart';

// Define a model class for tasks (the mongodb model)
class Task {
  int id;
  String title;
  bool completed;

  Task({required this.id, required this.title, required this.completed});
}

class TaskRepository {
  final Dio _dio = Dio();
  final String baseUrl = 'https://your-api-url.com/tasks'; // Replace with your API URL

  // Create a new task
  Future<Task> createTask(Task task) async {
    try {
      final response = await _dio.post(baseUrl, data: task.toJson());
      return Task.fromJson(response.data);
    } catch (error) {
      throw Exception('Failed to create task: $error');
    }
  }

  // Read all tasks
  Future<List<Task>> getAllTasks() async {
    try {
      final response = await _dio.get(baseUrl);
      return (response.data as List).map((taskData) => Task.fromJson(taskData)).toList();
    } catch (error) {
      throw Exception('Failed to retrieve tasks: $error');
    }
  }

  // Update a task
  Future<Task> updateTask(Task task) async {
    try {
      final response = await _dio.put('$baseUrl/${task.id}', data: task.toJson());
      return Task.fromJson(response.data);
    } catch (error) {
      throw Exception('Failed to update task: $error');
    }
  }

  // Delete a task
  Future<void> deleteTask(int taskId) async {
    try {
      await _dio.delete('$baseUrl/$taskId');
    } catch (error) {
      throw Exception('Failed to delete task: $error');
    }
  }
}

    Also I recommed to serialize the objects with the json_serialization package. See
    https://stackoverflow.com/a/77088234/22000646

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search