Flutter API集成插件api_sdk的使用

Flutter API集成插件api_sdk的使用

1. 简介

api_sdk 是一个用于在Flutter应用程序中与API进行交互的插件。它基于 http 包，支持 GET、POST、PUT 和 DELETE 请求类型，并且支持 JSON、x-www-form-urlencoded 和 form-data 请求体格式。该插件支持以下平台的编译：

• Android
• iOS
• Web
• Windows
• Linux

2. 环境变量的使用

为了使用环境变量，你需要按照以下步骤操作：

1. 复制 api-key.json.tpl 文件：在项目根目录下找到 api-key.json.tpl 文件，复制一份并去掉 .tpl 扩展名，生成 api-key.json 文件。
2. 添加必要的变量：在 api-key.json 文件中添加所需的环境变量。例如：

   {
       "API_URL": "https://example.com",
       "API_URL_PRODUCTION": "https://example.com",
       "PROTOCOL": "https",
       "DEBUG": true
   }
   

3. 编译方法

如果你使用的是 Visual Studio Code，需要编辑或创建 .vscode/launch.json 文件，内容如下：

{
  "version": "0.2.0",
  "configurations": [
      {
          "name": "app",
          "request": "launch",
          "type": "dart",
          "args": ["--dart-define-from-file", "api-key.json"]
      },
      {
          "name": "app (profile mode)",
          "request": "launch",
          "type": "dart",
          "flutterMode": "profile",
          "args": ["--dart-define-from-file", "api-key.json"]
      },
      {
          "name": "app (release mode)",
          "request": "launch",
          "type": "dart",
          "flutterMode": "release",
          "args": ["--dart-define-from-file", "api-key.json"]
      }
  ]
}

之后，你可以通过按下 F5 来在调试、性能分析或发布模式下编译应用。

4. 使用说明

• URL 定义：

  • 如果你在 API_URL 或 API_URL_PRODUCTION 中定义了带有 https 或 http 前缀的 URL，则 PROTOCOL 环境变量将被忽略。
  • 如果你定义的 URL 没有前缀（如 localhost:4000），则 PROTOCOL 环境变量将生效。

• 环境变量说明：

  • PROTOCOL：用于定义连接协议，默认为 https。如果需要使用 http，可以将 PROTOCOL 设置为 http。
  • DEBUG：默认为 true，表示使用开发环境的 URL。如果设置为 false，则会使用生产环境的 URL。
  • API_URL 和 API_URL_PRODUCTION：用于定义连接域名。如果 URL 带有 https 或 http 前缀，则这些变量优先于 PROTOCOL 环境变量。

5. 不同编译类型的命令

在编译之前，请确保 DEBUG 模式已按需设置，并运行以下命令以清理和获取依赖项：

flutter clean
flutter pub get

• APK 或 App Bundle 的发布模式编译：

  flutter build apk --split-per-abi --dart-define-from-file=api-key.json
  

  flutter build appbundle --dart-define-from-file=api-key.json
  

• iOS 编译：

  flutter build ipa --dart-define-from-file=api-key.json
  

  生成的 .ipa 文件位于 ./build/ios/archive/Runner.xcarchive，可以通过以下命令打开：

  open ./build/ios/archive/Runner.xcarchive
  

• Web 编译：

  flutter build web --dart-define-from-file=api-sdk.json
  

  如果需要指定基础路径，可以使用 --base-href 参数：

  flutter build web --base-href "/" --dart-define-from-file=api-key.json
  

6. 示例代码

以下是一个完整的示例代码，展示了如何使用 api_sdk 插件调用 API：

import 'package:flutter/material.dart';
import 'package:api_sdk/api_sdk.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String apiData = '';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Example Call API',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Example Call API'),
        ),
        body: Center(
          child: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                const Text(
                  'API 调用结果:',
                ),
                Padding(
                  padding: const EdgeInsets.all(10.0),
                  child: Text(
                    apiData,
                    style: Theme.of(context).textTheme.bodySmall,
                  ),
                ),
                ElevatedButton(
                  onPressed: () async {
                    /// 调用 API 使用 [ApiSdk] 类和 [CountryEndpoint] 类
                    setState(() {
                      apiData = 'Loading...';
                    });

                    try {
                      final response = await ApiSdk().run(endpoint: CountryEndpoint());
                      if (response.statusCode == 200) {
                        setState(() {
                          apiData = response.body.toString();
                        });
                      } else {
                        setState(() {
                          apiData = 'Error: ${response.statusCode}';
                        });
                      }
                    } catch (e) {
                      setState(() {
                        apiData = 'Error: $e';
                      });
                    }
                  },
                  child: const Text('Call API'),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

/// 自定义 API 端点类，继承自 [EndpointConfig]
class CountryEndpoint extends EndpointConfig {
  CountryEndpoint();

  /// 设置 API 的基础 URL
  [@override](/user/override)
  String get setBaseUrl => 'https://restcountries.com';

  /// 设置请求方法
  [@override](/user/override)
  Method get method => Method.get;

  /// 设置 API 路径
  [@override](/user/override)
  String get path => 'v3.1/alpha/col';

  /// 设置查询参数
  [@override](/user/override)
  Map<String, dynamic> get queryParameters => {};

  /// 设置请求头
  [@override](/user/override)
  Map<String, String> get headers => {};

  /// 设置请求体类型
  [@override](/user/override)
  BodyType get bodyType => BodyType.raw;

  /// 设置请求体
  [@override](/user/override)
  Map<String, dynamic> get body => {};

  /// 设置上传文件
  [@override](/user/override)
  List<ImagesModelEndpoint> get files => [];
}