How to implement ListView with FutureBuilder / StreamBuilder in dynamic component?

[rizalgunawan]

any way to do this? thanks.

[Rannie]

hi @rizalgunawan, dynamic component is a container, u can use setState to change json object in dynamic or just return widget directly:

FutureBuilder<CommonModel>(
            future: fetchPost(),
            builder:
                (BuildContext context, AsyncSnapshot<CommonModel> snapshot) {
                  return FLDyContainer(
                     jsonObject: $JSON_STRING_OR_OBJECT,
                     placeholder: CircularProgressIndicator(
                       strokeWidth: 3.0,
                       valueColor: AlwaysStoppedAnimation(Theme.of(context).accentColor),
                     ),
                 );
            }),

[rizalgunawan]

hi @rizalgunawan, dynamic component is a container, u can use setState to change json object in dynamic or just return widget directly:

FutureBuilder<CommonModel>(
            future: fetchPost(),
            builder:
                (BuildContext context, AsyncSnapshot<CommonModel> snapshot) {
                  return FLDyContainer(
                     jsonObject: $JSON_STRING_OR_OBJECT,
so what should I set inside $JSON_STRING_OR_OBJECT ?

what I mean is, I want to populate ListView children from FutureBuilder

    {
        "uniqueId": "flui-list01",
        "unitName": "ListView",
        "shrinkWrap": true,
        "separatedDivider": {
            "height": 1
        },
        "children": []
    }

basically, we can set widget to children like this, right?

return FutureBuilder(
    builder: (context, projectSnap) {
      return ListView.builder(
        itemCount: projectSnap.data.length,
        itemBuilder: (context, index) {
          ProjectModel project = projectSnap.data[index];
          return Column(
            children: <Widget>[
              // Widget to display the list of project
            ],
          );
        },
      );
    },
    future: getProjectDetails(),
  );

May I have an example?

Thank you, this is great's plugin btw..

[Rannie]

hi @rizalgunawan,i think you can try like this:

(jsonlist) => {
  final list = [];
  jsonlist.forEach((item) {
    list.add(FLDyContainer(
                     jsonObject: item));
  });
  // return list or set state to change children.
}

FLDyContainer will not add widget level, so u can use it like above.

[rizalgunawan]

Hi @Rannie, thanks for your quick response,

I think you misinterpreted what I meant, Try to see the example Dynamic ListView at : https://github.com/Rannie/flui/blob/master/example/lib/pages/dylistview_page.dart

it contains a static widget from this :

const ListJson =
    '{
    "uniqueId": "flui-safearea",
    "unitName": "SafeArea",
    "child": {
        "uniqueId": "flui-list01",
        "unitName": "ListView",
        "shrinkWrap": true,
        "separatedDivider": {
            "height": 1
        },
        "children": [
            {
                "uniqueId": "tile-01",
                "unitName": "ListTile",
                "title": {
                    "unitName": "Text",
                    "text": "FLUI"
                },
                "subtitle": {
                    "unitName": "Text",
                    "text": "An UI framework for Flutter"
                }
            },
        ]
    }
}';

I want to refresh or load more data to the ListView children from the API, without re-creating ListView from json, is that possible?

Maybe we can add some params to the widget config, like this:

{
    "uniqueId": "flui-safearea",
    "unitName": "SafeArea",
    "child": {
        "uniqueId": "flui-list01",
        "unitName": "ListView",
        "loadMoreUrl" : "http://route-to-api.com/action?page=1&perPage=10",
        "children": [
        ]
    }
}

[Rannie]

@rizalgunawan i see, It is not supported to disassemble it for refreshing children. so i only can suggest you to write a list view in code and just change children...

[Rannie]

@rizalgunawan FLUI-Dynamic will add dynamic value binding in the future, may also support this kind of splicing to meet your needs... thanks.