Flutter CMS

Powerful CMS. Zero headache.

Drop our API-based CMS into your Flutter app in minutes.

ButterCMS provides a CMS and content API for Flutter apps. Use ButterCMS with Flutter to enable dynamic content in your apps for page content, blogs, and more.

Try ButterCMS Free
Above is quick video of integrating Butter's Pages API into an application.

“Best CMS on the market”

Butter's API slides right into our apps and lets us avoid having yet another WordPress site. Daniel, Founder Of Collective Idea

Marketers love Butter

  • SEO Landing Pages
  • Customer Case Studies
  • Company News & Updates
  • Events + Webinar Pages
  • Education Center
  • Location Pages
  • and more...
Try ButterCMS Free

Butter saves you development time

Save thousands of dollars worth of development time with our easy setup.

Integrating Butter into our application took less than an hour and most of that time was spent on design work. Luke Brean, Legally
Try It Free

Everything you need

  • Custom Page Types
  • Customer Case Studies
  • Custom Content Modeling
  • CDN for assets
  • Testing environment
  • Location Pages
  • Webhooks
Try ButterCMS Free
Beautiful admin interface

Easy to use. Easy to customize.

Integrates with Flutter

Our CMS has a simple content API and drop-in Dart SDK.

Butter requires zero maintenance

Never worry about security upgrades, hosting, or performance.

Setup in minutes

Integrating Butter into your Flutter app is dead simple. Here's a mini tutorial to get a feel for adding marketing pages to your app. You can also use our Collections to do advanced content modeling. For full a integration guide check out our Official Guide

Try ButterCMS Free
Above is quick video of integrating Butter's Pages API into an application.
Integrate into your application

First you would set up a new Customer Case Study page type in Butter and create a page. With your page defined, the ButterCMS API will return it in JSON format like this:

{
  "data": {
    "slug": "homepage",
    "page_type": null,
    "fields": {
      "seo_title": "Anvils and Dynamite | Acme Co",
      "headline": "Acme Co provides supplies to your favorite cartoon heroes.",
      "hero_image": "https://cdn.buttercms.com/c8oSTGcwQDC5I58km5WV",
      "call_to_action": "Buy Now",
      "customer_logos": [
        {
          "logo_image": "https://cdn.buttercms.com/c8oSTGcwQDC5I58km5WV"
        },
        {
          "logo_image": "https://cdn.buttercms.com/c8oSTGcwQDC5I58km5WV"
        }
      ]
    }
  }
}

To create these pages in our app, create the home_page.dart file:

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:buttercms_dart/buttercms_dart.dart';

class HomePage extends StatefulWidget {
 @override
 _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State {
 Butter butter = Butter("YOUR_API_KEY");

 Map jsonMap;

 @override
 void initState() {
   super.initState();
   butter.page.retrieve("*", "homepage").then((response) {
     setState(() {
       // First fetch the json response,then decode into a map
       jsonMap = json.decode(response.body);
     });
   });
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text("Home Page"),
     ),
     body: jsonMap == null ? _buildLoadingScreen() : _buildBody(),
   );
 }

 Widget _buildLoadingScreen() {
   return Center(
     child: CircularProgressIndicator(),
   );
 }

 Widget _buildBody() {
   return ListView(
     children: [
       Padding(
         padding: const EdgeInsets.all(8.0),
         child: Text(jsonMap["fields"]["seo_title"]),
       ),
       Padding(
         padding: const EdgeInsets.all(8.0),
         child: Text(jsonMap["fields"]["headline"]),
       ),
       Padding(
         padding: const EdgeInsets.all(8.0),
         child: Image.network(jsonMap["fields"]["hero_image"]),
       ),
       Padding(
         padding: const EdgeInsets.all(8.0),
         child: FlatButton(
           onPressed: () {},
           child: Text(
             jsonMap["fields"]["call_to_action"],
           ),
         ),
       ),
       Padding(
         padding: const EdgeInsets.all(8.0),
         child: Text("Customers love us!"),
       ),
       ...jsonMap["customer_logos"]
           .map((logo) => Image.network(logo["logo_image"]))
           .toList(),
     ],
   );
 }
}
Setup the page to list all pages

The plugin also allows us to retrieve multiple pages using list() instead of retrieve().

We will try to list multiple client pages as:

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:buttercms_dart/buttercms_dart.dart';

class PagesListScreen extends StatefulWidget {
 @override
 _PagesListScreenState createState() => _PagesListScreenState();
}

class _PagesListScreenState extends State {
 Butter butter = Butter("YOUR_API_KEY");

 Map jsonMap;

 @override
 void initState() {
   super.initState();
   butter.page.list("customer_case_study").then((response) {
     setState(() {
       // First fetch the json response,then decode into a map
       jsonMap = json.decode(response.body);
     });
   });
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text("Pages"),
     ),
     body: jsonMap == null ? _buildLoadingScreen() : _buildBody(),
   );
 }

 Widget _buildLoadingScreen() {
   return Center(
     child: CircularProgressIndicator(),
   );
 }

 Widget _buildBody() {
   List pages = jsonMap["data"];

   return ListView.builder(
     itemBuilder: (context, position) {
       return ListTile(
         title: Text(pages[position]["fields"]["headline"]),
         leading: Image.network(
           pages[position]["fields"]["customer_logo"],
           width: 40.0,
           height: 40.0,
         ),
       );
     },
     itemCount: pages.length,
   );
 }
}

That's it! If you browse to your homepage you'll see your homepage populated with the content you created in Butter.

Try ButterCMS Free

About ButterCMS

ButterCMS is an API-based, or "headless", CMS. We're a hosted service and we maintain all of the infrastructure. For more information on how we compare to a traditional CMS check out API-based CMS vs Traditional CMS.

What kind of database can I use?

No database required! We're a SaaS CMS or CaaS. You simply call our Content API from your app. We host and maintain all of the CMS infrastructure.

Do you host my templates?

Unlike CMS's you might be used to, we don't control or host any of your templates. The design of your app (HTML + CSS) lives in your application along side the rest of your app. Your application calls our Content API and we return your content in JSON format. You can then render this content in any way you'd like.

Can I import my content?

Yep. To import existing content from another platform, simply send us an email.

How do you compare to Wordpress?

In short, we offer all the same easy-to-use editing capabilities of Wordpress but are significantly easier for developers to setup and maintain. This means you spend less time working on your CMS and more time focusing on things important to your business.

Can I self host Butter?

No, we're a SaaS CMS or CaaS. You simply call our Content API from your app. We host and maintain all of the CMS infrastructure.

More questions? We're happy to help.
Chat With Us

Headless CMS for these technologies and more

Ruby, Rails, Node.js, Python, ASP.NET, Flask, Django, Go, PHP, Laravel, Angular, React, Elixir, Phoenix, Meteor, Vue.js, Heroku, Gatsby.js, Pelican, Next.js, Express.js, Flutter, Gridsome, Java, Spring, React Native, Ionic, Nuxt.js

Try Butter free for 30-days

Try ButterCMS in your Flutter app