Визуализировать строки DataTable на 1 странице во Flutter

Я работаю над проектом настольного приложения, используя флаттер. Большинство страниц содержат таблицу для отображения данных. моя проблема в том, что когда я использую обычный DataTable, приложение зависает на 1-3 секунды, чтобы отобразить и нарисовать все строки таблицы на одной странице. С другой стороны, PaginatedDataTable отображает таблицу плавно, но с определенным количеством строк на странице. Мой вопрос: есть ли способ плавно загрузить все строки на одной странице с помощью обычного DataTable?

Вот код страницы

Я заметил, что метод 1 немного быстрее, чем метод 2.

      import 'package:flutter/material.dart';
import 'package:ghiyar/DataModels/product_part.dart';
import 'package:ghiyar/CoreControllers/database_controller.dart';

class PartsPage extends StatefulWidget {
  const PartsPage({Key? key}) : super(key: key);
  @override
  _PartsPageState createState() => _PartsPageState();
}

class _PartsPageState extends State<PartsPage>{

  Future<List<ProductPart>>? _parts;

  @override
  void initState(){
    super.initState();
    _getTripsFromDB();
  }

  @override
  void dispose() {
    super.dispose();
  }

  Future _getTripsFromDB() async{
    List<ProductPart> dbpps = await DatabaseController.getProductParts();
    setState(() { _parts = Future.value(dbpps); });
  }

  ////////////////// method 1 //////////////////
  Widget _getPartsList(List<ProductPart>? pps){
    return SizedBox(
      width: double.infinity,
      child: DataTable(
        columns: const <DataColumn>[
          DataColumn(
            label: Text('Number'),
          ),
          DataColumn(
            label: Text('Number'),
          ),
          DataColumn(
            label: Text('Number'),
          ),
          DataColumn(
            label: Text('Number'),
          ),
        ],
        rows: pps == null ? [] : pps.map((e) => DataRow(
          cells: <DataCell>[
            DataCell(Text(e.number)),
            DataCell(Text(e.number)),
            DataCell(Text(e.number)),
            DataCell(Text(e.number)),
          ],
          selected: true,
        )).toList()
      ),
    );
  }
  //////////////////// method 2 /////////////////////////
  Widget _getPartsList2(List<ProductPart>? pps){
    return SizedBox(
      width: double.infinity,
      child: DataTable(
        columns: const <DataColumn>[
          DataColumn(
            label: Text('Number'),
          ),
          DataColumn(
            label: Text('Number'),
          ),
          DataColumn(
            label: Text('Number'),
          ),
          DataColumn(
            label: Text('Number'),
          ),
        ],
        rows: List<DataRow>.generate(
            pps != null ? pps.length : 0,
                (index) => DataRow(
                  color: MaterialStateProperty.resolveWith<Color?>(
                      (Set<MaterialState> states) {
                        // All rows will have the same selected color.
                        if (states.contains(MaterialState.selected)) {
                          return Theme.of(context).colorScheme.primary.withOpacity(0.08);
                        }
                        // Even rows will have a grey color.
                        if (index.isEven) {
                          return Colors.grey.withOpacity(0.3);
                        }
                        return null; // Use default value for other states and odd rows.
                  }),
                  cells: <DataCell>[
                    DataCell(Text(pps![index].number)),
                    DataCell(Text(pps![index].number)),
                    DataCell(Text(pps![index].number)),
                    DataCell(Text(pps![index].number)),
                  ],
                  selected: true,
                  onSelectChanged: (bool? value) {
                    setState(() {
                      //selected[index] = value!;
                    });
                  },
                )
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Column(
        children: [
          Padding(
            padding: EdgeInsets.symmetric(vertical: 10.00, horizontal: 10.00),
            child: SingleChildScrollView(
              child: Center(
                child: Text('control'),
              ),
            ),
          ),
          Expanded(
            child: SingleChildScrollView(
              child: Padding(
                padding: const EdgeInsets.symmetric(vertical: 10.00, horizontal: 0.00),
                child: FutureBuilder<List<ProductPart>>(
                  future: _parts,
                  builder: (context, snapshot){
                    if (snapshot.hasError) {
                      return const Center(
                        child: Text('Unexpected error has occurred! Please refresh the page'),
                      );
                    } else if (snapshot.hasData) {
                      return _getPartsList(snapshot.data);
                    } else {
                      return const Center(
                          child: Center(child: CircularProgressIndicator(color: Color(0xff87c94d), strokeWidth: 10),)
                      );
                    }
                  },
                ),
              ),
            )
          )
        ],
      ),
    );
  }
}

0 ответов

Другие вопросы по тегам