Use WebServices provided by Dart codegn generated by swagger in my Flutter app

Question

I am trying to develop a mobile application with Flutter, I use swagger to generate a Dart files codegen that contains all the web services.I want to get the list of all user from the Web services. In the screen, i want to display for each user: image, first name, last name and email. I have prepared the UI in main.dart as the following :

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

And, the following the model of user generated by 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;
  }
}

I create a class "Utility.dart" which i put a method to get the list of first name of all user inside in as the following:

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

}

when i run my app,a lot of errors appear as following :

Compiler message: file:///home/innovi/development/flutter/.pub-cache/hosted/pub.dartlang.org/http-0.12.0+1/lib/src/browser_client.dart:6:8: Error: Not found: 'dart:html' import 'dart:html'; ^ file:///home/innovi/development/flutter/.pub-cache/hosted/pub.dartlang.org/http-0.12.0+1/lib/src/browser_client.dart:95:25: Error: Type 'HttpRequest' not found. void _openHttpRequest(HttpRequest request, String method, 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: Error: 'HttpRequest' isn't a type. final _xhrs = new Set(); ^^^^^^^^^^^ lib/main.dart:63:27: Error: Expected an identifier, but got ','. , // first and last name of user ^ file:///home/innovi/development/flutter/.pub-cache/hosted/pub.dartlang.org/http-0.12.0+1/lib/src/browser_client.dart:44:19: Error: Method not found: 'HttpRequest'. var xhr = new HttpRequest(); ^^^^^^^^^^^ file:///home/innovi/development/flutter/.pub-cache/hosted/pub.dartlang.org/http-0.12.0+1/lib/src/browser_client.dart:55:45: Error: Method not found: 'Blob'. var blob = xhr.response == null ? new 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: Error: Method not found: '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: Error: Too many positional arguments: 0 allowed, but 1 found. Try removing the extra positional arguments. var blob = xhr.response == null ? new 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: Error: 'HttpRequest' isn't a type. void _openHttpRequest(HttpRequest request, String method, 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: Error: The method 'open' isn't defined for the class 'invalid-type'. Try correcting the name to the name of an existing method, or defining a method named 'open'. request.open(method, url, async: asynch, user: user, password: password); ^^^^ file:///home/innovi/development/flutter/.pub-cache/hosted/pub.dartlang.org/http-0.12.0+1/lib/src/browser_client.dart:105:11: Error: The method 'abort' isn't defined for the class 'invalid-type'. Try correcting the name to the name of an existing method, or defining a method named 'abort'. xhr.abort();

I want to know what's the problem,and how can i consume my webservice to get and display : Image, first/last name and email of all user.

Solution

I was able to generate swagger client for a test flutter project with version 2.4.2 of swagger-codgen that should have solved this issue.

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

Important flag: -DbrowserClient=false

And following README.md instructions in order to add the generated swagger library to my test flutter project:

Local

To use the package in your local drive, please include the following in >pubspec.yaml

dependencies:
 swagger:
   path: /path/to/swagger

Tests

TODO

Getting Started

Please follow the installation procedure and then run the following:

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();

I only had to explicitly specify environment also in pubspec.yaml in swagger library.

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'

UPDATE

I've tried also openapi-generator-cli

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

and followwing README.md the same way you did with swagger.

I tried, and both solutions work. Open API seems more flutter ready than swagger client, cause I didn't need to add the environment in pubspec.yaml of generated open api library, but it's set automatically.

Comments

[shadowsheep]

Maybe you are missing some packages in your pubspec.yaml. Did swagger generate also a pubspec.yaml during generation process? In this case you can copy and paste packages it needs in your main project pubspec.yaml.

[Lina]

Yeah, swagger generate also a pubspec.yaml, which contains the following lines "name: swagger version: 1.0.0 description: Swagger API client dependencies: http: '>=0.11.1 <0.12.0'" , i added the missing dependencies "dartson: "^0.2.4" dev_dependencies: guinness: '^0.1.17' browser: any transformers: - dartson", but the errors still exist

[Lina]

I'm lost,could some one help me

[shadowsheep]

@MimiSoftware Found this issue. So I'll try with latest codegen and I let you know.

[Lina]

when i put this command : " java -jar swagger-codegen-cli-2.4.2.jar generate -l dart -i openapi.json -o swagger -DbrowserClient=false" the following appear "Unable to access jarfile swagger-codegen-cli-2.4.2.jar"

[shadowsheep]

@MimiSoftware you need to download it from here...

[Lina]

Done, but another error appear "Exception in thread "main" java.lang.UnsupportedClassVersionError: io/swagger/codegen/SwaggerCodegen : Unsupported major.minor version 51.0"

[shadowsheep]

@MimiSoftware github.com/swagger-api/swagger-codegen/issues/605, github.com/swagger-api/swagger-codegen/issues/917 My Java version is java version "1.8.0_191"

[shadowsheep]

@MimiSoftware I've updated my answer considering also open api generator. Btw both solution work well for me.

[Lina]

i upgrade my java version to "1.8.0_171", then i download openapi-generator-cli-3.3.4.jar by this command "wget central.maven.org/maven2/org/openapitools/openapi-generator-‌​cli/… -O openapi-generator-cli.jar",after that i run this command " java -jar openapi-generator-cli.jar generate -l dart -i openapi.json -o openapi -DbrowserClient=false", an error appear as following "[error] The spec file is not found: openapi.json [error] Check the path of the OpenAPI spec and try again.

[shadowsheep]

How have you generated your first version of your swagger library? I guess you didn't use the jar version of swagger code generation. The one I'm used to use, and that I've used here too. If you are not comfortable with this kind of generation, you still could use your actual method but keep in mind not to generate client browser using this flag -DbrowserClient=false. openapi.json is a file you should have, usually you have been given it from your backend developer and is the file describiing (through open api specification) your WebService and is the file you need to use to generate client.

[shadowsheep]

@MimiSoftware As you have an already code of your client library you have generated it once, so how did you generate it? 'Cause of corse you didn't use the method I'm proposing you here...

[shadowsheep]

@MimiSoftware so, chose the method you prefere to generate your code but use this flag -DbrowserClient=false. in order not to generate ClientBrowser, the component that makes your code not compiling.

[Lina]

i just go to "swagger.io", then i sign in with my account to swagger Hub, then i choose "import Api" and i put tthe Url of my webservice. After that, i export this file as a dart file "dart-client-generated". finally, i import this file in my flutter project and i added the missing dependencies in pubspec.yaml, this is the process which i follow. Did you understand me ?

[shadowsheep]

@MimiSoftware yep, I understand you, but I've never used the "import API" function cause I don't have a SwaggerHub account. But if your web services are OpenApi compatible you are able to get your Web Service specification in a yaml or json format. Usually is your web service url by appending a swagger path like example.com/swagger but that depends on your configuration. So you could either check how to pass a generation flag inside SwaggerHub (I dunno this part) or obtain your web service specification and use my method.

[Lina]

This is the required method at my work. Up to now, i didn't have any idea about how can i consume my webservice. Any way, thank you for all your reply and if you meet some thing about my problem, could you tell me please.