Back to integrations

Integrate Flutter with Strapi

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

tweet selection

These integration guides are not official documentation and the Strapi Support Team will not provide assistance with them.

What is Strapi?

Strapi is the leading open-source headless CMS offering features, like customizable APIs, role-based permissions, multilingual support, etc. It simplifies content management and integrates effortlessly with modern frontend frameworks.

Explore the Strapi documentation for more details.

What is Flutter?

Flutter is an open source Google's UI toolkit framework for building beautiful, natively compiled, multi-platform applications from a single codebase.

Visit the Flutter documentation for more.

Strapi and FLutter Integration

The out-of-the-box Strapi features allow you to get up and running in no time: 1. Single types: Create one-off pages that have a unique content structure 2. Customizable API: With Strapi, you can just hop in your code editor and edit the code to fit your API to your needs. 3. Integrations: Strapi supports integrations with Cloudinary, SendGrid, Algolia, and others. 4. Editor interface: The editor allows you to pull in dynamic blocks of content. 5. Authentication: Secure and authorize access to your API with JWT or providers. 6. RBAC: Help maximize operational efficiency, reduce dev team support work, and safeguard against unauthorized access or configuration modifications. 7. i18n: Manage content in multiple languages. Easily query the different locales through the API.

Learn more about Strapi features.

Setup Strapi 5 Headless CMS

We are going to start by setting up our Strapi 5 project with the following command:

🖐️ Note: make sure that you have created a new directory for your project.

You can find the full documentation for Strapi 5 here.

npx create-strapi-app@latest server

You will be asked to choose if you would like to use Strapi Cloud we will choose to skip for now.

 Strapi   v5.6.0 🚀 Let's create your new project

 
We can't find any auth credentials in your Strapi config.

Create a free account on Strapi Cloud and benefit from:

- ✦ Blazing-fast ✦ deployment for your projects
- ✦ Exclusive ✦ access to resources to make your project successful
- An ✦ Awesome ✦ community and full enjoyment of Strapi's ecosystem

Start your 14-day free trial now!


? Please log in or sign up. 
  Login/Sign up 
❯ Skip

After that, you will be asked how you would like to set up your project. We will choose the following options:

? Do you want to use the default database (sqlite) ? Yes
? Start with an example structure & data? Yes <-- make sure you say yes 
? Start with Typescript? Yes
? Install dependencies with npm? Yes
? Initialize a git repository? Yes

Once everything is set up and all the dependencies are installed, you can start your Strapi server with the following command:

cd server
npm run develop

You will be greeted with the Admin Create Account screen.

Go ahead and create your first Strapi user. All of this is local so you can use whatever you want.

Once you have created your user, you will be redirected to the Strapi Dashboard screen.

Publish Article Entries

Since we created our app with the example data, you should be able to navigate to your Article collection and see the data that was created for us.

Now, let's make sure that all of the data is published. If not, you can select all items via the checkbox and then click the Publish button.

Enable API Access

Once all your articles are published, we will expose our Strapi API for the Articles Collection. This can be done in Settings -> Users & Permissions plugin -> Roles -> Public -> Article.

You should have find and findOne selected. If not, go ahead and select them.

Test API

Now, if we make a GET request to http://localhost:1337/api/articles, we should see the following data for our articles.

🖐️ Note: that article covers (images) are not returned. This is because the REST API by default does not populate any relations, media fields, components, or dynamic zones.. Learn more about REST API: Population & Field Selection.

So let's get the article covers by using the populate=* parameter: http://localhost:1337/api/articles?populate=*

Nice, now that we have our Strapi 5 server setup, we can start to setup our Next.js application.

Getting Started With Flutter

It is recommended to use the create-next-app, which sets up everything automatically for you.

Prerequisites

Before you proceed, ensure you have the following:

Step 1: Create a New Flutter Project

Run the Flutter create command to create a new Flutter project. We will name the project my_flutter_app.

flutter create my_flutter_app

Step 2: Start Your Flutter Application

Run the command below to start your Flutter app, make sure to CD into your flutter project:

cd my_flutter_app
flutter run

This is what your app should look like:

Step 3: Install HTTP Package

In your project folder terminal, add the HTTP package to communicate with Strapi using the command below:

flutter pub add http

Next, head over to ./lib/main.dart file to continue the next steps.

Step 4: Import Packages and Define Constant

Imports Flutter's Material Design package (flutter/material.dart), HTTP package (http) and Dart's library for encoding and decoding JSON (dart:convert).

Also, define the Strapi API URL

1// Path: `./lib/main.dart`
2
3import 'package:flutter/material.dart';
4import 'package:http/http.dart' as http;
5import 'dart:convert';
6
7const String strapiUrl = 'http://localhost:1337';

Step 5: Create Entry Point - Main Function

Initialize your Flutter app with runApp(MyApp()) and set MyApp as the root widget of your application.

1// ...
2
3void main() {
4  runApp(MyApp());
5}

Step 6: Create Root Widget - MyApp

Set MaterialApp as the main container for your app. And ArticleScreen as the home screen.

1// ...
2
3class MyApp extends StatelessWidget {
4  @override
5  Widget build(BuildContext context) {
6    return MaterialApp(
7      home: ArticleScreen(),
8    );
9  }
10}

Step 7: Create Stateful Widget - ArticleScreen

Create ArticleScreen stateful widget which will manage the state in _ArticleScreenState.

1// ...
2
3class ArticleScreen extends StatefulWidget {
4  @override
5  _ArticleScreenState createState() => _ArticleScreenState();
6}

Step 8: Create State Class - _ArticleScreenState

1// ...
2
3class _ArticleScreenState extends State<ArticleScreen> {
4  List articles = [];
5
6  @override
7  void initState() {
8    super.initState();
9    fetchArticles();
10  }
  • Define the _ArticleScreenState class.
  • articles list holds fetched articles.
  • initState() is called when the widget is created, triggering fetchArticles().

Step 9: Fetch Articles from Strapi

Send a GET request to http://localhost:1337/api/articles?populate=*. If the response is successful (statusCode == 200), decode the JSON and update the articles list.

Use setState() to refresh the UI with new data.

1// ...
2
3Future<void> fetchArticles() async {
4  final response =
5      await http.get(Uri.parse('$strapiUrl/api/articles?populate=*'));
6  if (response.statusCode == 200) {
7    print('Raw API Response: ${jsonEncode(response.body)}');
8    setState(() {
9      articles = jsonDecode(response.body)['data'];
10    });
11  }
12}

Step 10: Scaffold the UI and Display Articles

Use Scaffold to provide a basic app structure with an AppBar and body. Use the ListView.builder to dynamically create a list of articles.

Wrap each article inside a Card for better UI styling. Display the article cover image, title and description inside a Padding widget.

// ...

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Strapi + Flutter')),
      body: ListView.builder(
        itemCount: articles.length,
        itemBuilder: (context, index) {
          var article = articles[index];
          debugPrint(article.toString());
          return Card(
            margin: EdgeInsets.all(10),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // if (article['image'] != null)
                Image.network('$strapiUrl${article['cover']['url']}'),
                Padding(
                  padding: EdgeInsets.all(10),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        article['title'],
                        style: TextStyle(
                            fontSize: 20, fontWeight: FontWeight.bold),
                      ),
                      SizedBox(height: 5),
                      Text(article['description']),
                    ],
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }

Complete Project Code

Here is the complete code from the steps above:

1// Path: `./lib/main.dart`
2import 'package:flutter/material.dart';
3import 'package:http/http.dart' as http;
4import 'dart:convert';
5
6const String strapiUrl = 'http://localhost:1337';
7
8void main() {
9  runApp(MyApp());
10}
11
12class MyApp extends StatelessWidget {
13  @override
14  Widget build(BuildContext context) {
15    return MaterialApp(
16      home: ArticleScreen(),
17    );
18  }
19}
20
21class ArticleScreen extends StatefulWidget {
22  @override
23  _ArticleScreenState createState() => _ArticleScreenState();
24}
25
26class _ArticleScreenState extends State<ArticleScreen> {
27  List articles = [];
28
29  @override
30  void initState() {
31    super.initState();
32    fetchArticles();
33  }
34
35  Future<void> fetchArticles() async {
36    final response =
37        await http.get(Uri.parse('$strapiUrl/api/articles?populate=*'));
38    if (response.statusCode == 200) {
39      print('Raw API Response: ${jsonEncode(response.body)}');
40      setState(() {
41        articles = jsonDecode(response.body)['data'];
42        print(articles);
43      });
44    }
45  }
46
47  @override
48  Widget build(BuildContext context) {
49    return Scaffold(
50      appBar: AppBar(title: Text('Strapi + Flutter')),
51      body: ListView.builder(
52        itemCount: articles.length,
53        itemBuilder: (context, index) {
54          var article = articles[index];
55          debugPrint(article.toString());
56          return Card(
57            margin: EdgeInsets.all(10),
58            child: Column(
59              crossAxisAlignment: CrossAxisAlignment.start,
60              children: [
61                // if (article['image'] != null)
62                Image.network('$strapiUrl${article['cover']['url']}'),
63                Padding(
64                  padding: EdgeInsets.all(10),
65                  child: Column(
66                    crossAxisAlignment: CrossAxisAlignment.start,
67                    children: [
68                      Text(
69                        article['title'],
70                        style: TextStyle(
71                            fontSize: 20, fontWeight: FontWeight.bold),
72                      ),
73                      SizedBox(height: 5),
74                      Text(article['description']),
75                    ],
76                  ),
77                ),
78              ],
79            ),
80          );
81        },
82      ),
83    );
84  }
85}

Refresh your Flutter Application

Inside your terminal, press r on your keyboard to refresh your application to see the latest changes.

After that is done, this is what our Flutter application should look like:

npm run dev

Here is what your updated application should look like:

Github Project Repo

You can find the complete code for this project in the following Github repo.

Strapi Open Office Hours

If you have any questions about Strapi 5 or just would like to stop by and say hi, you can join us at Strapi's Discord Open Office Hours Monday through Friday at 12:30 pm - 1:30 pm CST: Strapi Discord Open Office Hours

For more details, visit the Strapi documentation and Flutter documentation.

See Strapi in action with an interactive demo

Explore Strapi in an instant, hands-on demo set up just for you.

tweet selection
Learn
more

Unlock
powerful
Flutter
concepts!