1

Estoy desarrollando una aplicación en Flutter y tengo una PaginatedDataTable con datos traídos desde una API. Mi objetivo es que cuando se le haga click a una fila se cambie el color de la fila y se dispare una función determinada que muestra más datos (esto último ya lo hace), y que cuando se le haga click a otra fila, la fila anterior vuelva al color "default" por así decirlo.

No adjunto las cosas que intenté porque no se me ocurre como desarrollarlo pero adjunto mi código. Muchísimas gracias de antemano!!

Mi DataTableSource:

class DTS extends DataTableSource {
  int selectedIndex = -1;
  // int lastSelectedIndex = -1;

  DTS(List<Articulo> articulosData, BuildContext context) {
    this.data = articulosData;
    this.context = context;
  }
  Color rowColor = Colors.white;
  List<Articulo> data = [];
  BuildContext? context;

  _createRow(int index) {
    return DataRow(
      color: MaterialStateColor.resolveWith((states) => rowColor),
      selected: data[index].id == selectedIndex,
      onSelectChanged: (value) {
        // lastSelectedIndex = selectedIndex;
        selectedIndex = data[index].id;
        _mostrarAlertInfo(context!, index);
        rowColor = Colors.blue.shade100;
      },
      cells: <DataCell>[
        DataCell(Container(
          child: Text(
            data[index].descripcionLarga,
          ),
          width: 150,
        )),
        DataCell(
          Text('${data[index].codigoDeBarras}'),
        ),
        DataCell(Text('\$${data[index].precioVenta}')),
        DataCell(Text('\$' +
            (data[index].precioVenta +
                    ((data[index].precioVenta *
                        data[index].porcentajeIva /
                        100)))
                .toStringAsFixed(4)))
      ],
    );
  }

  @override
  DataRow? getRow(int index) {
    return _createRow(index);
  }

  @override
  bool get isRowCountApproximate => false;

  @override
  int get rowCount => data.length;

  @override
  int get selectedRowCount => 0;

  void _mostrarAlertInfo(BuildContext context, index) {}

Mi Screen:

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

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

class _ArticulosScreenState extends State<ArticulosScreen> {
  late Future<List<Articulo>> _listadoArticulos;

  List<Articulo> articulosData = [];

  final _headerTextStyle = TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.w800,
  );

  List<Articulo> articulos = [];
  List<Articulo> filteredArticulos = [];
  @override
  void initState() {
    super.initState();
    final authService = Provider.of<AuthService>(context, listen: false);
    final apiService = Provider.of<ApiService>(context, listen: false);
    _listadoArticulos = apiService.getArticulos(authService.respToken);
    _listadoArticulos.then((value) {
      if (!this.mounted) return;
      setState(() {
        articulos = apiService.articulos;
        filteredArticulos = articulos;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Artículos'),
        toolbarHeight: 65,
      ),
      body: articulos.length > 0
          ? Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                _searchBar(),
                filteredArticulos.length > 0
                    ? Expanded(
                        child: FutureBuilder(
                            future: _listadoArticulos,
                            builder: (context,
                                AsyncSnapshot<List<Articulo>> snapshot) {
                              if (snapshot.connectionState ==
                                  ConnectionState.done) {
                                if (snapshot.hasError) {
                                  print(snapshot.error);
                                  return Center(
                                      child: Text('Ha ocurrido un error'));
                                }
                                filteredArticulos.length > 0
                                    ? articulosData = filteredArticulos
                                    : articulosData = snapshot.data!;
                                return articulosTable();
                              }
                              return Center(child: CircularProgressIndicator());
                            }),
                      )
                    : Padding(
                        padding: const EdgeInsets.only(top: 20),
                        child: ListTile(
                          title: Text(
                            'No se encontró el articulo',
                            textAlign: TextAlign.center,
                          ),
                        ),
                      ),
              ],
            )
          : Center(
              child: CircularProgressIndicator(),
            ),
    );
  }

  Widget articulosTable() {
    DataTableSource dts = DTS(articulosData, context);
    var tableItemsCount = dts.rowCount;
    int rowsPerPage = 100;
    return SingleChildScrollView(
        scrollDirection: Axis.vertical,
        physics: BouncingScrollPhysics(),
        child: PaginatedDataTable(
          showFirstLastButtons: true,
          showCheckboxColumn: false,
          columns: <DataColumn>[
            DataColumn(
                label: Container(
              child: Text(
                'Nombre',
                style: _headerTextStyle,
              ),
              width: 150,
            )),
            DataColumn(
                label: Text(
              'Código',
              style: _headerTextStyle,
            )),
            DataColumn(
                numeric: true,
                label: Text(
                  'Precio Venta',
                  style: _headerTextStyle,
                )),
            DataColumn(
                numeric: true,
                label: Text(
                  'Precio + IVA',
                  style: _headerTextStyle,
                ))
          ],
          onPageChanged: (int rows) {
            print(' rows : $rows');
            if (rows != 0) {
              setState(() {
                if (tableItemsCount - rows < rowsPerPage)
                  rowsPerPage = tableItemsCount - rows;
                else
                  rowsPerPage = 100;
              });
              print(' per page: $rowsPerPage');
            }
          },
          rowsPerPage: rowsPerPage > dts.rowCount ? dts.rowCount : rowsPerPage,
          source: dts,
        ));
  }

Mi flutter doctor:

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.5.3, on Microsoft Windows [Versión 10.0.19044.1415], locale es-ES)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[√] Chrome - develop for the web
[√] Android Studio (version 2020.3)
[√] IntelliJ IDEA Community Edition (version 2021.2)
[√] VS Code (version 1.64.2)
[√] Connected device (3 available)

• No issues found!

1 respuesta 1

0

Mira, este post me ayudó a mi y lo implementé en mi código: link aquí. Te detalla todo, solo tienes que agregar unas que otras características de null safety y te funciona bien, tienes la opción para marcar uno y todos, espero y ese post te sirva.

1
  • Hola, gracias por responder! Tengo algunas cosas que no me cierran, podrías adjuntar un ejemplo de como aplicar lo que necesito ? Commented el 16 feb. 2022 a las 13:18

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.