CODEWITHSUNDEEP
flutterdart
Logan
Logan

Reputation: 35

Unhandled Exception: type 'List<dynamic>' is not a subtype of type 'Map<String, dynamic

I'm decoding a response body and I'm getting the error:

[ERROR:flutter/lib/ui/ui_dart_state.cc(157)] Unhandled Exception: type 'List<dynamic>' is not a subtype of type 'Map<String, dynamic>'

I'm trying to play around with an API while following a flutter tutorial on Udemy. The tutorial says to use https://javiercbk.github.io/json_to_dart/ to convert JSON to Dart. I took the JSON from https://www.openbrewerydb.org/ and converted it to Dart but the problem that I run into is when I try to decode the API I get the error Unhandled Exception: type 'List' is not a subtype of type 'Map<String, dynamic>

As someone who is fairly new to Flutter/ Dart I'm unsure of how to resolve such an error. My code is posted below for reference. Any help is welcome!

BreweryModel.dart

class BreweryModel {
  int id;
  String name;
  String breweryType;
  String street;
  String city;
  String state;
  String postalCode;
  String country;
  String longitude;
  String latitude;
  String phone;
  String websiteUrl;
  String updatedAt;

  BreweryModel(
      {this.id,
      this.name,
      this.breweryType,
      this.street,
      this.city,
      this.state,
      this.postalCode,
      this.country,
      this.longitude,
      this.latitude,
      this.phone,
      this.websiteUrl,
      this.updatedAt});

  factory BreweryModel.fromJson(Map<String, dynamic> json) {
    return BreweryModel(
        id: json['id'],
        name: json['name'],
        breweryType: json['brewery_type'],
        street: json['street'],
        city: json['city'],
        state: json['state'],
        postalCode: json['postal_code'],
        country: json['country'],
        phone: json['phone']);
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['name'] = this.name;
    data['brewery_type'] = this.breweryType;
    data['street'] = this.street;
    data['city'] = this.city;
    data['state'] = this.state;
    data['postal_code'] = this.postalCode;
    data['country'] = this.country;
    data['longitude'] = this.longitude;
    data['latitude'] = this.latitude;
    data['phone'] = this.phone;
    data['website_url'] = this.websiteUrl;
    data['updated_at'] = this.updatedAt;
    return data;
  }
}

Network.dart

import 'package:brewery_app/model/BreweryModel.dart';
import 'package:http/http.dart';
import 'dart:convert';

class Network {
  Future<BreweryModel> getBreweryModel({String cityName}) async {
    var URL = 'https://api.openbrewerydb.org/breweries?by_city=$cityName';

    final response = await get(Uri.encodeFull(URL));

    print('URL ${Uri.encodeFull(URL)}');

    if (response.statusCode == 200) {
      print(response.body);
      return BreweryModel.fromJson(json.decode(response.body));
    } else {
      throw Exception('Error getting brewery');
    }
  }
}

Main.dart

import 'package:brewery_app/model/BreweryModel.dart';
import 'package:brewery_app/network/network.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Brewery(),
    );
  }
}

class Brewery extends StatefulWidget {
  @override
  _BreweryState createState() => _BreweryState();
}

class _BreweryState extends State<Brewery> {
  Future<BreweryModel> breweryObject;
  String cityName = 'Austin';
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    breweryObject = Network().getBreweryModel(cityName: cityName);

    breweryObject.then((brewery) {
      print(brewery.city);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

This is everything that gets posted into the console

I/flutter (25205): URL https://api.openbrewerydb.org/breweries?by_city=Austin
I/flutter (25205): [{"id":6780,"name":"Jester King Brewery","brewery_type":"micro","street":"13187 Fitzhugh Rd","city":"Austin","state":"Texas","postal_code":"78736-6510","country":"United States","longitude":"-98.0824692","latitude":"30.2547264","phone":"5125375100","website_url":"http://www.jesterkingbrewery.com","updated_at":"2018-08-24T16:21:26.875Z","tag_list":[]},{"id":6822,"name":"Oasis Texas Brewing Company","brewery_type":"micro","street":"6548 Comanche Trl Ste 301","city":"Austin","state":"Texas","postal_code":"78732-1210","country":"United States","longitude":"-98.151206","latitude":"30.043267","phone":"5122849407","website_url":"http://www.otxbc.com","updated_at":"2018-08-24T16:22:10.184Z","tag_list":[]},{"id":6631,"name":"Barking Armadillo Brewing","brewery_type":"planning","street":"","city":"Austin","state":"Texas","postal_code":"78723-3342","country":"United States","longitude":null,"latitude":null,"phone":"","website_url":"","updated_at":"2018-08-11T21:39:46.076Z","tag_list":[]},{"id":6632,"name":"Barrel Assem
E/flutter (25205): [ERROR:flutter/lib/ui/ui_dart_state.cc(157)] Unhandled Exception: type 'List<dynamic>' is not a subtype of type 'Map<String, dynamic>'
E/flutter (25205): #0      Network.getBreweryModel (package:brewery_app/network/network.dart:15:41)
E/flutter (25205): <asynchronous suspension>
E/flutter (25205): #1      _BreweryState.initState (package:brewery_app/main.dart:31:31)
E/flutter (25205): #2      StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:4640:58)
E/flutter (25205): #3      ComponentElement.mount (package:flutter/src/widgets/framework.dart:4476:5)
E/flutter (25205): #4      Element.inflateWidget (package:flutter/src/widgets/framework.dart:3446:14)
E/flutter (25205): #5      Element.updateChild (package:flutter/src/widgets/framework.dart:3214:18)
E/flutter (25205): #6      SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:5830:14)
E/flutter (25205): #7      Element.inflateWidget (package:flutter/src/widgets/framework.dart:3446:14)
E/flutter (25205): #8      Element.updateChild (package:flutter/src/widgets/framework.dart:3214:18)
E/flutter (25205): #9      ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4527:16)
E/flutter (25205): #10     Element.rebuild (package:flutter/src/widgets/framework.dart:4218:5)
E/flutter (25205): #11     ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4481:5)
E/flutter (25205): #12     ComponentElement.mount (package:flutter/src/widgets/framework.dart:4476:5)
E/flutter (25205): #13     Element.inflateWidget (package:flutter/src/widgets/framework.dart:3446:14)
E/flutter (25205): #14     Element.updateChild (package:flutter/src/widgets/framework.dart:3214:18)
E/flutter (25205): #15     SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:5830:14)
E/flutter (25205): #16     Element.inflateWidget (package:flutter/src/widgets/framework.dart:3446:14)
E/flutter (25205): #17     Element.updateChild (package:flutter/src/widgets/framework.dart:3214:18)
E/flutter (25205): #18     SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:5830:14)
E/flutter (25205): #19     Element.inflateWidget (package:flutter/src/widgets/framework.dart:3446:14)
E/flutter (25205): #20     Element.updateChild (package:flutter/src/widgets/framework.dart:3214:18)
E/flutter (25205): #21     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4527:16)
E/flutter (25205): #22     StatefulElement.performRebuild (package:flutter/src/widgets/framework.dart:4675:11)
E/flutter (25205): #23     Element.rebuild (package:flutter/src/widgets/framework.dart:4218:5)
E/flutter (25205): #24     ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4481:5)
E/flutter (25205): #25     StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:4666:11)
E/flutter (25205): #26     ComponentElement.mount (package:flutter/src/widgets/framework.dart:4476:5)
E/flutter (25205): #27     Element.inflateWidget (package:flutter/src/widgets/framework.dart:3446:14)
E/flutter (25205): #28     Element.updateChild (package:flutter/src/widgets/framework.dart:3214:18)
E/flutter (25205): #29     SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:5830:14)
E/flutter (25205): #30     Element.inflateWidget (package:flutter/src/widgets/framework.dart:3446:14)
E/flutter (25205): #31     Element.updateChild (package:flutter/src/widgets/framework.dart:3214:18)
E/flutter (25205): #32     SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:5830:14)
E/flutter (25205): #33     Element.inflateWidget (package:flutter/src/widgets/framework.dart:3446:14)
E/flutter (25205): #34     Element.updateChild (package:flutter/src/widgets/framework.dart:3214:18)
E/flutter (25205): #35     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4527:16)
E/flutter (25205): #36     StatefulElement.performRebuild (package:flutter/src/widgets/framework.dart:4675:11)
E/flutter (25205): #37     Element.rebuild (package:flutter/src/widgets/framework.dart:4218:5)
E/flutter (25205): #38     ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4481:5)
E/flutter (25205): #39     StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:4666:11)
E/flutter (25205): #40     ComponentElement.mount (package:flutter/src/widgets/framework.dart:4476:5)
E/flutter (25205): #41     Element.inflateWidget (package:flutter/src/widgets/framework.dart:3446:14)
E/flutter (25205): #42     Element.updateChild (package:flutter/src/widgets/framework.dart:3214:18)
E/flutter (25205): #43     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4527:16)
E/flutter (25205): #44     Element.rebuild (package:flutter/src/widgets/framework.dart:4218:5)
E/flutter (25205): #45     ComponentElement._firstBuild (package:flutter

Upvotes: 1

Views: 6793

Answers (2)

chunhunghan
chunhunghan

Reputation: 54407

You can copy paste run full code below
Step 1: Use Future<List<BreweryModel>> for breweryObject; 

Future<List<BreweryModel>> breweryObject;

Step 2: Use Future<List<BreweryModel>> for getBreweryModel

Future<List<BreweryModel>> getBreweryModel({String cityName}) async {
    var URL = 'https://api.openbrewerydb.org/breweries?by_city=$cityName';

    final response = await http.get(Uri.encodeFull(URL));

    print('URL ${Uri.encodeFull(URL)}');

    if (response.statusCode == 200) {
      print(response.body);
      return breweryModelFromJson(response.body);

Step 3 : In getBreweryModel() you need to return breweryModelFromJson(response.body) because it's a List<BreweryModel>

working demo

enter image description here

full code

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

List<BreweryModel> breweryModelFromJson(String str) => List<BreweryModel>.from(
    json.decode(str).map((x) => BreweryModel.fromJson(x)));

String breweryModelToJson(List<BreweryModel> data) =>
    json.encode(List<dynamic>.from(data.map((x) => x.toJson())));

class BreweryModel {
  int id;
  String name;
  String breweryType;
  String street;
  String city;
  String state;
  String postalCode;
  String country;
  String longitude;
  String latitude;
  String phone;
  String websiteUrl;
  String updatedAt;

  BreweryModel(
      {this.id,
      this.name,
      this.breweryType,
      this.street,
      this.city,
      this.state,
      this.postalCode,
      this.country,
      this.longitude,
      this.latitude,
      this.phone,
      this.websiteUrl,
      this.updatedAt});

  factory BreweryModel.fromJson(Map<String, dynamic> json) {
    return BreweryModel(
        id: json['id'],
        name: json['name'],
        breweryType: json['brewery_type'],
        street: json['street'],
        city: json['city'],
        state: json['state'],
        postalCode: json['postal_code'],
        country: json['country'],
        phone: json['phone']);
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['name'] = this.name;
    data['brewery_type'] = this.breweryType;
    data['street'] = this.street;
    data['city'] = this.city;
    data['state'] = this.state;
    data['postal_code'] = this.postalCode;
    data['country'] = this.country;
    data['longitude'] = this.longitude;
    data['latitude'] = this.latitude;
    data['phone'] = this.phone;
    data['website_url'] = this.websiteUrl;
    data['updated_at'] = this.updatedAt;
    return data;
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Brewery(title: 'Flutter Demo Home Page'),
    );
  }
}

class Network {
  Future<List<BreweryModel>> getBreweryModel({String cityName}) async {
    var URL = 'https://api.openbrewerydb.org/breweries?by_city=$cityName';

    final response = await http.get(Uri.encodeFull(URL));

    print('URL ${Uri.encodeFull(URL)}');

    if (response.statusCode == 200) {
      print(response.body);
      return breweryModelFromJson(response.body);
    } else {
      throw Exception('Error getting brewery');
    }
  }
}

class Brewery extends StatefulWidget {
  Brewery({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _BreweryState createState() => _BreweryState();
}

class _BreweryState extends State<Brewery> {
  Future<List<BreweryModel>> breweryObject;
  String cityName = 'Austin';

  @override
  void initState() {
    super.initState();
    breweryObject = Network().getBreweryModel(cityName: cityName);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Demo"),
        ),
        body: FutureBuilder(
            future: breweryObject,
            builder: (context, AsyncSnapshot<List<BreweryModel>> snapshot) {
              switch (snapshot.connectionState) {
                case ConnectionState.none:
                  return Text('none');
                case ConnectionState.waiting:
                  return Center(child: CircularProgressIndicator());
                case ConnectionState.active:
                  return Text('');
                case ConnectionState.done:
                  if (snapshot.hasError) {
                    return Text(
                      '${snapshot.error}',
                      style: TextStyle(color: Colors.red),
                    );
                  } else {
                    return ListView.builder(
                        itemCount: snapshot.data.length,
                        itemBuilder: (context, index) {
                          return Card(
                              elevation: 6.0,
                              child: Padding(
                                padding: const EdgeInsets.only(
                                    top: 6.0,
                                    bottom: 6.0,
                                    left: 8.0,
                                    right: 8.0),
                                child: Row(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: <Widget>[
                                    Text(
                                      snapshot.data[index].name,
                                    ),
                                    Spacer(),
                                    Text(
                                      snapshot.data[index].street,
                                    ),
                                  ],
                                ),
                              ));
                        });
                  }
              }
            }));
  }
}

Upvotes: 3

Christopher Moore
Christopher Moore

Reputation: 17141

The sample JSON here shows an example output that would be a List of what is BreweryModels in your code. So you should be trying to generate a List of BreweryModels. You might not have copied the whole sample JSON when you used the JSON to dart converter. The following is a sample fix that handles the List that is received properly, but what you actually need may vary depending on your intended application.

Network class:

Returning a List of BreweryModels:

Future<List<BreweryModel>> getBreweryModel({String cityName}) async {
    var URL = 'https://api.openbrewerydb.org/breweries?by_city=$cityName';

    final response = await get(Uri.encodeFull(URL));

    print('URL ${Uri.encodeFull(URL)}');

    if (response.statusCode == 200) {
      print(response.body);
      List<BreweryModel> toReturn = List()
      List json = json.decode(response.body);
     
      for(Map unparsed in json) {
        toReturn.add(BreweryModel.fromJson(unparsed);
      }

      return toReturn;
    } else {
      throw Exception('Error getting brewery');
    }
  }

or if you only expect a single brewery in the received JSON:

Future<BreweryModel> getBreweryModel({String cityName}) async {
    var URL = 'https://api.openbrewerydb.org/breweries?by_city=$cityName';

    final response = await get(Uri.encodeFull(URL));

    print('URL ${Uri.encodeFull(URL)}');

    if (response.statusCode == 200) {
      print(response.body);
      return BreweryModel.fromJson(json.decode(response.body)[0]);
    } else {
      throw Exception('Error getting brewery');
    }
  }

Upvotes: 1

Related Questions