flutter.py | Kings on both -end

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

flutter.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

Agenda

• Flutter & Flask-RESTful
• REST APIs
• 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.

🕸 REST API

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.

pieces.app

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.

pieces.app

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:

Model

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

pieces.app

data_provider.dart

Requesting the data from API in the data_provider layer.

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

pieces.app

repository.dart

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

pieces.app

state.dart

Handling different states here, generally we have:

• Loading state
• Success state
• Failure state

pieces.app

cubit.dart

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

pieces.app

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

pieces.app

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

pieces.app

• data.dart

pieces.app

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 💙