I'm new to flutter, flutter_bloc library particularly with cubits.

I'm trying to populate dynamic data from 3 different api calls to DataTables using cubits.

The pattern is as follows:

• Gather the parameters needed for 2nd table from 1st Table, after 1st Table is loaded (done)
• Gather parameters needed for 3rd table from the 2nd table (done)

The problem is triggering the cubit with methods don't populate the DataTables

context.read<ReceivingListDetailCubit>().getRcvwork8010F_20Q(datamap10Q['rcv_dt'], datamap10Q['rcv_seq']);

Currently I temporarily place this code inside BlocBuilder for the 1st Table which is not quite right.

Where should I placed the context.read<> code? I tried putting it inside the listener of BlocConsumer but it seems it doesn't execute it

I tried my best to read and understand about cubits unfortunately, and due to lack of examples regarding dynamic data, I was unable to make this work.

Here are the codes

eighty_ten_tablet_pg2.dart

class EightyTenTabletPg2 extends StatefulWidget {
  late String recvNo;

  EightyTenTabletPg2({Key? key, required this.recvNo}) : super(key: key);


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

class _EightyTenTabletPg2State extends State<EightyTenTabletPg2> {

  var datamap10Q = {};
  var datamap20Q = {};
  var combinedMap = {};
  var dataList = [];


  void handleSelectedIndex(int val) {
    setState(() {
      selectedIndex = val;
      print('selectedIndex is $val');
    });
  }

  //Table 1 Columns
  List<DataColumn> _createColumns_10Q() {
    return [
      const DataColumn(label: Text('Date Received')),
      const DataColumn(numeric: truelabel: Text('Queue')),
      const DataColumn(label: Text('Receiving Status')),
      const DataColumn(label: Text('Supplicer code')),
      const DataColumn(label: Text('Account Name')),
      const DataColumn(label: Text('Receiving Type')),
      const DataColumn(numeric: true,label: Text('Count')),
    ];
  }

  //Table 1 Rows
  List<DataRow> _createRows_10Q(receivingList) {

    List<DataRow> rcvRows = [];

    if(receivingList.length > 0) {
      for(int x=0; x < receivingList.length; x++ ) {

        datamap10Q['rcv_dt'] = receivingList[x].rcv_dt;
        datamap10Q['rcv_seq']  = receivingList[x].rcv_seq.toString();
        print("datamap10Q: ${datamap10Q['rcv_dt']} ${datamap10Q['rcv_seq']}");

        rcvRows.add(
            DataRow(
                onSelectChanged: (val) {
                  handleSelectedIndex((x+1));
                },
                cells: [
                  DataCell(Text(receivingList[x].rcv_dt)),
                  DataCell(Text(receivingList[x].rcv_seq.toString())),
                  DataCell(Text(receivingList[x].rcv_status_nm)),
                  DataCell(Text(receivingList[x].cust_cd)),
                  DataCell(Text(receivingList[x].cust_nm)),
                  DataCell(Text(receivingList[x].rcv_type_nm)),
                  DataCell(Text(receivingList[x].item_cnt.toString())),
                ]
            )
        );
      }

    } else {
      rcvRows.add(
          const DataRow(
              cells: <DataCell>[
                DataCell(Text('')),
                DataCell(Text('')),
                DataCell(Text('')),
                DataCell(Text('')),
                DataCell(Text('No rows to show.')),
                DataCell(Text('')),
                DataCell(Text('')),
                DataCell(Text('')),
                DataCell(Text('')),
                DataCellText('')),
                DataCell(Text('')),
                DataCell(Text('')),
                DataCell(Text('')),
              ]
          )
      );
    }
    return rcvRows;
  }

  //Table 1
  DataTable _createDataTable_10Q(state) {
    return DataTable(
      columns: _createColumns_10Q(),
      rows: _createRows_10Q(state.rcvLists),
    );
  }

  //Table 2 Columns
  List<DataColumn> _createColumns_20Q() {
    return [
      const DataColumn(numeric: true,label: Text('No')),
      const DataColumn(numeric: true,label: Text('Queue')),
      const DataColumn(label: Text('Receiving Status')),
      const DataColumn(label: Text('Item Code')),
      const DataColumn(label: Text('Item Name')),
      const DataColumn(label: Text('Unit')),
      const DataColumn(label: Text('Unit Mng')),
      const DataColumn(label: Text('Expiration Type')),
      const DataColumn(numeric: true,label: Text('Shelf Life')),
      const DataColumn(numeric: true,label: Text('Order Qty')),
      const DataColumn(numeric: true,label: Text('Received Qty')),
      const DataColumn(numeric: true,label: Text('Inspected Qty')),
      const DataColumn(label: Text('Storage Loc')),
    ];
  }
  //Table 2
  List<DataRow> _createRows_20Q(rcvListDetail) {

    List<DataRow> rcvDetailRows = [];

    if(rcvListDetail.length > 0) {
      for(int x=0; x < rcvListDetail.length; x++ ) {

        // I tried to store certain columns for calling on a cubit's method later
        datamap20Q['dtlSeq'] = rcvListDetail[x].dtl_seq.toString();
        combinedMap['rcv_dt'] = datamap10Q['rcv_dt'];
        combinedMap['rcv_seq'] = datamap10Q['rcv_seq'];
        combinedMap['dtlSeq'] = datamap20Q['dtlSeq'];
        dataList.add(combinedMap);
        print('combinedMap: $combinedMap');
        print('dataList: $dataList');

        rcvDetailRows.add(
            DataRow(
                onSelectChanged: (val) {
                  handleSelectedIndex((x+1));
                },
                cells: [
                  DataCell(Text('${x+1}')),
                  DataCell(Text(rcvListDetail[x].dtl_seq.toString())),
                  DataCell(Text(rcvListDetail[x].rcv_status_nm)),
                  DataCell(Text(rcvListDetail[x].item_cd)),
                  DataCell(Text(rcvListDetail[x].item_nm)),
                  DataCell(Text(rcvListDetail[x].item_unit)),
                  DataCell(Text(rcvListDetail[x].item_mng_unit_nm)),
                  DataCell(Text(rcvListDetail[x].vld_mng_type_nm)),
                  DataCell(Text(rcvListDetail[x].vld_day.toString())),
                  DataCell(Text(rcvListDetail[x].ord_qty.toString())),
                  DataCell(Text(rcvListDetail[x].rcv_qty.toString())),
                  DataCell(Text(rcvListDetail[x].insp_qty.toString())),
                  DataCell(Text(rcvListDetail[x].keep_loc.toString())),
                ]
            )
        );
      }

    } else {
      rcvDetailRows.add(
          const DataRow(
              cells: <DataCell>[
                DataCell(Text('')),
                DataCell(Text('')),
                DataCell(Text('')),
                DataCell(Text('')),
                DataCell(Text('No rows to show.')),
                DataCell(Text('')),
                DataCell(Text('')),
                DataCell(Text('')),
                DataCell(Text('')),
                DataCellText('')),
                DataCell(Text('')),
                DataCell(Text('')),
                DataCell(Text('')),
              ]
          )
      );
    }
    return rcvDetailRows;
  }

  // Table 2
  DataTable _createDataTable_20Q(state) {
    return DataTable(
      columns: _createColumns_20Q(),
      rows: _createRows_20Q(state.rcvListDetail),
    );
  }

  // Table 3
  List<DataColumn> _createLotWarehousingColumns() {
    return [
      const DataColumn(numeric: true,label: Text('No')),
      const DataColumn(numeric: true,label: Text('Queue')),
      const DataColumn(label: Text('Expiration Date')),
      const DataColumn(label: Text('LOT')),
      const DataColumn(numeric: truelabel: Text('Received Qty')),
    ];
  }
  // Table 3
  List<DataRow> _createLotWarehousingRows(lotWarehousingLists) {

    int selectedIndex = -1;

    List<DataRow> lotWarehousingRows = [];

    for(int x=0; x < lotWarehousingLists.length; x++ ) {
      lotWarehousingRows.add(
          DataRow(
              selected: x == selectedIndex,
              onSelectChanged: (val) {
                // handleSelectedIndex((x+1));
                setState(() {
                  selectedIndex = x;
                });
              },
              cells: [
                DataCell(Text('${x+1}')),
                DataCell(Text(lotWarehousingLists[x].lot_seq.toString())),
                DataCell(Text(lotWarehousingLists[x].vld_dt)),
                DataCell(Text(lotWarehousingLists[x].lot_no)),
                DataCell(Text(lotWarehousingLists[x].rcv_qty.toString())),
              ]
          )
      );
    }
    return lotWarehousingRows;
  }
  // Table 3
  DataTable _createLotWarehousingDataTable(state) {
    
    return DataTable(
      columns: _createLotWarehousingColumns(),
      rows: _createLotWarehousingRows(state.lotWarehousingLists),
    );
  }

  Widget buildCommonBtn({
    required String text,
    required String color,
    VoidCallback? onTap
  }) {

    MaterialColor appliedColor = Colors.blue;

    if(color == 'red') {
      appliedColor = Colors.red;
    }

    return SizedBox(
      height: 50,
      child: ElevatedButton(
        child: Text(
          text,
          style: const TextStyle(
            fontSize: 22.0,
            fontWeight: FontWeight.bold,
          ),
        ),
        style: ElevatedButton.styleFrom(
          primary: appliedColor,
        ),
        onPressed: onTap,
      ),
    );
  }

  Widget buildDatePicker({
    VoidCallback? onTap
  }) {

    return SizedBox(
      width: 135,
      child: TextField(
        controller: managedDateController,
        style: const TextStyle(
          fontSize: 20.0,
        ),
        decoration: const InputDecoration(
          border: OutlineInputBorder(),

        ),
        onTap: () async {
          var startDate =  await showDatePicker(
              context: context,
              initialDate:DateTime.now(),
              firstDate:DateTime(1900),
              lastDate: DateTime(2100));
          managedDateController.text = startDate.toString().substring(0,10);
        },
      ),
    );
  }

  void selectedItem(BuildContext context, int index) {
    switch (index) {
      case 4:
        print('Index is: $index');
        Navigator.pushNamed(context, route.eightyTenAddLot);
        break;
      default:
        throw('The route does not exist yet.');
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
            automaticallyImplyLeading: true,
            title: const Text('8010 - Receipt Inspection Registration'),
            leading: IconButton(icon: const Icon(Icons.arrow_back),
              onPressed:() => Navigator.pop(context, false),
            )
        ),
        body: MultiBlocProvider(
          providers: [
            BlocProvider<ReceivingListsCubit>(
              create: (context) => ReceivingListsCubit()..getRcvwork8010F_10Q(widget.recvNo),
            ),
            //..getRcvwork8010F_20Q('20211230', '2')
            BlocProvider<ReceivingListDetailCubit>(
              create: (context) => ReceivingListDetailCubit()..getRcvwork8010F_20Q('', ''),
            ),
            //..getRcvWork8010F_30Q('20211230', '2', '1')
            BlocProvider<LotWarehousingListsCubit>(
              create: (context) => LotWarehousingListsCubit()..getRcvWork8010F_30Q('', '', ''),
            ),
          ],
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Builder(
                builder: (context) {
                  return SingleChildScrollView(
                      child: BlocConsumer<ReceivingListsCubit, ReceivingListsStates>(
                        listener: (context, state) {
                          if (state is rlLoadedState) {
                            context.read<ReceivingListDetailCubit>().getRcvwork8010F_20Q(datamap10Q['rcv_dt'], datamap10Q['rcv_seq']);
                            print("10Q listener\ndatamap10Q['rcv_dt']: ${datamap10Q['rcv_dt']}");
                         // I tried here but the datamap10Q values are null I thought the listener will get called during the rlLoadedState state?
                            //context.read<ReceivingListsCubit>().getRcvwork8010F_10Q(widget.recvNo);
                          }
                        },
                        builder: (context, state) {
                          // putting this context.read code works it shows the data for Table 2 but this isn't supposed to be here
                          context.read<ReceivingListDetailCubit>().getRcvwork8010F_20Q(datamap10Q['rcv_dt'], datamap10Q['rcv_seq']);
                          if(state is rlLoadingState) {
                            return const CustomProgressIndicator();
                          } else if(state is rlLoadedState) {
                            return _createDataTable_10Q(state);
                          } else {
                            return Text('No Rows to show');
                          }
                        },
                      )
                  );
                }
              ),
              const SizedBox(
                height: 20.0,
              ),
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 20.0),
                child: Row(
                  children: [
                    // Star
                    Expanded(
                      child: Row(
                        children: const [
                          Icon(
                              Icons.star,
                              color: Colors.red
                          ),
                          Text(
                            'Items Ordered To Be Received',
                            style: TextStyle(
                              fontSize: 22.0,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ],
                      ),
                    ),
                    Expanded(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: <Widget>[
                          buildCommonBtn(
                              text: 'Issue LOT Label',
                              color: '',
                              onTap: () => selectedItem(context, 1)
                          ),
                          const SizedBox(
                            width: 80.0,
                          ),
                          buildCommonBtn(
                              text: 'Confirmation',
                              color: '',
                              onTap: () => selectedItem(context, 1)
                          ),
                          const SizedBox(
                            width: 30.0,
                          ),
                          buildCommonBtn(
                              text: 'Insp Cancel',
                              color: 'red',
                              onTap: () => selectedItem(context, 1)
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              const SizedBox(
                height: 10.0,
              ),
              Flexible(
                child: Padding(
                  padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 20.0),
                  child: SingleChildScrollView(
                    scrollDirection: Axis.horizontal,
                    child: BlocBuilder<ReceivingListDetailCubit, ReceivingListDetailStates>(
                        // listener: (context, state) {
                        //   if(state is rldLoadedState) {
                        //     print('listener 20Q');
                        //     print("datamap10Q['rcv_dt']: ${datamap10Q['rcv_dt']}");
                        //
                        //   }
                        // },
                        builder: (context, state) {
                          if(state is rldLoadingState) {
                            return const CustomProgressIndicator();
                          } else if(state is rldLoadedState) {
                            return _createDataTable_20Q(state);
                          } else {
                            return Text('No Rows to show');
                          }
                        }
                    ),
                  ),
                ),
              ),
              const SizedBox(
                height: 15.0,
              ),
              Column(children: [
                SizedBox(
                  width: 650,
                  child: Row(
                    children: [
                      Expanded(
                        child: Row(
                          children: const [
                            Icon(
                                Icons.star,
                                color: Colors.red
                            ),
                            Text(
                              'LOT Warehousing',
                              style: TextStyle(
                                fontSize: 22.0,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ],
                        ),
                      ),
                      Expanded(
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: <Widget>[
                            buildCommonBtn(
                                text: 'Add LOT',
                                color: '',
                                onTap: () => selectedItem(context, 4)
                            ),
                            const SizedBox(
                                width: 25.0
                            ),
                            buildCommonBtn(
                                text: 'Delete LOT',
                                color: 'red',
                                onTap: () => selectedItem(context, 6)
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
                const SizedBox(
                  height: 10.0,
                ),
                Padding(
                  padding: const EdgeInsets.only(left: 20.0),
                  child: BlocBuilder<LotWarehousingListsCubit, LotWarehousingListsStates>(
                    builder: (context, state) {
                      if(state is lwlLoadingState) {
                        return const CustomProgressIndicator();
                      } else if(state is lwlLoadedState) {
                        return _createLotWarehousingDataTable(state);
                      } else {
                        return const Text('No Rows to show');
                      }
                    }
                  ),
                ),
              ],
              )
            ],
          ),
        ),
      ),
    );
  }
}