Handling large data- Table Paginating about pluto_grid HOT 27 CLOSED

stateManager.setPage()
stateManager.setPageSize()
stateManager.page
stateManager.pageSize
stateManager.totalPage
stateManager.setShowLoading()

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:pluto_grid/pluto_grid.dart';

import '../dummy_data/development.dart';

class EmptyScreen extends StatefulWidget {
  static const routeName = 'empty';

  const EmptyScreen({Key? key}) : super(key: key);

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

class _EmptyScreenState extends State<EmptyScreen> {
  final List<PlutoColumn> columns = DummyData.textColumns(5);

  final List<PlutoRow> rows = [];

  final List<PlutoRow> fakeFetchedRows = [];

  late PlutoGridStateManager stateManager;

  final int pageSize = 30;

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

    /// 100 data generation for fake server data.
    fakeFetchedRows.addAll(
      DummyData.rowsByColumns(length: 100, columns: columns),
    );
  }

  Future<_PaginationData> fetch(
    _PaginationParams params,
  ) async {
    /// Get data from server.
    final start = (params.page - 1) * pageSize;
    final end = min(start + pageSize, fakeFetchedRows.length);
    final fetchRows = fakeFetchedRows.getRange(start, end);
    await Future.delayed(const Duration(seconds: 1));

    /// Change server data to Map<String, dynamic> type.
    return Future.value(
      _PaginationData(
        totalPage: (fakeFetchedRows.length / pageSize).ceil(),
        rows: fetchRows
            .map(
              (e) => e.cells.map<String, dynamic>(
                (key, value) => MapEntry(key, value.value),
              ),
            )
            .toList(),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          padding: const EdgeInsets.all(15),
          child: PlutoGrid(
            columns: columns,
            rows: rows,
            onChanged: (PlutoGridOnChangedEvent event) {
              print(event);
            },
            onLoaded: (PlutoGridOnLoadedEvent event) {
              stateManager = event.stateManager;
            },
            configuration: const PlutoGridConfiguration(),
            createFooter: (s) => PlutoPaginationServerSide(s, fetch: fetch),
          ),
        ),
      ),
    );
  }
}

class PlutoPaginationServerSide extends StatefulWidget {
  const PlutoPaginationServerSide(
    this.stateManager, {
    required this.fetch,
    super.key,
  });

  final PlutoGridStateManager stateManager;

  final Future<_PaginationData> Function(
    _PaginationParams params,
  ) fetch;

  @override
  State<PlutoPaginationServerSide> createState() =>
      _PlutoPaginationServerSideState();
}

class _PlutoPaginationServerSideState extends State<PlutoPaginationServerSide> {
  PlutoGridStateManager get stateManager => widget.stateManager;

  final int initialPage = 1;

  int totalPage = 0;

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

    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      setPage(initialPage);
    });
  }

  Future<void> setPage(int page) async {
    stateManager.setShowLoading(true, level: PlutoGridLoadingLevel.rows);

    final data = await widget.fetch(
      _PaginationParams(page: page),
    );

    if (totalPage != data.totalPage) setState(() => totalPage = data.totalPage);

    stateManager.refRows.clearFromOriginal();
    stateManager.insertRows(
      0,
      data.rows
          .map(
            (e) => PlutoRow(
              cells: {
                for (var v in e.entries) v.key: PlutoCell(value: v.value)
              },
            ),
          )
          .toList(),
    );

    stateManager.setShowLoading(false);
  }

  @override
  Widget build(BuildContext context) {
    return _PaginationWidget(
      iconColor: stateManager.style.iconColor,
      disabledIconColor: stateManager.style.disabledIconColor,
      activatedColor: stateManager.style.activatedBorderColor,
      iconSize: stateManager.style.iconSize,
      height: stateManager.footerHeight,
      initialPage: initialPage,
      totalPage: totalPage,
      setPage: setPage,
    );
  }
}

class _PaginationData {
  _PaginationData({
    required this.totalPage,
    required this.rows,
  });

  final int totalPage;

  final List<Map<String, dynamic>> rows;
}

class _PaginationParams {
  _PaginationParams({
    required this.page,
  });

  final int page;
}

class _PaginationWidget extends StatefulWidget {
  const _PaginationWidget({
    required this.iconColor,
    required this.disabledIconColor,
    required this.activatedColor,
    required this.iconSize,
    required this.height,
    this.initialPage = 1,
    required this.totalPage,
    required this.setPage,
  });

  final Color iconColor;

  final Color disabledIconColor;

  final Color activatedColor;

  final double iconSize;

  final double height;

  final int initialPage;

  final int totalPage;

  final void Function(int page) setPage;

  @override
  State<_PaginationWidget> createState() => _PaginationWidgetState();
}

class _PaginationWidgetState extends State<_PaginationWidget> {
  @override
  void initState() {
    super.initState();

    _page = widget.initialPage;
  }

  int get totalPage => widget.totalPage;

  int _page = 1;

  late double _maxWidth;

  final _iconSplashRadius = PlutoGridSettings.rowHeight / 2;

  bool get _isFirstPage => _page < 2;

  bool get _isLastPage => _page > totalPage - 1;

  /// maxWidth < 450 : 1
  /// maxWidth >= 450 : 3
  /// maxWidth >= 550 : 5
  /// maxWidth >= 650 : 7
  int get _itemSize {
    final countItemSize = ((_maxWidth - 350) / 100).floor();

    return countItemSize < 0 ? 0 : min(countItemSize, 3);
  }

  int get _startPage {
    final itemSizeGap = _itemSize + 1;

    var start = _page - itemSizeGap;

    if (_page + _itemSize > totalPage) {
      start -= _itemSize + _page - totalPage;
    }

    return start < 0 ? 0 : start;
  }

  int get _endPage {
    final itemSizeGap = _itemSize + 1;

    var end = _page + _itemSize;

    if (_page - itemSizeGap < 0) {
      end += itemSizeGap - _page;
    }

    return end > totalPage ? totalPage : end;
  }

  List<int> get _pageNumbers {
    return List.generate(
      _endPage - _startPage,
      (index) => _startPage + index,
    );
  }

  void _firstPage() {
    _movePage(1);
  }

  void _beforePage() {
    int beforePage = _page - 1 + (_itemSize * 2);

    if (beforePage < 1) {
      beforePage = 1;
    }

    _movePage(beforePage);
  }

  void _nextPage() {
    int nextPage = _page + 1 + (_itemSize * 2);

    if (nextPage > totalPage) {
      nextPage = totalPage;
    }

    _movePage(nextPage);
  }

  void _lastPage() {
    _movePage(totalPage);
  }

  void _movePage(int page) {
    setState(() {
      _page = page;
      widget.setPage(page);
    });
  }

  ButtonStyle _getNumberButtonStyle(bool isCurrentIndex) {
    return TextButton.styleFrom(
      disabledForegroundColor: Colors.transparent,
      shadowColor: Colors.transparent,
      padding: const EdgeInsets.fromLTRB(5, 0, 0, 10),
      backgroundColor: Colors.transparent,
    );
  }

  TextStyle _getNumberTextStyle(bool isCurrentIndex) {
    return TextStyle(
      fontSize: isCurrentIndex ? widget.iconSize : null,
      color: isCurrentIndex ? widget.activatedColor : widget.iconColor,
    );
  }

  Widget _makeNumberButton(int index) {
    var pageFromIndex = index + 1;

    var isCurrentIndex = _page == pageFromIndex;

    return TextButton(
      onPressed: () {
        _movePage(pageFromIndex);
      },
      style: _getNumberButtonStyle(isCurrentIndex),
      child: Text(
        pageFromIndex.toString(),
        style: _getNumberTextStyle(isCurrentIndex),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (_, size) {
        _maxWidth = size.maxWidth;

        final Color iconColor = widget.iconColor;

        final Color disabledIconColor = widget.disabledIconColor;

        return Container(
          width: _maxWidth,
          height: widget.height,
          alignment: Alignment.center,
          child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(
              children: [
                IconButton(
                  onPressed: _isFirstPage ? null : _firstPage,
                  icon: const Icon(Icons.first_page),
                  color: iconColor,
                  disabledColor: disabledIconColor,
                  splashRadius: _iconSplashRadius,
                  mouseCursor: _isFirstPage
                      ? SystemMouseCursors.basic
                      : SystemMouseCursors.click,
                ),
                IconButton(
                  onPressed: _isFirstPage ? null : _beforePage,
                  icon: const Icon(Icons.navigate_before),
                  color: iconColor,
                  disabledColor: disabledIconColor,
                  splashRadius: _iconSplashRadius,
                  mouseCursor: _isFirstPage
                      ? SystemMouseCursors.basic
                      : SystemMouseCursors.click,
                ),
                ..._pageNumbers.map(_makeNumberButton).toList(),
                IconButton(
                  onPressed: _isLastPage ? null : _nextPage,
                  icon: const Icon(Icons.navigate_next),
                  color: iconColor,
                  disabledColor: disabledIconColor,
                  splashRadius: _iconSplashRadius,
                  mouseCursor: _isLastPage
                      ? SystemMouseCursors.basic
                      : SystemMouseCursors.click,
                ),
                IconButton(
                  onPressed: _isLastPage ? null : _lastPage,
                  icon: const Icon(Icons.last_page),
                  color: iconColor,
                  disabledColor: disabledIconColor,
                  splashRadius: _iconSplashRadius,
                  mouseCursor: _isLastPage
                      ? SystemMouseCursors.basic
                      : SystemMouseCursors.click,
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}