flutter.py | Kings on both -end

Muhammad Hamza
4 min readOct 8, 2022


If you are landing here then its one of the 2 cases, either you are familiar with the word “flutter” or with “.py


Today, we are going to integrate Flask-RESTful with Flutter as our frontend, taking example of a very simple API.

In short, the king of FRONTEND and the king of BACKEND ;p


  • Flutter & Flask-RESTful
  • Writing our first REST API
  • Integration in Flutter (BloC — Cubit)

🎨 Flutter & Flask-RESTful

Flutter is a UI toolkit to develop cross platform and performant apps, Highly flexible, developed by Google.

Flask-RESTful is an extension for Flask that adds support for quickly building REST APIs. Powered with python language.


It’s an application programming interface (API) based on REST architectural style i.e. it includes method like GET, POST, DELETE etc for sending and fetching the data. In short, all HTTP methods can be used when it comes to REST APIs.

🧑🏻‍💻 Writing our first REST API

So, we’ll be using flask-restful library and since powered by python. Hence, the first step will be installing the library and we all know pip is the manager that let you install various packages in python.

pip install flask-restful

Mac OS: if pip is not working for you and you’ve installed latest python version then pip3 will be your call, same goes for python to python3 keyword

We’ll start off with very simple as of now, creating a file app.py and writing a very simple hello world API response.


And run the command

python app.py

And open http://localhost:8080

Using extension JSON Viewer for this look

A little deeper

Now, let’s make this API response a little complex for showcasing on our flutter end.


And now when you open the localhost its going to look something like this:

List with words

💻 Integration in Flutter

I’m going to use flutter_bloc to handle the REST APIs, followed with cubits and states. So, the project structure is going to be like:


Starting with a very simple model class that holds just a List<String>



Requesting the data from API in the data_provider layer.

You may use dio here as well, which is my preference.



Nothing much, just passing on the data from API to the cubits



Handling different states here, generally we have:

  • Loading state
  • Success state
  • Failure state


And lastly, emitting states based on if we have the data or not.


Now let’s handle the front end part, using BlocBuilder so the final part will be something like this:


And …… 🥁🥁🥁

Data from flask API

🔥 Complexity++

Just for the sake of more understanding, I’ll make our API response a bit more complex and then change the data.dart model class accordingly to fill up the UI.

  • API response
  • data.dart

And the final look on our UI will be something like:

And that’s it FOLKS! Hope you’ve learned something today and I’m sure a genius might read this article and come up with an actually dart package named flutter.py that handles all the fuss with ease!

And I’m waiting who that might be! 😃

An over all conclusion is that people always ask questions like “What kind of backend we can use with flutter?”, “Can we use python as backend?”, “Can we use node.js?” and so on. So, the answer is flutter is just a UI toolkit and it means you can attach anything in the backend. In our case we used flask-restful for this purpose, you may use django, node.js or any of your favourite backend.

So, keep exploring and keep creating awesome stuff!

Thanks y’all and #happyfluttering 💙