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

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.

More about Prismic.io here

Flutter

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.

More about Flutter here

Introducing: Flusmic

Now, Is it a good idea to use this two together? Of course! We can build really beauty and simple apps with a lot of content at our disposal. The Pixela team has been working really hard to make such integration easier and we’re glad to introduce our integration of Prismic.io for Flutter.

What will we build?

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.

¿How do I start?

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.

https://prismic.io/signup

https://flutter.dev/docs/get-started/install

Working with Flusmic

We will work on this simple example:

Flusmic quicksample

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

flutter create flusmic_quickstart

Now, let’s add Flusmic to dependencies:

dependencies:
  flutter:
    sdk: flutter
  flusmic: ^1.1.0

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

flutter pub get

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.

void main() => runApp(FlusmicQuickstartApp());
​
class FlusmicQuickstartApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: 'Flusmic Quickstart Sample', home: HomePage());
  }
}

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

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
​
class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

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

final Flusmic flusmic =
      Flusmic(prismicEndpoint: 'https://flusmic.cdn.prismic.io/api/v2');

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

Result result;

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

1. If hasn’t loaded our result yet, it will show a progress indicator.
2. If loaded, it will show a simple text in the center of the screen with the first result of our request.

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

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flusmic sample')),
      body: result != null
          ? Center(child: Text(result.results.first.data.toString()))
          : Center(child: CircularProgressIndicator()),
    );
  }

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:

void getResult() async {
  final root = await flusmic.getRootDocument();
  setState(() => result = root);
}

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

@override
void initState() {
  super.initState();
  getResult();
}

The final code looks like this:

import 'package:flusmic/flusmic.dart' hide Text;
import 'package:flutter/material.dart';
​
void main() => runApp(FlusmicQuickstartApp());
​
class FlusmicQuickstartApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: 'Flusmic Quickstart Sample', home: HomePage());
  }
}
​
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
​
class _HomePageState extends State<HomePage> {
  final Flusmic flusmic =
      Flusmic(prismicEndpoint: 'https://flusmic.cdn.prismic.io/api/v2');
​
  Result result;
​
  @override
  void initState() {
    super.initState();
    getResult();
  }
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flusmic sample')),
      body: result != null
          ? Center(child: Text(result.results.first.data.toString()))
          : Center(child: CircularProgressIndicator()),
    );
  }
​
  void getResult() async {
    final root = await flusmic.getRootDocument();
    setState(() => result = root);
  }
}

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:

import 'package:flusmic/flusmic.dart' hide Text;

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

import 'package:flusmic/flusmic.dart' as fl;
​
final fl.Flusmic flusmic =
    fl.Flusmic(prismicEndpoint: '');

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.

You can find the source code of all of our articles here.

See you around.