Sitemap

Flutter application using CMS

3 min readSep 1, 2022

--

FLUTTER + FLUSMIC/ PRISMIC

A prismic.io integration for Dart and Flutter. Flusmic is a package that let integrate the Prismic.io API into any Dart or Flutter project.

There are many options to include rich content into an app but only a few can be really versatile. Prismic.io is a really amazing tool, letting us create complex but powerful structures to render as widgets in our apps also with functions like: multi-language support, document history, dynamic fields.

Press enter or click to view image in full size
  • Prismic is a headless CMS — a CMS with an API — is an alternative to an “old school” CMS, like WordPress or Drupal
  • It’s used by developers and marketers who run websites or apps — and other people who make stuff for the internet
  • Read on to find out: what’s good about headless, how is it different, who should care, why, and what’s the best headless CMS

USE of PRISMIC/FLUSMIC. makes things easier.

  1. Developers build reusable website sections, aka Slices.

Choose your favourite framework and build Slices (like a hero section or other components to ship to our page builder interface).

2. Marketers mix and match Slices to create strategic content.

Take action on your best ideas by assembling pre-built Slices into branded pages as fast as you can imagine them.

3. Your content delivered from our API = a blazingly fast website.

Captivate users with great experiences when your content connects to your website’s code through our API.

FOR MORE DETAILS: https://prismic.io/

Press enter or click to view image in full size

Flusmic 3.2.3 released

1. Install the latest Version

Get Kirti K’s stories in your inbox

Join Medium for free to get updates from this writer.

dependencies:
flusmic: ^3.2.3 /// latest version

run flutter pub get // if some new version comes up

2. Create an instance of Flusmic:

Create this instance in main.dart

final flusmic = Flusmic(prismicEndpoint: ‘yourendpoint’);

import 'package:flusmic/flusmic.dart';

3. Handling the response

All the responses (except for the API) returns a FlusmicResponse object containing a list of Documents in results params.

FlusmicResponse response = await flusmic.getRootDocument();

response.results //List of `Documents`

Every document have a data property which is a Map<String, json> representing a pure json.

FlusmicResponse response = await flusmic.getRootDocument();

final firstResult = response.results.first;
firstResult.data //json object as `Map<String, dynamic>`
final response = await flusmic.query(
[Predicate.at(DefaultPredicatePath.type, 'TestTAG')],
);

CUSTOM DATA HANDLING : https://github.com/PixelaGt/flusmic/wiki/Custom-data

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 ft;
​
final ft.Flusmic flusmic =
ft.Flusmic(prismicEndpoint: '');

FOR MORE DETAILS : https://pub.dev/packages/flusmic

Happy Coding !

--

--