Flutter signup/login application with Django backend #1
django tutorial flutter django-rest-framework login

April 16, 2020, 12:42 a.m.

Flutter signup/login application with Django backend #1



This series of posts intends to develop a flutter signup/login app working with API calls to Django backend. The idea is to use the DRF to create APIs which can be called by the flutter application. Most of the tutorials I have seen only talk about doing it with Firebase. Since we already will be using PostgreSQL for the Django, let us use that as our server DB and using SQLite with the Flutter Application to store just the Auth token and Username.

Django Rest Framework

We assume people reading this post already know about it but still just an introduction: - DRF allows for making powerful and flexible Web APIs. - DRF provides a lot of authentication schemes out of the box and even allows us to implement custom schemes. - DRF provides an easy way to serialize and deserialize JSON according to your DB Schema. (Model Serializers)


Google Flutter is just awesome when it comes to cross-platform app development. The fact that it doesn't convert your code to machine compatible but instead is capable of directly rendering it on the machine is the best.

BloC design pattern

We will use BloC (Business Logic Component) which was announced by Google in GOOGLE I/O' 18. BloC is simply a state management pattern that works on sinks and streams. The widgets monitor the state changes and send them to the BloC using sinks and other widgets monitor those by subscribing to those streams where they expect the relevant data to arrive. The required sections are rebuilt per the state change. Thus Bloc stands in between data and UI and asynchronously maps events to states which rebuild the UI when required.

Let us Start

We will start by creating a new Django project to provide the required APIs for Login and Signup. Go to your desired folder and activate your virtual environment. (You can refer here for the same)

Step 1

  • Create the project by:
django-admin startproject HOME

Note that the project is named HOME, you can name it anything just be consistent in all the places where we use the names in the commands/code that follows. - cd into the project directory and create an app called api by:

python manage.py startapp api

We will use the auth system that Django provides by default. The User model has almost all the required fields that we may need for the Login and Signup. In case you need extra fields like phone number, address, etc. you can always define a new profile model that will have a one to one relationship with the User model. But for the sake of simplicity here, we are going to go with the User model itself. We have the fields first_name, last_name, username, email, and password which we can use to create a new user.

Step 2

  • Install DRF by
pip install djangorestframework
  • and also add it to your installed apps
  • There are many auth systems available but I am going to go with Token Auth. We need to add that too in our installed apps:
  • We also need to add the following in our settings for us to be able to use the token auth:
  • Migrate your changes by:
python manage.py migrate

Run it from HOME/

Step 3

Now that we are all set up and we have the default User model ready for us, we need to start creating our API - Create a file named serializers.py in HOME/api/ and the following code to it:

from django.contrib.auth.models import User
from rest_framework import serializers
from rest_framework.validators import UniqueTogetherValidator

class UserSerializer(serializers.ModelSerializer):

    def create(self, validated_data):
        user = User.objects.create_user(**validated_data)
        return user

    class Meta:
        model = User
        fields = (
        validators = [
                fields=['username', 'email']

What we did here is we created a serializer in order to map JSON to our model and vice-versa. The unique together validator will allow us to verify that the combination of username and email is unique for any particular user. - edit your HOME/api/views.py and add the following code to it:

from .serializers import UserSerializer
from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework import status
from rest_framework.permissions import IsAdminUser
from django.contrib.auth.models import User

class UserRecordView(APIView):
    API View to create or get a list of all the registered
    users. GET request returns the registered users whereas
    a POST request allows to create a new user.
    permission_classes = [IsAdminUser]

    def get(self, format=None):
        users = User.objects.all()
        serializer = UserSerializer(users, many=True)
        return Response(serializer.data)

    def post(self, request):
        serializer = UserSerializer(data=request.data)
        if serializer.is_valid(raise_exception=ValueError):
            return Response(
        return Response(
                "error": True,
                "error_msg": serializer.error_messages,

What we are doing here is creating a get and a post method, the get method allows us to get a list of all the registered users with our application and the post method allows us to create a new user with the required info as specified in our serializer. Also, I added IsAdminUser as the permission class, the reason is that we do not want anyone to spam our server by sending multiple POST requests and creating unnecessary accounts. - Last but not least we will add routes for access to the application. let us create the file HOME/api/urls.py and add the following code to it:

from django.urls import path
from .views import UserRecordView

app_name = 'api'
urlpatterns = [
    path('user/', UserRecordView.as_view(), name='users'),
  • We need to include the route for this and the token system in our main urls i.e. edit the file HOME/urls.py and add the following code to it:
from django.contrib import admin
from django.urls import path, include
from rest_framework.authtoken import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('api.urls', namespace='api')),
    path('api-token-auth/', views.obtain_auth_token, name='api-token-auth'),
  • We would need to create an admin user by:
python manage.py createsuperuser

Now enter the details asked and use them below.

Accessing our API

Thus, we have successfully created the required endpoint for the API. We can now test it by the following:

Get authentication token

  • Endpoint: http://localhost:8000/api-token-auth/
  • Parameters required : username, password
  • Sample body: json { "username": "admin", "password": "password" }

Get / Post user

  • Endpoint : http://localhost/api/user/
  • GET
  • parameters: auth token as header
  • sample header: json { "Authorization": "TOKEN <token>" }
  • sample response: json { "username": "<username>", "first_name": "<first_name>", "last_name": "<last_name>", "email": "<email>", "password": "<encrypted string>" }
  • POST
  • parameters:
    • header: auth token as header
    • sample: json { "Authorization" : "TOKEN <token>" }
    • body: username, email, first_name, last_name, password
    • sample: json { "username": "<username>", "first_name": "<first_name>", "last_name": "<last_name>", "email": "<email>", "password": "<encrypted string>" }
  • response (on succesful): json { "username": "<username>", "first_name": "<first_name>", "last_name": "<last_name>", "email": "<email>", "password": "<encrypted string>" } I will continue the project and write posts for each part. The end result will be a flutter app working with this API and SQLite DB.

Next: Flutter signup/login application with Django backend #2

Final Post: Flutter signup/login application with Django backend #3

Share this article:


  • Pranjal Kanel
    Oct. 8, 2020, 9:06 p.m.

    Very helpful! Thank you

  • Sandy
    Oct. 19, 2020, 4:17 a.m.

    Beautiful article. I really wanted to skip to #3 as that is something new but to read it in a series makes it very smooth reading. Well written Also, like to know your comments about FLUTTER User authentication using Google FireStore - whether that is preferable to Django -DRF - User authentication - especially in terms of speed and any other issues you can think of Thanks

  • TecihnHet
    Sept. 19, 2021, 6:25 p.m.

    <a href=https://технографика.СЂС„/catalog/oborudovanie/rezhushchie_plottery/>режущий плоттер</a> Tegs: фрезерно гравировальный станок https://технографика.СЂС„/catalog/oborudovanie/frezerno_gravirovalnye_stanki_s_chpu/ <u>уф принтер</u> <i>плоттеры</i> <b>широкоформатный принтер</b>

  • what's the difference between motrin and advil
    Oct. 10, 2021, 11:34 a.m.

    chemical names for ibuprofen <a href="https://ibuprofenusca.com/">https://ibuprofenusca.com/</a>

  • DscissHet
    June 30, 2021, 6:46 a.m.

    <a href=https://www.dizayn-studio.ru/>дизайн проект квартиры</a> Tegs: дизайн проект https://www.dizayn-studio.ru/ <u>интерьер дома</u> <i>дизайн студия москва</i> <b>студия дизайна москва</b>

  • Sicfpdrags
    July 12, 2021, 3:56 a.m.

    <a href=https://signprint24.ru/>уф печать а3</a> Tegs: уф печать балашиха https://signprint24.ru/ <u>уф печать листовая</u> <i>уф печать логотипа</i> <b>уф печать магниты</b>

  • Oduvan4ikreug
    July 12, 2021, 1:31 p.m.

    Error 523 <a href=https://support.cloudflare.com/hc/en-us/articles/115003011431-Troubleshooting-Cloudflare-5XX-errors#523error>origin is unreachable</a>

  • DscissHet
    July 22, 2021, 2:11 a.m.

    <a href=https://www.dizayn-studio.ru/>дизайн интерьера квартир</a> Tegs: дизайн интерьера квартиры https://www.dizayn-studio.ru/ <u>дизайн интерьера квартир стоимость</u> <i>дизайн проект квартиры москва</i> <b>дизайн квартир</b>

  • Sdvillgob
    Aug. 8, 2021, 2:19 p.m.

    <a href=https://chimmed.ru/>exmbio.com</a> Tegs: expression systems, llc https://chimmed.ru/ <u>ubiqbio</u> <i>ubiqbio com</i> <b>ubiqbio.com</b>

  • WtcissHet
    Aug. 17, 2021, 6:52 a.m.

    <a href=https://wtlan.ru/catalog/SHkafyWT/>шкаф напольный 19 22u hyperline ttb-2268-as-ral9004</a> Tegs: серверный шкаф 19 напольный https://wtlan.ru/catalog/SHkafyWT/Napolnyeshkafy/ <u>шкаф телекоммуникационный 19 напольный 42u</u> <i>19 дюймовый шкаф для оборудования</i> <b>телекоммуникационный шкаф 19 42u</b>

  • Hdcffdrags
    Aug. 17, 2021, 6:53 a.m.

    <a href=https://pomestie-park.com/bankety/svadba/>свадебный банкет в ресторане в москве</a> Tegs: свадебный банкет цена https://pomestie-park.com/bankety/svadba/ <u>банкет на свадьбу недорого в москве</u> <i>банкет на свадьбу цена</i> <b>банкеты в москве</b>

  • Sdvillgob
    Aug. 21, 2021, 1:14 p.m.

    <a href=https://chimmed.ru/manufactors/catalog?name=Dr.+Maisch+HPLC>Dr Maisch HPLC</a> Tegs: Dr. Ehrenstorfer https://chimmed.ru/manufactors/catalog?name=Dr.+Ehrenstorfer <u>inorganicventures com</u> <i>inorganicventures.com</i> <b>integrated dna technologies germany gmbh</b>

  • WtcissHet
    Sept. 9, 2021, 1:28 a.m.

    <a href=https://wtlan.ru/catalog/SHkafyWT/>шкаф настенный 19 9u цмо шрн-м-9.500</a> Tegs: шкаф телекоммуникационный 19u патч панели кросс панели hyperline https://wtlan.ru/catalog/SHkafyWT/ <u>шкаф 19u настенный</u> <i>шкаф телекоммуникационный 19 дюймов 15u</i> <b>шкаф 19 напольный 12u</b>

  • Sdvillgob
    Sept. 12, 2021, 10:09 p.m.

    <a href=https://chimmed.ru/>twistdx.co.uk</a> Tegs: ubiq bio bv https://chimmed.ru/ <u>werner minden</u> <i>werner-minden de</i> <b>werner-minden.de</b>

  • ViciseHet
    Sept. 13, 2021, 6:33 a.m.

    <a href=https://videnie.org/services/love-magic/>любовная магия</a> Tegs: обучение астральной магии https://videnie.org/study/astral-magik/ <u>обучение астральной магии</u> <i>обучение биоэнергетике</i> <b>обучение биоэнергетике в москве</b>

  • GtcismHet
    Sept. 17, 2021, 1:21 p.m.

    <a href=https://gmclinica.ru/uslugi/stomatologiya/implantaciya/>протезирование зубов имплантация</a> Tegs: процедура лазерной эпиляции https://gmclinica.ru/uslugi/lazernaya-epilyaciya/zhenskaya-lazernaya-epilyaciya/ <u>узи сердца в москве</u> <i>узи сердца платно</i> <b>узи сосудов москва</b>

  • ErcomtHet
    Sept. 17, 2021, 7:50 p.m.

    <a href=https://www.remontstroyka.ru/remont-odnokomnatnoy-kvartiry.php>ремонт однокомнатной квартиры под ключ</a> Tegs: ремонт 1-комнатной квартиры https://www.remontstroyka.ru/remont-odnokomnatnoy-kvartiry.php <u>ремонт квартир в новостройке</u> <i>ремонт квартир под ключ в новостройке</i> <b>комплексный ремонт квартир</b>

  • WtcissHet
    Sept. 27, 2021, 7:43 p.m.

    <a href=https://wtlan.ru/catalog/SHkafyWT/Nastennyeshkafy/12U/1941/>серверный шкаф 19 дюймов 6u</a> Tegs: серверный шкаф 19 дюймов купить https://wtlan.ru/catalog/SHkafyWT/ <u>шкаф 19 напольный 25u чёрный b256080bwt</u> <i>шкаф 19 напольный 42u</i> <b>шкаф 19 напольный пылевлагозащищенный 42u 600 1000 дверь со стеклом черный</b>

  • Sicfpdrags
    Sept. 28, 2021, 11:57 p.m.

    <a href=https://signprint24.ru/>прямая печать на пластике</a> Tegs: прямая уф печать https://signprint24.ru/ <u>уф печать на картах</u> <i>уф печать на картоне</i> <b>уф печать на любой поверхности</b>

  • Sdvillgob
    Oct. 5, 2021, 5:01 p.m.

    <a href=https://chimmed.ru/>phytoplan de </a> Tegs: phytoplan diehm & neuberger gmbh https://chimmed.ru/ <u>clariant international ag </u> <i>clariant.com </i> <b>clearsynth </b>

  • OifiszHet
    Oct. 6, 2021, 8:07 a.m.

    <a href=https://office-dedamoroza.ru/catalog/novogodnie_podarki/podarki_dlya_sadov_i_shkol/>новогодние подарки в сад</a> Tegs: новогодние подарки в школу https://office-dedamoroza.ru/catalog/novogodnie_podarki/podarki_dlya_sadov_i_shkol/ <u>сладкие новогодние подарки</u> <i>сладкие новогодние подарки оптом</i> <b>упаковка для новогодних подарков</b>

  • iswvawefilo
    Oct. 14, 2021, 10:19 p.m.

    <a href=http://slkjfdf.net/>Exadoan</a> <a href="http://slkjfdf.net/">Eyoebot</a> pui.thot.ohuru.tech.uib.co http://slkjfdf.net/

  • udasegifuxeyo
    Oct. 14, 2021, 10:28 p.m.

    <a href=http://slkjfdf.net/>Eoxucuone</a> <a href="http://slkjfdf.net/">Ikedunh</a> lvp.vcsq.ohuru.tech.teb.ka http://slkjfdf.net/

  • TBcassHet
    Oct. 16, 2021, 1:26 a.m.

    <a href=https://www.tc-bus.ru/yutong>ютонг</a> Tegs: yutong https://www.tc-bus.ru/yutong <u>автобусы цена</u> <i>вектор некст</i> <b>вектор некст автобус цена</b>

  • https://_ЗАБЕРИТЕ_СВОЙ_ПРИЗ_165944.2684.я.рус/?9581
    Dec. 11, 2021, 2:16 a.m.


Leave a comment

Related articles

Flutter signup/login application with Django backend #3

Flutter signup/login application with Django backend #3

What this post is about In the previous two posts, we made an API in Django with the help of …

Read Story
Flutter signup/login application with Django backend #2

Flutter signup/login application with Django backend #2

Next steps This post is in continuation of the other post that written on the same topic. If you have …

Read Story
Converting any HTML template into a Django template

Converting any HTML template into a Django template

Djangify A Python script developed by Ohuru that converts HTML Files / Templates to Django compatible HTML Templates. This post …

Read Story

Stay right up to date

Get great content to your inbox every week. No spam.
Only great content, we don’t share your email with third parties.