Django Rest API x Flutter
Tags: flutter, django, djangorestapi, python
Published: 2022-07-26 18:13:33

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

![in settings.py](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ta97znc0is0at2i249z7.png)

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

> api/models.py

![Django model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jbgjmhpn8hyidywbbqzq.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n0s6epv5b15lechcmq2z.png)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4prw3wcwricrl6vnw3g4.png)

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



![url patterns](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6m5z525nlt9zxc3t9eq4.png)

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.

![serializers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1jid9j6bl4fdk06hj7v2.png)



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.

![import](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/umffatftfjhb5x0rssf5.png)

The code..
![view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/82j0gawlv6c4py991r83.png)

![view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d06ipsjl4gnbuibfdmn4.png)

![view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f0ynbtokvjwkjhuz9sr6.png)


- Now register your model in api/admin.py file

![admin.py](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/44llgxp7zx75h7gutvnf.png)


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 

![server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kut0117jfxrtnxlz87by.png)

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.

![error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o7d2vdv688cicl1stn6s.png)

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

![api](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n8gh35ktolsbcgz5l1ms.png)

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
```
login with your user and password which you just created.

after login you will see

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwz76ien5jpgdrutau2r.png)

click products and then click add.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4tnpc2ywo4btp2ksb5tu.png)
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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/akq6k71mplbbufxm8ew2.png)

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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mv7znzys17v5zl33lc8w.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hwouvk5ww4d9elivtwzt.png)


- I will use [GetX ](https://pub.dev/packages/get)state management to manage your data in more efficient way.

- I also used [flutter_staggered_grid_view ](https://pub.dev/packages/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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/715y7qw2a1ns7rnayqbt.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7xcjlkqg58agykf67yvf.png)


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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lgrui6bs3tnu9mvioeog.png)

- in product_controller.dart we make the getx controller


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/492n1qmododnld03kh6r.png)

- we are almost done. fork the github project to learn more with the code.

- after this run the flutter project from your ide or cmd.

- make sure to run your django server

the app should run properly and the final output is kind of this


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vo0l8jtbg9k69xl7v98r.png)

Thanks for reading the blog. I hope you learned something.
give a like and share with your friends!