🌟 Help others discover us, star our GitHub repo! 🌟

Integrate Flutter with Webiny Headless CMS

Speed up your mobile development workflow by using Webiny Headless CMS as a content store for Flutter.

Why Flutter?

Flutter is an open source framework from Google that allows developers to build, test and deploy beautiful mobile, web, desktop and embedded apps from a single codebase. Leveraging Webiny Headless CMS as a database and GraphQL API allows you to persist data for use in your Flutter application.

Stylized Flutter logo

Why Webiny?

Webiny Headless CMS contains everything an enterprise needs to build, manage and deliver content at scale.

Webiny doesn't just manage your content, it also allows you to manage all of your projects centrally using built-in internationalization and multi-site features, and use advanced processes that support organization-wide collaboration.

Stylized Webiny logo

Flutter + Webiny integration

Flutter transforms the app development process. Build, test, and deploy beautiful mobile, web, desktop, and embedded apps from a single codebase. Combine that with the benefits of Serverless architecture with Webiny to ensure your content is available everywhere, to everyone, all of the time.

Flutter Benefits

  • Compiles to ARM or Intel machine code as well as JavaScript for fast performance on any device
  • Deploy from a single codebase to multiple environments including mobile phones, web and embedded devices.
  • Includes automated testing, developer tooling and other features

Webiny Headless CMS Benefits

  • Keep your data in your cloud, under your own security perimeter
  • Unlock greater performance by storing and delivering content closer to your users
  • Webiny runs on highly-scalable fault-tolerant serverless services that scale in and out in seconds
  • Marketing teams have full control to create and manage content, landing pages, files, and forms across multiple web properties
  • Webiny is open source, released under an MIT license, and architected for extensibility

Building a Frontend With Flutter

Learn how to build a frontend for Webiny Headless CMS using React.

Step 1

Install and Deploy Webiny

Skip this step if you already have Webiny installed and deployed. Be sure to check out the prerequisites for installing Webiny on your local machine.

Then, create a new Webiny project by running the following command. If you get stuck or for more details, please see our documentation.

npx create-webiny-project my-webiny-project
Copy
Step 2

Create a new Flutter site

First, download and install Flutter, then run the following command to initialize a new application.

Visit the Flutter docs site for more information.

flutter create my-app
Copy
Step 3

Add and Configure GraphQL

Add the Flutter wrapper for graphql/client.dart and follow the instructions in the docs to configure it to connect to Webiny's GraphQL API using your API Token.

Webiny API instructions →

flutter pub add graphql_flutter
Copy

Check out these tutorials on using
Webiny + Flutter on our blog

featured post

Build a ToDo App with Flutter and Webiny Headless CMS

Flutter is a multi-platform development toolkit. We will build a ToDo application with Flutter and Webiny Headless CMS.

Joseph Chege
Joseph Chege

Other Integrations

Webiny also supports other frontend technologies.

Gatsby logo

Gatsby

Gatsby integrates different content, APIs and services seamlessly into one experience.

Discover more →
Gatsby logo

Next.js

Next.js is a React framework that lets you build hybrid static and server rendered applications.

Discover more →
Gatsby logo

React

A declarative, component-based JavaScript library for building user interfaces.

Discover more →
Vue logo

Vue.js

Vue.js is an approachable, performant and versatile framework for building web user interfaces.

Discover more →
By using this website you agree to our privacy policy
Webiny Chat

Find us on Slack

Webiny Community Slack