Skip to main content

Flutter 入门

¥Getting Started with Flutter

🧹 删除了集成指南

Strapi 文档团队专注于改进 Strapi 5 核心体验的文档。我们将在未来 6 个月内发布许多更改，请密切关注👀。

¥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 👀.

因此，当前页面现在仅处于维护模式，可能未完全与 Strapi 5 保持同步，并且很快将从 docs.strapi.io 中删除并移至 Strapi 的 集成页面。

¥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.

同时，如果你想帮助我们改进此页面，请随时 contribute 到文档的 GitHub 存储库。

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

本集成指南遵循 快速入门指南。你应该能够通过浏览 URL http://localhost:1337/api/restaurants 使用该 API。

¥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.

如果你尚未阅读快速入门指南，则使用 Flutter 请求 Strapi API 的方式将保持不变，只是你不获取相同的内容。

¥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.

创建一个 Flutter 应用​

¥Create a Flutter application

确保你的计算机上有 颤振已安装。

¥Be sure to have Flutter installed on your computer.

flutter create flutterapp
cd flutterapp

使用 HTTP 客户端​

¥Use an HTTP client

我们将使用 http 来发出 HTTP 请求。

¥We'll use http for making HTTP requests.

  • 使用以下内容更新 pubspec.yaml 文件：

    ¥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 请求​

¥GET Request to your collection type

对 restaurant 集合类型执行 GET 请求以获取所有餐厅。

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

确保你激活了 restaurant 集合类型的 find 权限。

¥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 请求你的集合类型​

¥POST Request your collection type

对 restaurant 集合类型执行 POST 请求以创建餐厅。

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

确保你激活了 restaurant 集合类型的 create 权限和 category 集合类型的 find 权限。

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

在此示例中，已创建 japanese 类别，其 ID 为：3.

¥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 请求你的集合类型​

¥PUT Request your collection type

对 restaurant 集合类型执行 PUT 请求以更新餐厅的类别。

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

确保你激活了 restaurant 集合类型的 put 权限。

¥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
    }
  }
}