UI Config

Configure Loading, Refreshing, and empty state UI

Default UI cofig

LoadingHelper

Refresh header

Scroll up to down to refresh the page

class AppUiConfig extends AppUI {
  @override
  Widget refreshHeader({String? releaseText, String? refreshingText, String? completeText, TextStyle? style}) {
    return MaterialClassicHeader();
  }
}

Loadmore footer

Scroll down to up to load more data

@override
  Widget loadMoreFooter({
    String? noDataText,
    String? loadingText,
    String? canLoadingText,
    String? idleText,
    TextStyle style = const TextStyle(color: Colors.grey),
  }) {
    return CustomFooter(
      height: 100,
      builder: (context, mode) {
        return RefreshFooter(
          status: mode,
          loadFailHint: idleText ?? Ids.loadingCompleted.trn,
          loadingHint: loadingText ?? Ids.dataIsLoading.trn,
          loadMoreHint: loadingText ?? Ids.dataIsLoading.trn,
          noDataHint: noDataText ?? "",
        );
      },
    );
  }

Loading page

During load the data page should be display LoadingWidget

  @override
  Widget loadingPage() {
    return CircularProgressIndicatorWidget();
  }

Empty page

If data return empty, page should be display empty

  @override
  Widget emptyPage(VoidCallback refreshCallback, String? tip) {
    return Text(
      Ids.youDontHaveAnyData.trn,
      style: TextStyle(fontSize: 17.sp, color: Colours.primaryColor, height: 1.3),
      textAlign: TextAlign.center,
      );
  }

Error page

If geting data is error

  @override
  Widget errorPage(VoidCallback refreshCallback, String? msg) {
    return SizedBox(
      width: double.infinity,
      child: Column(
        children: [
          Text("pageError"),
        ],
      ),
    );
  }