Flutter: type 'List<dynamic>' is not a subtype of type 'List<Model>'

user_16943155 0
Viewed 1108

I'm new to Flutter and I'm stuck.

Context: I'm fetching a list of data from Firestore:

Future<List<AccountGroup>> fetchAccountGroup() async {
    final res = await ref.get();
    return res.docs
        .map((doc) => AccountGroup(
            id: doc.id, title: doc.data().title, accounts: doc.data().accounts))
        .toList();
  }

Using this model:

import 'package:budget_er/models/account.dart';

class AccountGroup {
  final String? id;
  final String title;
  final List<Account> accounts;

  AccountGroup({this.id, required this.title, required this.accounts});

  AccountGroup.fromJson(Map<String, Object?> json)
      : this(
          title: json['title']! as String,
          accounts: json['accounts'] as List<Account>,
        );

  Map<String, Object?> toJson() {
    return {
      'title': title,
      'accounts': accounts,
    };
  }
}

This is the Account model that I'm trying to cast to json['accounts'].

class Account {
  int balance;
  String label;
  String accountGroupId;

  Account(
      {required this.balance,
      required this.label,
      required this.accountGroupId});

  Account.fromJson(Map<String, Object?> json)
      : balance = json['balance'] as int,
        label = json['label'] as String,
        accountGroupId = json['accountGroup'] as String;

  Map<String, Object?> toJson() {
    return {
      "balance": balance,
      "label": label,
      "accountGroupId": accountGroupId
    };
  }
}

however it produces this error:

The following _TypeError was thrown building FutureBuilder<dynamic>(dirty, state:
_FutureBuilderState<dynamic>#692ef):
type 'List<dynamic>' is not a subtype of type 'List<Account>' of 'function result'

I'm rendering the fetched data like this:

final renderGroups = groups.map((group) => Row(
                children: [
                  Text(group.title),
                  ...group.accounts.map((account) {
                    return SummaryItem(
                        balance: formatMoney(account.balance),
                        label: account.label);
                  })
                ],
              ));

I tried casting it with as just like in TypeScript but to no effect. Thanks!

google-cloud-firestore firebase dart flutter
1 Answers

Probably a noob mistake.

  • The error basically says that I have the wrong subtype.
  • So on my fetch method, I mapped the property that has an error and create a new list of objects using the Model (Account) class.

Like this:

Future<List<AccountGroup>> fetchAccountGroup() async {
    final res = await ref.get();
    return res.docs.map((doc) {
      final data = doc.data();

      final newAccounts = data.accounts.map((account) {
        return Account(
            balance: account['balance'],
            label: account['label'],
            accountGroupId: account['accountGroupId']);
      }).toList();

      return AccountGroup(id: doc.id, title: data.title, accounts: newAccounts);
    }).toList();
  }
user_169431550
Related