How to render a Map in FLutter?

Question

I have this Account class

import 'package:project/models/category_model.dart';

enum AccountTypes {
  cash,
  banks,
}

class Account {
  AccountTypes type;
  double value;
  List<BalnceCategory>? categories;

  Account({
    required this.type,
    required this.value,
    this.categories,
  });

  Map<String, dynamic> toJSON() {
    return {
      "type": type,
      "value": value,
      "categories": categories,
    };
  }
}

Map<AccountTypes, List<dynamic>> accounts = {
  AccountTypes.cash: [
    BalnceCategory(image: "food.png", title: "Food", value: 412.5).toJSON(),
    BalnceCategory(image: "shopping.png", title: "Shopping", value: 412.5).toJSON(),
  ],
  AccountTypes.banks: [
    BalnceCategory(image: "food.png", title: "Food", value: 1242.63).toJSON(),
    BalnceCategory(image: "shopping.png", title: "Shopping", value: 1242.63).toJSON(),
  ]
};

each Account should contain a list of BalnceCategory

class BalnceCategory {
  String image;
  String title;
  double value;

  BalnceCategory({
    required this.image,
    required this.title,
    required this.value,
  });

  Map<String, dynamic> toJSON() {
    return {
      "image": image,
      "title": title,
      "value": value,
    };
  }
}

Now I want to display this Map Map<AccountTypes, List<dynamic>> accounts in two sections...I will refer to this map as accounts. So in the first section I want to list all available accounts in something like a Row with a button for each account, so what I did is I mapped through accounts like this accounts.entries.map and returned a button for each account, and these buttons can set a state called currentIndex with it's index.

Now in the second section I want to list all accounts categories depending on the currentIndex state value, so for example if the currentIndex value is 0 I want to display all the categories in cash account, and if the currentIndex value is 1 I want to display all the categories in banks account.

So far all I am done the buttons section and I it is working properly and my problem is in the second section. I tried to do this

Expanded(
  child: GridView.builder(
    physics: const BouncingScrollPhysics(),
    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2,
      mainAxisSpacing: mainUnit / 2,
      crossAxisSpacing: mainUnit / 2,
      childAspectRatio: 3 / 4,
    ),
    itemCount: accounts.keys.length,
    itemBuilder: (context, index) {
      return accounts.forEach((key, value) {
        if (key.index == currentIndex) {
          value.map((e) => {Text(e.toString())});
        }
      });
    },
  ),
),

but it gives me this error: The return type 'void' isn't a 'Widget', as required by the closure's context.

Answer 1

The ItemBuilder should return a widget, you return accounts.forEach(...) that is a void function ( forEach() is a void function/closure).

Try this:

  Text(  accounts.keys.firstWhere( (item) => item.index == currentIndex,
orElse: ()=> "",).toString() );

BUT!!!! Wait a moment!!!!! Why don't you take a look at https://pub.dev/packages/flutter_sticky_header

You should implement what you need: it displays an header that, in your case, could be a string AccountTypes.cash.toString() or AccountTypes.banks.toString(), and then follow the example and you should obtain what you need ( display grouped cards for AccountTypes ). more over I suggest you to use

https://pub.dev/packages/freezed

It helps you to defined your data class, and to Serialize then to JSON.

For Example:

import 'package:freezed_annotation/freezed_annotation.dart';

part 'account.g.dart';
part 'account.freezed.dart';

@freezed()
class Account with _$Account {

factory Account.cash({
   @Default(0) double? value;
   List<BalnceCategory>? categories;
 }) = CashAccount;

factory Account.bank({
   @Default(0) double? value;
   List<BalnceCategory>? categories;
}) = BankAccount;


 factory Account.fromJson(Map<String, dynamic> json) =>
    _$AccountFromJson(json);
  
}

In that manner you have your data class ( account ) with its type ( cash / bank ) and serializable.

To create an account it is easy :

 var myCash = Account.cash(... , ... );

Both CashAccount and BankAccount are two different classes that implement Account ( abstract class ), you can use it in a simple list of Accounts. then , to chack for bank/cash you can use:

var myAccount = Account.cash(....);

 myAccount.when(
    bank: (BankAccount account) =>  ....,
    cash: (CashAccount account) =>  .... ,
  ),