跳到主要内容

Getting Started with Flutter

🧹 Removing integration guides

The Strapi Documentation team focuses on improving the documentation for Strapi 5's core experience. We will release many changes in the next 6 months, so please keep an eye out 👀.

As a result, the present page is now in maintenance mode only, might not be fully up-to-date with Strapi 5, and will soon be removed from docs.strapi.io and moved to Strapi's integrations page.

In the meantime, if you want to help us improve this page, please feel free to contribute to the documentation's GitHub repository.

This integration guide follows the Quick Start Guide. You should be able to consume the API by browsing the URL http://localhost:1337/api/restaurants.

If you haven't gone through the Quick Start Guide, the way you request a Strapi API with Flutter remains the same except that you do not fetch the same content.

Create a Flutter application

Be sure to have Flutter installed on your computer.

flutter create flutterapp
cd flutterapp

Use an HTTP client

We'll use http for making HTTP requests.

  • Update the pubspec.yaml file with the following:
...
dependencies:
flutter:
sdk: flutter



# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.0
http: ^0.12.2
...
  • Install your dependencies by running the following command:
flutter pub get

GET Request to your collection type

Execute a GET request on the restaurant collection type in order to fetch all your restaurants.

Be sure that you activated the find permission for the restaurant collection type.

Example GET request
Map<String,String> headers = {
'Content-Type':'application/json',
'Accept': 'application/json'
};

var response = await http.get(
'http://localhost:1337/api/restaurants',
headers: headers
);

print(response.body)
Example response
[
{
"id": 1,
"name": "Biscotte Restaurant",
"description": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers.",
"created_by": {
"id": 1,
"firstname": "Paul",
"lastname": "Bocuse",
"username": null
},
"updated_by": {
"id": 1,
"firstname": "Paul",
"lastname": "Bocuse",
"username": null
},
"created_at": "2020-07-31T11:37:16.964Z",
"updated_at": "2020-07-31T11:37:16.975Z",
"categories": [
{
"id": 1,
"name": "French Food",
"created_by": 1,
"updated_by": 1,
"created_at": "2020-07-31T11:36:23.164Z",
"updated_at": "2020-07-31T11:36:23.172Z"
}
]
}
]

POST Request your collection type

Execute a POST request on the restaurant collection type in order to create a restaurant.

Be sure that you activated the create permission for the restaurant collection type and the find permission for the category Collection type.

In this example a japanese category has been created which has the id: 3.

Example POST request
Map<String,String> headers = {
'Content-Type':'application/json',
'Accept': 'application/json'
};

var response = await http.post(
'http://localhost:1337/api/restaurants',
headers: headers,
body: jsonEncode({
'name': 'Dolemon Sushi',
'description': 'Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious.',
'categories': [3]
});
);
Example response
{
"id": 2,
"name": "Dolemon Sushi",
"description": "Unmissable Japanese Sushi restaurant. The cheese and salmon makis are delicious",
"created_by": null,
"updated_by": null,
"created_at": "2020-08-04T09:57:11.669Z",
"updated_at": "2020-08-04T09:57:11.669Z",
"categories": [
{
"id": 3,
"name": "Japanese",
"created_by": 1,
"updated_by": 1,
"created_at": "2020-07-31T11:36:23.164Z",
"updated_at": "2020-07-31T11:36:23.172Z"
}
]
}

PUT Request your collection type

Execute a PUT request on the restaurant collection type in order to update the category of a restaurant.

Be sure that you activated the put permission for the restaurant collection type.

Example PUT request
Map<String,String> headers = {
'Content-Type':'application/json',
'Accept': 'application/json'
};

var response = await http.put(
'http://localhost:1337/api/restaurants/2',
headers: headers,
body: jsonEncode({
'categories': [2]
});
);
Example response
{
"data": [
{
"id": 2,
"documentId": "na8ce9ltc0y99syjbs3vbigx",
"Name": "Biscotte Restaurant",
"Description": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"text": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers."
}
]
}
],
"createdAt": "2024-08-09T08:59:05.114Z",
"updatedAt": "2024-08-09T08:59:06.341Z",
"publishedAt": "2024-08-09T08:59:06.344Z",
"locale": "en"
}
],
"meta": {
"pagination": {
"page": 1,
"pageSize": 25,
"pageCount": 1,
"total": 1
}
}
}