Flutter

Integrate Strapi with Flutter.

Flutter 入门

本集成指南遵循快速入门指南，并假设您已完全完成“动手”路径。您应该能够通过浏览 URL http://localhost:1337/api/restaurants 来使用该 API。

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

创建 Flutter 应用程序

确保您的计算机上已安装 Flutter。

bash

flutter create flutterapp
cd flutterapp

使用 HTTP 客户端

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

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

yaml

# ...
dependencies:
flutter:
sdk: flutter

# 以下将 Cupertino Icons 字体添加到您的应用程序。
# 与 CupertinoIcons 类一起使用以获得 iOS 样式图标。
cupertino_icons: ^1.0.0
http: ^0.12.2
# ...

通过运行以下命令安装您的依赖项：

bash

flutter pub get

向您的集合类型发送 GET 请求

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

确保您已激活“餐厅”集合类型的“查找”权限。

Example GET request

dart

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)

json

[
  {
    "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 请求您的集合类型

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

确保您已激活“restaurant”集合类型的“create”权限和“category”集合类型的“find”权限。

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

Example POST request

dart

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]
  });
);

json

{
  "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”请求，以更新餐厅的类别。

确保您已为“餐厅”集合类型激活“put”权限。

Example PUT request

dart

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]
  });
);

json

{
  "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-04T10:21:30.219Z",
  "updated_at": "2020-08-04T10:21:30.219Z",
  "categories": [
    {
      "id": 2,
      "name": "Brunch",
      "created_by": 1,
      "updated_by": 1,
      "created_at": "2020-08-04T10:24:26.901Z",
      "updated_at": "2020-08-04T10:24:26.911Z"
    }
  ]
}