[Bug] PlutoGrid doesn't work well with backend service like firebase

[jesussmile]

I receive data from firebase which i need to show in pluto grid, i checked everything and the data is well received. for some reason if i dont add this code then there is no cells, is this required?

 _stateManager?.removeColumns(_stateManager!
        .columns); // Removes the existing columns from the PlutoGrid.
    _stateManager?.insertColumns(
        0, columns!); // Inserts the new columns into the PlutoGrid.

    _stateManager
        ?.removeAllRows(); // Removes all the existing rows from the PlutoGrid.
    _stateManager
        ?.appendRows(plutoRows); 

This is the full code

import 'package:bha_roster/firebase/firebase_services.dart';
import 'package:flutter/material.dart';
import 'package:pluto_grid/pluto_grid.dart';

class Captain extends StatefulWidget {
  const Captain({
    Key? key,
  }) : super(key: key);

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

class _CaptainState extends State<Captain> {
  List<Map<String, dynamic>> _captainData =
      []; // Holds the data for the PlutoGrid.
  PlutoGridStateManager? _stateManager; // Manages the state of the PlutoGrid.
  List<PlutoColumn>? columns;
  List<PlutoRow>? plutoRows;

  @override
  void initState() {
    super.initState();
    _fetchCaptainData(); // Fetches the captain data from Firebase and updates the PlutoGrid.
    // print('initState');
  }

  Future<void> _fetchCaptainData() async {
    final snapshot = await FirebaseService
        .getCaptainData(); // Retrieves the captain data from Firebase.
    setState(() {
      _captainData =
          snapshot; // Updates the _captainData list with the retrieved data.
      // print(_captainData);
    });
    _updateGrid(); // Updates the PlutoGrid with the new data.
  }

  void _updateGrid() {
    final keys = [
      'S/N',
      'NAME',
      'AKA',
      '42 CLEARANCE',
      'Surkhet/ATR42/72',
      'Tumlingtar/ATR42',
      'Pokhara/72',
      'Simara/72',
      'IP hour',
      'LTC hour',
      'Position',
      'Duty days in 10 days',
      'No of 42',
      'No of 72',
      'Preferrable Shift',
      'Preferrable Offday',
      'Due',
      'Leave',
      'N/S DAY',
      'N/S NIGHT',
      'Unpair'
    ];

    columns = keys.map((key) {
      if (key == '42 CLEARANCE' ||
          key == 'Surkhet/ATR42/72' ||
          key == 'Tumlingtar/ATR42' ||
          key == 'Pokhara/72' ||
          key == 'Simara/72') {
        // If the column name is one of the five columns that require a dropdown list, a PlutoColumn object is created with the PlutoColumnType.select type.
        // The items parameter is used to specify the dropdown options, and the defaultValue parameter is set to 'CLEARED'.
        // The enableColumnFilter parameter is set to false to disable column filtering, and the popupIcon parameter is set to the dropdown icon.
        return PlutoColumn(
            title: key.toUpperCase(),
            field: key,
            type: PlutoColumnType.select(
              ['CLEARED', 'NOT CLEARED'], // Specifies the dropdown options.
              defaultValue: 'CLEARED',

              enableColumnFilter: false,
              popupIcon: Icons.arrow_drop_down,
            ));
      } else {
        // If the column name is not one of the five columns that require a dropdown list, a PlutoColumn object is created with the PlutoColumnType.text type.
        // The width parameter is set to 200 to specify the width of the column.
        return PlutoColumn(
          title: key.toUpperCase(),
          field: key,
          type: PlutoColumnType.text(),

          //width: 200,
        );
      }
    }).toList();

    _captainData.sort((a, b) => int.parse(a['S/N']).compareTo(int.parse(
        b['S/N']))); // Sorts the _captainData list by the 'S/N' column.

    final plutoRows = _captainData.map((captain) {
      final cells = captain.map((key, value) {
        if (key == '42 CLEARANCE' ||
            key == 'Surkhet/ATR42/72' ||
            key == 'Tumlingtar/ATR42' ||
            key == 'Pokhara/72' ||
            key == 'Simara/72') {
          // If the column name is one of the five columns that require a dropdown list, a PlutoCell object is created with the value set to 'CLEARED'.
          return MapEntry(
              key,
              PlutoCell(
                  value:
                      'CLEARED')); // Sets the initial value of the cell to 'CLEARED'.
        } else {
          // If the column name is not one of the five columns that require a dropdown list, a PlutoCell object is created with the value set to the corresponding value in the _captainData list.
          return MapEntry(
              key,
              PlutoCell(
                  value: value ??
                      '')); // Sets the initial value of the cell to the corresponding value in the _captainData list.
        }
      });
      // A PlutoRow object is created with the cells list.
      return PlutoRow(cells: cells);
    }).toList();

    _stateManager?.removeColumns(_stateManager!
        .columns); // Removes the existing columns from the PlutoGrid.
    _stateManager?.insertColumns(
        0, columns!); // Inserts the new columns into the PlutoGrid.

    _stateManager
        ?.removeAllRows(); // Removes all the existing rows from the PlutoGrid.
    _stateManager
        ?.appendRows(plutoRows); // Appends the new rows to the PlutoGrid.
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: SizedBox(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: PlutoGrid(
          mode: PlutoGridMode.selectWithOneTap,
          columns: [], // Empty list of columns.
          rows: [], // Empty list of rows.

          onChanged: (PlutoGridOnChangedEvent event) {},
          onLoaded: (PlutoGridOnLoadedEvent event) {
            _stateManager = event
                .stateManager; // Updates the _stateManager object with the new state of the PlutoGrid.

            _updateGrid(); // Updates the PlutoGrid with the new data.
          },
        ),
      ),
    );
  }
}

How can i get the dropdown menu, works fine if i use local data without backend.

One more question i can I add AutoFit to all the columns by default?

[bastaware]

You need to call _stateManager.notifyListeners();

[jesussmile]

@bastaware hi! How exactly do I use it and where ?

[bastaware]

Hi @jesussmile

I'm doing this: sm.appendRows(rows); sm.notifyListeners();

Have you seen https://pluto.weblaze.dev/add-and-remove-columns-and-rows

And remember that you can search the issues here.

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity.

[github-actions[bot]]

This issue was closed because it has been inactive for 14 days since being marked as stale.