Manage your app content with Flutter and Prismic.io

There are many ways to provide content for our apps and websites, some of these tools like a Custom API, a Firebase backend, or our own CMS, allow us to manage content in very diverse ways.

One of the most popular CMS types right now, are headless CMS. For those of you who don’t know what a headless CMS is, It is a content management service that can be acceded through an API or SDK. One of its primary functions is to store and provide easy access to our content for any interface that wants to consume that information. It is commonly used to create unified information platforms. From a single place, you can provide content that will be used by a website or mobile app.

Prismic.io is one of those headless CMS but not just one of the bunch. Prismic.io is a really advantaged platform, with functions like: multi-language support, document history, dynamic fields, a great community and many more.

Is a platform to create beautiful and native applications using the same base code. Flutter has positioned itself as a must-to-use platform today, to create applications (mobile, desktop and web) in record time.

We will build a simple app to show the content of a simple document from Prismic.io. For practice purposes, we will use an already created Flusmic repository, but it will work with any other repository.

First step: create a account in Prismic.io. Also, we need to setup all the necessary tools to work with Flutter. Here are some useful tools to get started.

We will work on this simple example:

So, first, let’s start with a new Flutter project:

Now, let’s add Flusmic to dependencies:

Then, update packages and we will be ready to start:

Now if you run the project you will see the classic example app:

We can replace everything in our main.dart since we will not use what's inside.

Now, we will create our entry widget.

As you might notice, this widget has a HomePage which is where we are going to work. Let’s create it

It’s time to start wit Flusmic. There are 2 ways to work with it, in this first guide we will use the main Flusmic class which is the one that make all the necessary requests. In further articles we will explore how to work with widgets directly.

For now, we’ll create a new Flusmic object instance in our HomePageState

Also, let’s include a Result object to store our data.

Now, we’ll focus on build what we will see. It will have two parts:

For that, we will use our result object and check its nullability. If it's null, means that the result hasn't loaded yet.

result.results.first.data is a json with our document data.

Ok, now that we are almost ready, the only remaining thing is to make our request. For this example, we will use the root document of the repository, calling getRootDocument().

Let’s create a new method which will get the result and save it in our result variable:

And then we will call it in our initState method to execute on start.

The final code looks like this:

And the result:

A little clarification: If you see an error related with Text class, it's because Flusmic has a Text class that might cause conflicts with Flutter Text widget. For that, there are 2 solutions:

If you don’t want to use Text class from Flusmic, you can hide it:

If you do want to use it, you can rename Flusmic dependency:

That’s it for today, we will be covering more about how to work with Flusmic, the possibilities of the Prismic.io + Flutter combo and some tips and ways to integrate Flusmic with other amazing packages like Bloc and Provider.

See you around.

Related posts:

It is no secret that APIs are instrumental for enterprises to innovate and transform at a staggering rate. Firms have invested in automating their development and deployment pipeline to deliver…

How do we come to believe in a Worldview? What is it that forms our Worldview? This article explains how we all come to form a Worldview, whether we are aware of it or not. Every human being…

Former gaming entrepreneur and Chinese billionaire Chen Tianqiao has started a new path in life after the stress of the high-tech lifestyle caused him to suffer from severe anxiety and depression…