How can I iterate over an array of objects which belong to a key value - Flutter

Question

I have a list of data called anchors that has a link to a detailed screen. And each anchor has distribution centers which are an array of nested objects. so I was able to parse

Answer 1

IF you want all addresses inside DistributionCentres

Column(
       children: <Widget>[
            Text(value[1]['Name']),
            Text(value[1]['Oid'].toString()),
            ListView.builder(
            itemCount:value[1]['DistributionCentres'].length
            context:context,
            builder:(BuilderContext context, int i){
             return Text(value[1]['DistributionCentres'][i]['Address'])
            }))
          ],
        ),

IF you want one address

Text(value[1]['DistributionCentres'][1]['Address'])

Like to remind for the value[1] you can pass the selected id from previous screen and used it here as value[selected id],

Hope this helps..

Answer 2

I recommend you to use data classes for such situations.

import 'package:flutter/material.dart';

List<Anchor> _parseAnchors(Map<String, dynamic> map) {
  final anchors = <Anchor>[];
  for (var anchorMap in map['Anchors']) {
    final anchor = Anchor.fromMap(anchorMap);
    anchors.add(anchor);
  }
  return anchors;
}

class Anchor {
  final int oId;
  final String name;
  final String acronym;
  final List<DistributionCenter> distributionCenters;

  const Anchor({
    @required this.oId,
    @required this.name,
    @required this.acronym,
    @required this.distributionCenters,
  });

  factory Anchor.fromMap(Map<String, dynamic> map) {
    final distributionCenters = <DistributionCenter>[];
    for (var distribution in map['DistributionCentres']) {
      final distributionCenter = DistributionCenter.fromMap(distribution);
      distributionCenters.add(distributionCenter);
    }

    return Anchor(
      oId: map['Oid'] as int,
      name: map['Name'] as String,
      acronym: map['Acronym'] as String,
      distributionCenters: distributionCenters,
    );
  }
}

class DistributionCenter {
  final int id;
  final String name;
  final String address;

  const DistributionCenter({
    @required this.id,
    @required this.name,
    @required this.address,
  });

  factory DistributionCenter.fromMap(Map<String, dynamic> map) {
    return DistributionCenter(
      id: map['Oid'] as int,
      name: map['Name'] as String,
      address: map['Address'] as String,
    );
  }
}

class AnchorPage extends StatelessWidget {
  // details page
  final Anchor anchor;

  @override
  const AnchorPage({Key key, @required this.anchor}) : super(key: key);

  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Text(anchor.name),
      ),
    );
  }
}

class AnchorsPage extends StatefulWidget {
  const AnchorsPage({Key key}) : super(key: key);

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

class _AnchorsPageState extends State<AnchorsPage> {
  static const anchorsMap = {
    "Anchors": [
      {
        "Oid": 11,
        "Name": "MAIZE ASSOCIATION OF NIGERIA",
        "Acronym": "MAAN",
        "DistributionCentres": [
          {
            "Oid": 11,
            "Name": "Logo Centre (Zone A)",
            "Address": "Private Warehouse, Ugba, Logo LGA"
          },
          {
            "Oid": 12,
            "Name": "Makurdi Centre (Zone B)",
            "Address": "Ministry of Agric, Makurdi "
          },
          {
            "Oid": 13,
            "Name": "Oturkpo Centre (Zone C)",
            "Address": "Private Warehouse, Oturkpo"
          },
          {
            "Oid": 15,
            "Name": "Borno MAAN centre",
            "Address": "Bolori Store, Flavour Mill, Behind Vita Foam, Maiduguri"
          },
          {
            "Oid": 18,
            "Name": "Bauchi Centre",
            "Address": "BASPD, Dass Road, Bauchi"
          }
        ],
        "NoOfDistributionCentres": 5
      },
      {
        "Oid": 2,
        "Name":
            "MAIZE GROWERS, PROCESSORS AND MARKETERS ASSOCIATION OF NIGERIA",
        "Acronym": "MAGPAMAN",
        "DistributionCentres": [
          {
            "Oid": 2,
            "Name": "Guma Centre",
            "Address":
                "P 32, 2nd Avenue Federal Housing Estate, N/Bank, Makurdi"
          },
          {
            "Oid": 3,
            "Name": "Logo Centre",
            "Address": "Terhemen Akema Storage Facility, Ugba, Logo LGA"
          },
          {
            "Oid": 5,
            "Name": "Oturkpo Centre",
            "Address": "Grain Store, Lower Benue Okele Project, Otukpo"
          },
          {
            "Oid": 6,
            "Name": "Gboko Centre",
            "Address":
                "K3 New Road, Opposite former coca cola plant. Solar Schools Street, 
    Gboko"
          },
          {
            "Oid": 7,
            "Name": "Gwer East Centre",
            "Address":
                "Ahua Shardye's Warehouse, Behind Sylkan Filling Station, Ikpayongo , 
  G/East LGA"
          },
          {
            "Oid": 8,
            "Name": "Kwande Centre",
            "Address": "KM 3, Adagi Road, Adikpo"
          },
          {
            "Oid": 9,
            "Name": "Ohimini Centre",
            "Address": "Ajoga Oglewu, Ohimini"
          },
          {
            "Oid": 10,
            "Name": "Oju Centre",
            "Address": "Behind Town Hall, Ohuhu owo, Oju LGA"
          }
        ],
        "NoOfDistributionCentres": 8
      }
    ],
  };
  final _anchors = <Anchor>[];

  @override
  Widget build(BuildContext context) {
    // now you can use the anchors list here
    return Scaffold(
      body: ListView.builder(
        itemCount: _anchors.length,
        itemBuilder: (context, index) {
          final anchor = _anchors[index];
          return ListTile(
            title: Text(anchor.name),
            subtitle: Text(anchor.acronym),
            trailing: Text(anchor.distributionCenters?.length?.toString()),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => AnchorPage(anchor: anchor),
                ),
              );
            },
          );
        },
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    final anchors = _parseAnchors(anchorsMap);
    _anchors.addAll(anchors);
  }
}

Answer 3

Here is the Sketch that describes what I want to achieve Below. When Users click on an anchor it takes you to that single anchor details page where you will see all the distribution centers belonging to and anchor from there you can now add a record add the record that pertains to a center.