Django Rest API x Flutter

Showmik — Tue, 26 Jul 2022 18:13:33 +0000

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.

in product_controller.dart we make the getx controller

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

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

The 'else' Keyword in "for" loop

Showmik — Tue, 27 Jul 2021 07:29:00 +0000

So , many of you don't know that there is a 'else' statement in for loop basically in python.
I know python is a amazing programming language and it has some amazing features too. So, today we will be learning about the 'else' keyword

sometime you would have to search a friend name from a list of dictionary, like:

so at this point we can use a FOR loop for searching my friend

in this case we will use a user input.
So, now if user types friends name like: 'sadi'
it will search the whole dictionary

then it will print "friend found" in the console.

at this moment if the user type a wrong name which is not in the list of dictionary like,

enter your friends name: 'showmik'
it will give you nothing in the console.
so in this case we can use the else keyword.
so, if we write the code like this,

this time if the user type wrong name which is not in the list. it will print 'friend not found' in the terminal

But there is a problem using else keyword!
and that is,

now if the user type correct write name which matches the list, it will output something like this,

because the 'else' will be run after the loop ends. that's why it is printing the statement what the 'else' provide.
i.e, 'friend not found'

in this case we can use 'break' statement after the loop ends. it will false the else keyword
like,

in this time after user type the correct name , the only thing will be print is 'Friend found'
for the 'break' statement the 'else' keyword will not be printed.

source: Tofayel

Forem: Showmik

Django Rest API x Flutter

Flutter app

The 'else' Keyword in "for" loop