Showmik

Posted on Jul 26, 2022

Django Rest API x Flutter

#flutter #django #djangorestapi #python

It is amazing that two different technologies can work together.
In this article we will find out how can we use django rest API in a flutter app. sound exiting? let's find out how...

At first we will create rest api with django rest framework.
with this two line we have created a django project along with an django app

Django-admin startproject flutterApi .
Django-admin startapp api

Now we have to install django rest framework

pip install djangorestframework

after that add

'rest_framework' in

flutterApi/settings.py
in your codebase

Now we have to create a model for our django database. This is a simple data model.

api/models.py

Now we will migrate the model by using these two lines

py manage.py makemigrations
py manage.py migrate

now the model is migrated.

We will set the url setting for our api.

flutterapi/urls.py we create the api designation

after that we crate a urls.py file in 'api' folder in your project structure

In this file we will create the api get, post, update, delete urls.

After this we have to make the serializers for the api.

crate serializers.py file like api/serializers.py

then write the code like this.

Now let's write the actual code for developing the api
first go to api/views.py

In here we will be writing the code.
first import the models and serializers.

The code..

Now register your model in api/admin.py file

So we are done building the API! let's test it now
first run the django server by writing below code in console

py manage.py runserver

you should see something like this

the server is at http://127.0.0.1:8000/.hit it on your browser.

at first you will see this error but do not panic.

just hit http://127.0.0.1:8000/api to see all possible urls.
you should see something like this.

before see the api data we need to add data in our database. which is the admin panel in django. one of the best things in djnago.

py manage.py createsuperuser

use this for createing you user admin. Fill with name username, password and the hit enter. after this run the server again

http://127.0.0.1:8000/admin

after login you will see

click products and then click add.

fill this with some values. ad hit save.
example:

Product name: OnePlus Nord 2 5G 12GB/256GB

Price: 40000

Prdoduct link = https://www.pickaboo.com/oneplus-nord-2-5g-12gb-256gb.html

Image: https://azse77seaprodsa.blob.core.windows.net/b2b-dr-
pickaboocdn/media/catalog/product/cache/ad6eca43ef1a34982ffeb01940d91d5b/n/o/nord-2-5g-12gb-256gb-7-16-2022.jpg

after saving the data follow the api links.

if we go to http://127.0.0.1:8000/api/product-list/ like the urls we should see the data as json format like this.

So our rest api creating is done! Now we have to prepare the flutter part!

Flutter app

For creating a flutter app we use

flutter create app_name
ex: flutter create django_rest_api_x_flutter

in your flutter project pubspec.ymal file add these dependencies

I will use GetX state management to manage your data in more efficient way.
I also used flutter_staggered_grid_view to use in my project. it is very efficient for making grids in flutter.

I am not going to explain the designing part of flutter. I will be explaining the modeling and http part in this blog.
you can download or fork the project from here.

https://github.com/Miskat-UL/GetX-rest-api-flutter

don't forget to give it a star!

Now in your flutter project structure your files like this

In remote_service.dart file we will be importing the http packages.

we have to use the http module as follows.
for cors we used the django cors.but it is not a matter now.
just use the origin as headers so that the browser can access xml requests.
the code gose here.