在我的 Flutter 应用中使用 swagger 生成的 Dart codegen 提供的 Web Services答案

【问题标题】：Use WebServices provided by Dart codegn generated by swagger in my Flutter app在我的 Flutter 应用中使用 swagger 生成的 Dart codegen 提供的 Web Services
【发布时间】：2019-07-30 05:36:32
【问题描述】：

我正在尝试使用 Flutter 开发移动应用程序，我使用 swagger 生成包含所有 Web 服务的 Dart 文件代码生成器。我想从 Web 服务中获取所有用户的列表。在屏幕上，我想为每个用户显示：图像、名字、姓氏和电子邮件。我在 main.dart 中准备了 UI，如下所示：

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


        void main() => runApp(ListUserApp());

        class ListUserApp extends StatelessWidget {
          @override
          Widget build(BuildContext context) {
            return MaterialApp(
              title: 'User List 4Motors',
              home: ListUserScreen(),
            );
          }
        }

        class ListUserScreen extends StatefulWidget {
          @override
          State<StatefulWidget> createState() {
            return ListUserScreenState();
          }
        }

        class ListUserScreenState extends State<ListUserScreen> {
          @override
          Widget build(BuildContext context) {
            return MaterialApp(
              theme: ThemeData(
                  primarySwatch: Colors.indigo,
              ),
              home: Scaffold(
                appBar: AppBar(
                  title: Text('User List 4Motors'),
                ),
                body: _buildListUser(),
              ),
            );
          }

          Widget _buildListUser() {
    Utility test = new Utility();
    print(test.getFirstNameUser());
                return ListView.builder(
                itemBuilder: (context, position) {
                  return Card(
                    child: Padding(
                      padding: const EdgeInsets.all(16.0),
                      child: Container(
                        margin: const EdgeInsets.all(10.0),
                        child: Row(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Container(
                              margin: const EdgeInsets.only(right: 15.0),
                              child: Image(
                                  width: 65, image: AssetImage('assets/person.jpeg')),  // Image of user
                            ),
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: <Widget>[
                                Text(
                                  'firstname & lastname', // first and last name of user
                                  style: TextStyle(
                                    fontSize: 22,
                                  ),
                                ),
                                Container(
                                  margin: const EdgeInsets.all(5.0),
                                  child: Text('email'), // Email of user 
                                ),
                              ],
                            ),
                          ],
                        ),
                      ),
                    ),
                  );
                });
          }
        }

并且，以下是 swagger 生成的用户模型：

part of swagger.api;

class UsersData {
  String id = null;

  String firstName = null;

  String lastName = null;

  String email = null;

  String phone = null;

  String image = null;

  DateTime birthDay = null;

  String fireBaseID = null;

  String dealerID = null;

  String type = null;

  String provider = null;

  DateTime registrationDate = null;

  DateTime lastLogin = null;

  bool allowComment = null;

  bool isActive = null;

  List<UserAddressData> addresses = [];

  UsersData();

  @override
  String toString() {
    return 'UsersData[id=$id, firstName=$firstName, lastName=$lastName, email=$email, phone=$phone, image=$image, birthDay=$birthDay, fireBaseID=$fireBaseID, dealerID=$dealerID, type=$type, provider=$provider, registrationDate=$registrationDate, lastLogin=$lastLogin, allowComment=$allowComment, isActive=$isActive, addresses=$addresses, ]';
  }

  UsersData.fromJson(Map<String, dynamic> json) {
    if (json == null) return;
    id = json['id'];
    firstName = json['firstName'];
    lastName = json['lastName'];
    email = json['email'];
    phone = json['phone'];
    image = json['image'];
    birthDay =
        json['birthDay'] == null ? null : DateTime.parse(json['birthDay']);
    fireBaseID = json['fireBaseID'];
    dealerID = json['dealerID'];
    type = json['type'];
    provider = json['provider'];
    registrationDate = json['registrationDate'] == null
        ? null
        : DateTime.parse(json['registrationDate']);
    lastLogin =
        json['lastLogin'] == null ? null : DateTime.parse(json['lastLogin']);
    allowComment = json['allowComment'];
    isActive = json['isActive'];
    addresses = UserAddressData.listFromJson(json['addresses']);
  }

  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'firstName': firstName,
      'lastName': lastName,
      'email': email,
      'phone': phone,
      'image': image,
      'birthDay': birthDay == null ? '' : birthDay.toUtc().toIso8601String(),
      'fireBaseID': fireBaseID,
      'dealerID': dealerID,
      'type': type,
      'provider': provider,
      'registrationDate': registrationDate == null
          ? ''
          : registrationDate.toUtc().toIso8601String(),
      'lastLogin': lastLogin == null ? '' : lastLogin.toUtc().toIso8601String(),
      'allowComment': allowComment,
      'isActive': isActive,
      'addresses': addresses
    };
  }

  static List<UsersData> listFromJson(List<dynamic> json) {
    return json == null
        ? new List<UsersData>()
        : json.map((value) => new UsersData.fromJson(value)).toList();
  }

  static Map<String, UsersData> mapFromJson(
      Map<String, Map<String, dynamic>> json) {
    var map = new Map<String, UsersData>();
    if (json != null && json.length > 0) {
      json.forEach((String key, Map<String, dynamic> value) =>
          map[key] = new UsersData.fromJson(value));
    }
    return map;
  }
}

我创建了一个类“Utility.dart”，我在其中放置了一个方法来获取所有用户的名字列表，如下所示：

import 'package:flutter_app_ws/dart-client-generated/lib/api.dart';

class Utility {
  UsersData user;
  Utility();

  List<String> getFirstNameUser() {
    List<String> firstName = new List<String>();
    firstName.add(user.firstName);
    return firstName;
  }

}

当我运行我的应用程序时，出现很多错误如下：

编译器消息： file:///home/innovi/development/flutter/.pub-cache/hosted/pub.dartlang.org/http-0.12.0+1/lib/src/browser_client.dart:6:8: 错误：未找到：'dart:html' 导入“飞镖：html”； ^ file:///home/innovi/development/flutter/.pub-cache/hosted/pub.dartlang.org/http-0.12.0+1/lib/src/browser_client.dart:95:25: 错误：找不到类型“HttpRequest”。 void _openHttpRequest(HttpRequest 请求，String 方法，String url， ^^^^^^^^^^^^ file:///home/innovi/development/flutter/.pub-cache/hosted/pub.dartlang.org/http-0.12.0+1/lib/src/browser_client.dart:30:25: 错误：“HttpRequest”不是一种类型。最终 _xhrs = new Set(); ^^^^^^^^^^^^ lib/main.dart:63:27：错误：需要一个标识符，但得到了“，”。 , // 用户的名字和姓氏 ^ file:///home/innovi/development/flutter/.pub-cache/hosted/pub.dartlang.org/http-0.12.0+1/lib/src/browser_client.dart:44:19: 错误：找不到方法：'HttpRequest'。 var xhr = 新的 HttpRequest(); ^^^^^^^^^^^^ file:///home/innovi/development/flutter/.pub-cache/hosted/pub.dartlang.org/http-0.12.0+1/lib/src/browser_client.dart:55:45: 错误：找不到方法：“Blob”。 var blob = xhr.response == null ？新 Blob([]) : xhr.response; ^^^^ file:///home/innovi/development/flutter/.pub-cache/hosted/pub.dartlang.org/http-0.12.0+1/lib/src/browser_client.dart:56:24: 错误：找不到方法：'FileReader'。 var reader = new FileReader(); ^^^^^^^^^^ file:///home/innovi/development/flutter/.pub-cache/hosted/pub.dartlang.org/http-0.12.0+1/lib/src/browser_client.dart:55:49: 错误：位置参数太多：允许 0 个，但找到了 1 个。尝试删除额外的位置参数。 var blob = xhr.response == null ？新 Blob([]) : xhr.response; ^ file:///home/innovi/development/flutter/.pub-cache/hosted/pub.dartlang.org/http-0.12.0+1/lib/src/browser_client.dart:95:25: 错误：“HttpRequest”不是一种类型。 void _openHttpRequest(HttpRequest 请求，String 方法，String url， ^^^^^^^^^^^^ file:///home/innovi/development/flutter/.pub-cache/hosted/pub.dartlang.org/http-0.12.0+1/lib/src/browser_client.dart:97:13：错误：没有为类“invalid-type”定义方法“open”。尝试将名称更正为现有方法的名称，或定义名为“open”的方法。 request.open（方法，url，异步：异步，用户：用户，密码：密码）； ^^^^ file:///home/innovi/development/flutter/.pub-cache/hosted/pub.dartlang.org/http-0.12.0+1/lib/src/browser_client.dart:105:11: 错误：没有为类“invalid-type”定义方法“abort”。尝试将名称更正为现有方法的名称，或定义名为“abort”的方法。 xhr.abort();

我想知道问题出在哪里，以及如何使用我的网络服务来获取和显示：所有用户的图像、名字/姓氏和电子邮件。

【问题讨论】：

您的pubspec.yaml 中可能缺少一些软件包。 swagger 在生成过程中是否也生成了pubspec.yaml？在这种情况下，您可以在主项目pubspec.yaml 中复制并粘贴它需要的包。

标签： android dart flutter swagger

【解决方案1】：

我能够为 swagger-codgen 版本 2.4.2 的测试颤振项目生成 swagger 客户端，应该可以解决这个问题issue。

java -jar swagger-codegen-cli-2.4.2.jar generate -l dart -i openapi.json -o swagger -DbrowserClient=false

重要标志：-DbrowserClient=false

并按照README.md 的说明将生成的 swagger 库添加到我的测试颤振项目中：

本地

要在本地驱动器中使用该软件包，请在 >pubspec.yaml 中包含以下内容
dependencies:
 swagger:
   path: /path/to/swagger
测试

待办事项

开始

请按照安装程序，然后运行以下命令：
import 'package:swagger/api.dart';

// TODO Configure API key authorization: api_key
//swagger.api.Configuration.apiKey{'key'} = 'YOUR_API_KEY';
// uncomment below to setup prefix (e.g. Bearer) for API key, if needed
//swagger.api.Configuration.apiKeyPrefix{'key'} = "Bearer";

var api_instance = new DefaultApi();

我只需要在 swagger 库的 pubspec.yaml 中明确指定环境。

name: swagger
version: 1.0.0
description: Swagger API client
environment:
  sdk: ">=2.1.0 <3.0.0"
dependencies:
  http: '>=0.11.1 <0.12.0'

更新

我也试过openapi-generator-cli

java -jar openapi-generator-cli-3.3.4.jar generate -l dart -i openapi.json -o openapi -DbrowserClient=false

并跟随 README.md 就像你对 swagger 所做的那样。

我试过了，两种解决方案都有效。 Open API 似乎比 swagger 客户端更适合 Flutter，因为我不需要在生成的开放 api 库的pubspec.yaml 中添加环境，但它是自动设置的。

【讨论】：

是的，swagger 还生成了一个 pubspec.yaml，其中包含以下行“名称：swagger 版本：1.0.0 描述：Swagger API 客户端依赖项：http:'>=0.11.1
我迷路了，谁能帮帮我
@MimiSoftware 找到这个issue。所以我会尝试使用最新的代码生成器，我会告诉你。
当我输入这个命令时：“java -jar swagger-codegen-cli-2.4.2.jar generate -l dart -i openapi.json -o swagger -DbrowserClient=false”下面出现“无法访问 jarfile swagger-codegen-cli-2.4.2.jar"
@MimiSoftware 你需要从here下载它...