Bloc pattern

index:

• Introduction
• Links
• Set the initials of the page
• Define function for getting data
• Use from FxStreamPaginate component to paginate data

Introduction:

Bloc pattern is used for api analyze in flutterap, you can config the structure for getting the data simple in flutterap admin panel.

Links:

https://flutterap.com/
https://flutterap.features.com/
https://docs.flutterap.com/
https://github.com/flutterap59/flutterap/

 Set the initials of the page:

class _FxBlockApiSampleState extends State<FxBlockApiSample> {

  bool _finishFlag = false;

  String _total = "0";

  List<MediaModel> list = [];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {...

Define function for getting data:

  _getData(int currentPage) async {
    if (currentPage == 1) {
      list.clear();
    }
    MediaPaginateModel pageData = await mediaBlocShow.fetchShow(
      apiAddress: "dummy/images?page=$currentPage",
    );

    list.addAll(pageData.data!.list);

    if (pageData.total != null) {
      setState(() {
        _total = pageData.total!;
      });
    }



    if (_total == list.length.toString()) {
      _finishFlag = true;

    }
  }

Use from FxStreamPaginate component to paginate data:

 @override
  Widget build(BuildContext context) {
    return FxStreamPaginate<MediaPaginateModel>(
      stream: mediaBlocShow.actions,
      finishFlag: _finishFlag,
      getData: (currentPage) {return _getData(currentPage);},
      child: Wrap(
        alignment: WrapAlignment.center,
        spacing: (InitialDims.space5),
        runSpacing: InitialDims.space2,
        children:
            List.generate(_finishFlag ? list.length : list.length + 1, (index) {

          return index < list.length
              ? FxImageCard(
                  imagePath: list[index].url!,
                )
              : Center(
                  child: CircularProgressIndicator(
                    color: InitialStyle.primaryColor,
                  ),
                );
        }),
      ),
    );
  }

we use this widget in panel in bloc pattern sample page: