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://flutter.dev/docs/get-started/install
Working with Flusmic
We will work on this simple example:
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:
- If hasn’t loaded our result yet, it will show a progress indicator.
- 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.